Change color of View after user click on it

Question

  <View>
        <FlatList
          horizontal
          showsHorizontalScrollIndicator={false}
          data={dates}
          renderItem={({ item }) => {
            return (
                <TouchableHighlight  style={styles.bullet} >
                    
            <Text style={styles.btn}>{item.date}</Text>
        
            </TouchableHighlight>
            )

          }}
        />
      </View>

this is a list of text i want to change color of the text only which is pressed.

Answer 1

ideas: adding a value to check index of item. if index and current are the same, you will change the color of this item.

 let [current, setCurrent] = useState(0) //add here
...

 return <View>
        <FlatList
          horizontal
          showsHorizontalScrollIndicator={false}
          data={dates}
          renderItem={({ item, index }) => {
            return (
            <TouchableHighlight  style={styles.bullet} onPress={() => setCurrent(index)} > {/* add here */}
                    
               <Text style=[{styles.btn}, {color: index == current ? 'red' : 'white'}]>{item.date}</Text> {/* add here */}
        
            </TouchableHighlight>
            )

          }}
        />
      </View>

I am coding without IDE, sorry if it has any mistakes

Answer 2

If you have n components inside a view and you want to keep track of clicks for each of them individually, then you need to keep track of the indices for each of the components. This can be handled using a single state array.

const [coloredIndices, setColoredIndices] = useState(dates.map(item => -1))
  
function handleClick(index) {
    setColoredIndices(indices => indices.map((value, idx) => idx === index ? -1*(value) : value))
}

return <View>
    <FlatList
      horizontal
      showsHorizontalScrollIndicator={false}
      data={dates}
      keyExtractor={(_, index) => index.toString()}
      renderItem={({ item, index }) => {
        return (
            <TouchableHighlight onPress={() => handleClick(index)}  style={styles.bullet} >        
                <Text style={[styles.btn, coloredIndices[index] !== -1 && {color: 'green'}]}>{item.date}</Text>
            </TouchableHighlight>
            )
          }}
        />
</View>
}

const styles = StyleSheet.create({
  bullet: {
    margin: 30
  },
  btn: {
    color: "red"
  }
});

The idea is as follows:

• The state is an array. There is a bijection between indices of the state and the indices of the flatlist items.
• The state is initialized with -1 for each of the items of the data for the flatlist.
• If we click on one item, we multiply the value of the corresponding index in our state array with -1. This allows us to toggle between two colors.

I have made a little snack for showcasing.

Answer 3

You can manage this with the help of jquery. Just addClass jquery onClick of the function. And define the classname in css with require color.

Ex: $( "Text" ).addClass( "yourClass" );