I'm trying to find a simple working tooltip for react-native but I can't find any. All of them has many many bugs. I'd like to describe an issue in "react-native-elements/Tooltip" (version 3.4.2) and also ask for a working tooltip component.
...
render() {
return (
<View>
<Text style={styles.pageTitle}>{this.props.messages.account}</Text>
<View style={styles.horizontalFlex}>
<Text
style={styles.userInfo}>{this.props.messages.subscriptionModel}: {this.props.route.params.userProfile}
</Text>
<Tooltip popover={<Text>Info here</Text>}>
<EntypoIcon style={styles.infoIcon} name="info-with-circle" size={20} color={Colors.DARK_BLUE}/>
</Tooltip>
</View>
</View>
);
}
...
let styles = EStyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
},
pageTitle: {
...
},
userInfo: {
textAlign: "left",
justifyContent: "center",
marginLeft: "20rem",
color: Colors.DARK_BLUE,
fontSize: "15rem",
marginBottom: "10rem"
},
infoIcon: {
paddingLeft: "20rem",
},
horizontalFlex: {
flexDirection: "row"
}
});
...
The output for the above code is the following:
Somehow the icon which I'm putting a Tooltip to, slides above. It doesn't matter if it's an icon or a text, same issue occurs. How do I fix this? Do you know any other working tooltip in react-native which you tried and saw that it is working recently?
I had to set withOverlay to false and skipAndroidStatusBar to true. This wasn't what I needed but still it's acceptable. Here is the code:
<Tooltip
popover={<Text style={...text style here...}>Change here</Text>}
withOverlay={false}
skipAndroidStatusBar={true}
containerStyle={...container style here...}
backgroundColor={...color...}>