Adding text above an image with onMouseEnter in React Native-CodePudding

I want to have text apear above my image when my mouse hover over it. I tryed some things, but the onm ouseEnter/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
              onm ouseEnter={() => {
                <Text>Hi here</Text>;
              }}
              onm ouseLeave={() => {}}
            >
              <Image
                source={screen2}
                style={{
                  width: "80%",
                  height: "80%",
                  marginBottom: 150,
                  marginTop: 120,
                  marginLeft: "-10%",
                }}
              />
            </div>
          </View>

CodePudding user response：

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
                onm ouseEnter={() => setShow(true)}
                onm ouseLeave={() => setShow(false)}
            >
                <Image
                    source={screen2}
                    style={{
                        width: "80%",
                        height: "80%",
                        marginBottom: 150,
                        marginTop: 120,
                        marginLeft: "-10%",
                    }}
                />
            </div>
        </View>
    )