React Native - How to set blurRadius onto a selected image

Question

My app displays images and other info getting data from a JSON, and I want to set a blurRadius on the selected image when the unblur function is called.

My code is the following:

const [blur, setBlur] = useState(160);
const unblur = () => {
if(blur == 160){
    setBlur(0);
}
}


{isLoading ? <ActivityIndicator/> : (
<FlatList
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
    <>
    <Text style={{ textAlign: "left", color: 'white', fontSize: 24 }}>
        <Image style={{ alignSelf: "center" }} source={{uri: item.profile_picture, width: 48, height: 48}} />
        {item.username}
    </Text>
    <TouchableOpacity onPress={() => unblur()}>
        <Image style={{ alignSelf: "center" }} blurRadius={blur} source={{uri: item.picture, width: 400, height: 320}} />
    </TouchableOpacity>
    <Text style={{ textAlign: "left", color: 'white', fontSize: 24 }}>
        ID {item.id} 
    </Text>
    <Text>
        {'\n'}{'\n'}
    </Text>
    </>
)}
/>
)}

I want to change the {blur} value for a given image when I tap the TouchableOpacity component of the image I want to unblur. Right in this moment when I tap an image, all the images in the list are getting unblurred.

Answer 1

You should add the blur values inside your items like this. Create a new components called Items. Then, add the blur state inside it. (not inside Main).

const Main = () => {
  if (isLoading) {
    return;
    <ActivityIndicator />;
  }

  return (
    <FlatList
      data={data}
      keyExtractor={({ id }, index) => id}
      renderItem={({ item }) => <Item item={item} />}
    />
  );
};

const Item = ({ item }) => {
  const [blur, setBlur] = useState(160);
  const unblur = () => {
    if (blur == 160) {
      setBlur(0);
    }
  };

  return (
    <>
      <Text style={{ textAlign: "left", color: "white", fontSize: 24 }}>
        <Image
          style={{ alignSelf: "center" }}
          source={{ uri: item.profile_picture, width: 48, height: 48 }}
        />
        {item.username}
      </Text>
      <TouchableOpacity onPress={() => unblur()}>
        <Image
          style={{ alignSelf: "center" }}
          blurRadius={blur}
          source={{ uri: item.picture, width: 400, height: 320 }}
        />
      </TouchableOpacity>
      <Text style={{ textAlign: "left", color: "white", fontSize: 24 }}>
        ID {item.id}
      </Text>
      <Text>
        {"\n"}
        {"\n"}
      </Text>
    </>
  );
};

Also, may I suggest you can use 'onPressIn'. That way, image will unblur when the finger tap the image, not press the image. But that was your decision.