React/React Native onLayout for Child View

Question

I am looking to build a button/view that animates when a user taps and holds on it. This animation will just be a progressive change of color from white to a green color. I have found a tutorial that does exactly this:

http://browniefed.com/blog/react-native-press-and-hold-button-actions/

In the render function, the author uses:

<View style={styles.container} onLayout={this.onPageLayout}>
        <TouchableWithoutFeedback
            onPressIn={this.handlePressIn}
            onPressOut={this.handlePressOut}
        >
            <View style={styles.button} onLayout={this.onPageLayout2}>
              <Animated.View style={[styles.bgFill, this.getProgressStyles()]} />
              <Text style={styles.text}>Press And Hold Me</Text>
            </View>
        </TouchableWithoutFeedback>
        <View>
            <Text>{this.state.textComplete}</Text>
        </View>
   </View>

Please note there are two onLayout mentions...one in the parent View and the other in the View about halfway down

The way this works is the onLayout call is supposed to get the size of the TouchableWithoutFeedback button so that I can set the animation to have the correct sizing. However, the second onLayout call just does not get called no matter what I try. The very top View's onLayout is being called so I know that my code is good (as this.onPageLayout and this.onPageLayout2 are exact copies except their console.logs vary slightly).

If I remove all the surrounding code and only have the inner View in this render function, then the onLayout={this.onPageLayout2} works like a charm, but as soon as I put the rest of the parent back in, it no longer works.

Does anybody know how I can get a child View to have their onLayout method work? Or another way or getting the size of the TouchableWithoutFeedback button for my purposes of animation?

Thanks!

Answer 1

You are using TouchableWithoutFeedback and so you don't get any feedback from it's child. Change it to other buttons for example: TouchableOpacity, Then you can have onLayout for both components.