Adding text above an image with onMouseEnter in React Native

June 2, 2022

I want to have text apear above my image when my mouse hover over it. I tryed some things, but the onMouseEnter/onMouseLeave seems the most promising. Howether I encountered an error:
When I hover over my image, my text is not here. Here is my code :

          <View
            style={{
              flex: 1,
              justifyContent: "center",
            }}
          >
            <div
              onMouseEnter={() => {
                <Text>Hi here</Text>;
              }}
              onMouseLeave={() => {}}
            >
              <Image
                source={screen2}
                style={{
                  width: "80%",
                  height: "80%",
                  marginBottom: 150,
                  marginTop: 120,
                  marginLeft: "-10%",
                }}
              />
            </div>
          </View>

>Solution :

You can use an hook to set the image show, when the mouse enter you set your hook for true when the mouse leave you set to false

  const [show, setShow] = useState(false)
    return (
        <View
            style={{
                flex: 1,
                justifyContent: "center",
            }}
        >
            {show && <text>My text headers</text>}
            <div
                onMouseEnter={() => setShow(true)}
                onMouseLeave={() => setShow(false)}
            >
                <Image
                    source={screen2}
                    style={{
                        width: "80%",
                        height: "80%",
                        marginBottom: 150,
                        marginTop: 120,
                        marginLeft: "-10%",
                    }}
                />
            </div>
        </View>
    )