How to Give Different Styles to Same btn in scrollView in React native?

Question

I am creating a scrollview, in which I placed some buttons, & as btns scrolls, I want their opacity to change, I am using flatList inside the scrollView for accessing data. Here is my code.

<ScrollView style={styles.btnScroll}>
        <FlatList
         style={styles.listView}
         data={STATIC_LIST}
         renderItem={this.renderbtns}
         ListFooterComponent={() => (
              <View style={styles.bottomSpacing} />
         )}
         showsVerticalScrollIndicator={false}
         keyExtractor={item => item.id}
        />
</ScrollView>

& for renderbtns :

  renderbtns = ({item}) => {
    return (
      <View>
        <TouchableOpacity>
          <Text style={styles.BtnText}>{item.name}</Text>
        </TouchableOpacity>
      </View>
    );
  };

I am displaying 5 buttons in scrollView at a time, & I want 1st & 5th btn to opacity 0.2, 2nd & 4th btn to opacity 0.5 & 3rd btn to opacity 1.

Answer 1

you can use index property and then check the index and make a condition

renderbtns = ({item, index}) => {
    const opacityCondition = () => {
      if (index === ????) {
        return 0.6
      }
      \\ make other conditions
      return 0.8
    }
    return (
      <View>
        <TouchableOpacity style={{opacity: opacityCondition(}}>
          <Text style={styles.BtnText}>{item.name}</Text>
        </TouchableOpacity>
      </View>
    );
  };