React Native - "Absolute" position and "zIndex" not working on Android

Question

I'm building a react native app. I have a circular image with text above it which the user can click to go to another page.

This works great on iOS, however on Android I can't click. When I inspect on Android and click the TouchableHighlight it seems like the appBody view I have as a parent is what's being clicked. I stripped the whole page down and removed the appBody leaving just the TouchableHighlight and still won't click on Android phones.

I noticed as soon as I remove the absolute position from the viewTextWrap it then triggers the click! However without the absolute position the Test text and background color is behind the image. I was reading absolute position with zIndex causes issue on Android, and to fix this by using elevation. So anywhere I have a Zindex I added the same elevation , but still doesn't work.

Here is my code:

<View style={globalStyle.appBody}>
    <TouchableHighlight style={{zIndex: 100, elevation: 100}} onPress={() => this._goToPage('Test')} underlayColor={'transparent'}>
        <View style={styles.ImageWrap}>
            <Image style={[globalStyle.ProfileImage, { top: -90 }]} source={{ uri: this.state.pic }} defaultSource={require('../../assets/images/placeholder.png')} />
            <Image style={styles.viewImage} source={require('../../assets/images/test.png')} />
            <View style={styles.viewTextWrap}>
                <Text style={styles.viewText}>Test</Text>
            </View>
        </View>
    </TouchableHighlight>

    //More code in the body here

</View>

And the css for those classes:

appBody: {
    backgroundColor: '#fff',
    padding: 25,
    height: '100%'
},
ImageWrap: {
    position: 'relative',
    backgroundColor: '#fff',
},
ProfileImage: {
    position: "absolute",
    zIndex: 100,
    top: -68,
    height: 136,
    width: 136,
    borderRadius: 136 / 2,
    alignSelf: 'center',
},
viewImage: {
    position: "absolute",
    zIndex: 100,
    elevation: 100, //Tried adding to match zIndez
    alignSelf: 'center',
    bottom: -50,
},
viewTextWrap: {
    position: "absolute", //If I remove this, the click works but the text is behind the image
    zIndex: 101,
    elevation: 101, //Tried adding to match zIndez
    alignSelf: 'center',
    bottom: -32,
},
viewText: {
    position: 'relative',
    fontSize: 12,
    textAlign: "center",
},

Answer 1

Instead making position absolute for viewTextWrap, you can use ImageBackground component so that text viewTextWrap doesn't go behind the Image.