I trying to make a onPress hover effect to show text, when I click on image it will show me a text layer on my image, as its working fine for one image & text, but while making dynamic.. clicked on one image then that effect, affecting to all images with text. simply I want to show on single click show one text related to img, on different images on click show different text related to that images. how can fix it..

App.js

import Button from "../custom-components/Button";
import React, { useState, useEffect } from "react";
import {
  Image,
  ImageBackground,
  StyleSheet,
  TouchableOpacity,
  Text,
  Touchable,
  View,
  FlatList,
} from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { BottomTabBarHeightCallbackContext } from "@react-navigation/bottom-tabs";
import axios from "axios";
import { API_URL } from "@env";
import { useSelector } from "react-redux";

export default function App() {
  const languageState = useSelector((state) => state.languageReducer);
  const [xx43d, setxx43d] = React.useState(languageState.language);
  const [showText, setShowText] = useState(false);
  const [apiData, setApiData] = useState([]);

  React.useEffect(() => {
    axios
      .get(`${API_URL}/xyxsnn?xx43d=${xx43d}`)
      .then((response) => {
        if (response.status === 200) {
          setApiData(response.data.result);
        }
      })
      .catch((errors) => {
        console.log(errors);
      });
  }, []);

  return (
    <>
      <ScrollView>
        <FlatList
          data={apiData}
          numColumns={2}
          keyExtractor={(item, index) => index}
          renderItem={({ item }) => (
            <>
              <TouchableOpacity
                activeOpacity={0.5}
                onPress={() => setShowText(!showText)}
              >
                <ImageBackground
                  source={{ uri: "https://reactjs.org/logo-og.png" }}
                  resizeMode="cover"
                  style={styles.image}
                >
                  {!!showText && <Text style={styles.text}>{item.name}</Text>}
                </ImageBackground>
              </TouchableOpacity>
            </>
          )}
        />
      </ScrollView>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    justifyContent: "center",
    height: 250,
    width: 170,
    margin: 12,
    borderRadius: 10,
  },

  text: {
    color: "white",
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#000",
  },
});

CodePudding user response：

Make Item a seprate component which has its own showText state.

Like

import Button from "../custom-components/Button";
import React, { useState, useEffect } from "react";
import {
  Image,
  ImageBackground,
  StyleSheet,
  TouchableOpacity,
  Text,
  Touchable,
  View,
  FlatList,
} from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { BottomTabBarHeightCallbackContext } from "@react-navigation/bottom-tabs";
import axios from "axios";
import { API_URL } from "@env";
import { useSelector } from "react-redux";

export default function App() {
  const languageState = useSelector((state) => state.languageReducer);
  const [xx43d, setxx43d] = React.useState(languageState.language);
  const [apiData, setApiData] = useState([]);

  React.useEffect(() => {
    axios
      .get(`${API_URL}/xyxsnn?xx43d=${xx43d}`)
      .then((response) => {
        if (response.status === 200) {
          setApiData(response.data.result);
        }
      })
      .catch((errors) => {
        console.log(errors);
      });
  }, []);

  return (
    <>
      <ScrollView>
        <FlatList
          data={apiData}
          numColumns={2}
          renderItem={({ item }) => <Item data={item}/>}
          keyExtractor={(item, index) => index}
        />
      </ScrollView>
    </>
  );
}

const Item = ({data}) => {
  const [showText, setShowText] = useState(false);

  return(<TouchableOpacity
    activeOpacity={0.5}
    onPress={() => setShowText(!showText)}
  >
    <ImageBackground
      source={{ uri: "https://reactjs.org/logo-og.png" }}
      resizeMode="cover"
      style={styles.image}
    >
      {showText && <Text style={styles.text}>{data.name}</Text>}
    </ImageBackground>
  </TouchableOpacity>)
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    justifyContent: "center",
    height: 250,
    width: 170,
    margin: 12,
    borderRadius: 10,
  },

  text: {
    color: "white",
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#000",
  },
});