Creating a half-white background for an image in React native ( style question)-CodePudding

The text in my image is displayed but difficult to read because of the dark color of the said image. In order to solve the issue of the color of the text (it must be black), I was thinking of whitening the image. Do you have any solutions? I think I must insert something in a second && but not sure what.

Here is my code :

          const [show, setShow] = useState(false);

   ...

          <View
            style={{
              flex: 7.5,
              justifyContent: "center",
            }}
          >
            <div
              onm ouseEnter={() => {
                setShow(true);
              }}
              onm ouseLeave={() => setShow(false)}
            >
              {show && (
                <Text
                  style={{
                    zIndex: 15,
                    fontSize: 20,
                    fontWeight: "600",
                    color: "black",
                    position: "absolute",
                    top: 50,
                    right: 250,
                  }}
                >
                  SENSE
                </Text>
              )}
              {show && (
                <Text
                  style={{
                    zIndex: 15,
                    fontSize: 20,
                    fontWeight: "400",
                    color: "black",
                    position: "absolute",
                    top: 100,
                    right: 200,
                    width: 200,
                  }}
                >
                  The small investment research platform
                </Text>
              )}
              <Image
                source={screen2}
                style={{
                  width: "80%",
                  height: "80%",
                  marginBottom: 258,
                  marginTop: 12,
                  marginLeft: "-10%",
                }}
              />
            </div>
          </View>

CodePudding user response：

You need to create 2 new things: {!show && (<Image...} and {show && (<Image...} .For the second one add an opacity <1 in order to whiten it.

CodePudding user response：

You can either reduce the opacity of the image or add filter to it. You can read more about it here https://developer.mozilla.org/en-US/docs/Web/CSS/filter Good luck!