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",},