如何在本机反应中将不同的 styles 应用于特定按钮

Question

I have an image on which I'm applying different filter overlays. I want to apply specific styling based on the button pressed by the user. How can I achieve this?

Right now I'm using ternary condition but its just applying for one styling

       <Image
          source={{
            uri: source,
          }}
          style={styles.filterImage}
          resizeMode="contain"
        />
        <View
          style={
           filter1 ? styles.filterOverlay1 : styles.defaultFilterOverlay
          }

I have made multiple states for different filter overlays

  const [filter1, setFilter1] = useState(false);
  const [filter2, setFilter2] = useState(false);
  const [filter3, setFilter3] = useState(false);
  const [filter4, setFilter4] = useState(false);
  const [filter5, setFilter5] = useState(false);
  const [filter6, setFilter6] = useState(false);
  const [filter7, setFilter7] = useState(false);

When the user is pressing on a button its setting the state to true

           <TouchableOpacity
              style={styles.filterTags}
              onPress={() => setFilter1(true)}
            >
              <Text style={{ color: "#fff", fontWeight: "bold" }}>
                Filter 1
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.filterTags}
              onPress={() => setFilter2(true)}
            >
              <Text style={{ color: "#fff", fontWeight: "bold" }}>
                Filter 2
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.filterTags}
              onPress={() => setFilter3(true)}
            >
              <Text style={{ color: "#fff", fontWeight: "bold" }}>
                Filter 3
              </Text>
            </TouchableOpacity>

Answer 1

you can use a ternary condition like this

style={
       filter1 ? styles.filterOverlay1 : filter2 ? styles.filterOverlay2 :  filter3 ? styles.filterOverlay3 : filter4 ? styles.filterOverlay4 :styles.defaultFilterOverlay
      }

or you can use filters like this

const [selectedFilter, setSelectedFilter] = useState(styles.defaultFilterOverlay);

on TouchableOpacity press

<TouchableOpacity
          style={styles.filterTags}
          onPress={() => setSelectedFilter(styles.filterOverlay1)}
        >

and set the selected filter

 style={ selectedFilter  }