react-nativetooltipreact-native-elements

React-Native Tooltip Issue


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:

enter image description here

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?


Solution

  • 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...}>