Thumbnail hides after position:relative

I have a screen where I am using a Thumbnail and a UserInfoContainer, which is a PanGestureHandler(React native animation element that scrolls up). I want that even when I scroll up my UserInfoContainer container, the Thumbnail should stay on top of it at the same position.

export const Screen: React.FunctionComponent = () => {  return (<SafeAreaView style={styles.safeAreaViewContainer}><View style={styles.container}><View style={styles.iconsContainer}><TouchableOpacity          style={styles.cross}><Thumbnail            source={{              uri:'https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png',            }}          /></TouchableOpacity><HamburgerIcon style={styles.hamburgerIcon}/></View><View style={styles.infoContainer}><UserInfoContainer /></View></View></SafeAreaView>  );};export const styles = StyleSheet.create({  safeAreaViewContainer: {    flex: 1,  },  container: {    backgroundColor: '#323443',    flex: 1,  },  iconsContainer:{    flexDirection: 'row'  },  cross: {    paddingTop: moderateScale(30),    paddingLeft: moderateScale(20),    zIndex: 100,  },  infoContainer: {    flex: 1,  },});

I have added a zIndex but now when I add position: 'absolute', my thumbnail just disappears. This has worked with another FontAwesomeIcon but its not working here in case of my Thumbnail. How can I fix this?