How to disable highlighting effect of TouchableOpacity when scrolling?

react-native scrollview touchableopacity
Henok Tesfaye picture Henok Tesfaye · Sep 20, 2018 · Viewed 14.5k times · Source 
<TouchableOpacity style={{ flex: 1 }} >
  <ImageBackground
    source={require('../../images/home.jpg')}>
      <View style={styles.item} collapsable={false}>
        <H3>{contentData[i].name}</H3>
        <Text>{contentData[i].description}</Text>
      </View>
  </ImageBackground>
</TouchableOpacity>

I have a list of TouchableOpacity inside a ScrollView. I want to disable highlighting effect of TouchableOpacity. When scrolling I want to highlight only when onPress event is triggered. Because it may confuse the user that it is pressed.

Answer

Jeevan Prakash picture Jeevan Prakash · Nov 15, 2019

Simply pass activeOpactity prop with value 1.

<TouchableOpacity activeOpacity={1}>....</TouchableOpacity>

Make sure you import TouchableOpacity from "react-native" not from "react-native-gesture-handler".

Related questions

React Native: vertical centering when using ScrollView

I'm using React Native and I'm having trouble retaining vertical centering of elements as soon as I introduce a ScrollView. To demonstrate, I created 3 apps with React Native Playground. All examples have 2 pages, and they can be toggled by tapping …

Read More
React-Native Horizontal Scroll View Pagination: Preview Next Page/Card

I want to to a horizontal ScrollView with pagination enabled with one special requirement: each page (or card) is 90% of the container wide. The remaining 10% should be a preview of the next page. It is possible to do this with …

Read More
React native Android ScrollView scrollTo not working

I am trying to use a horizontal ScrollView in React Native for Android, where the starting position is in the middle of the scrolling images rather than (0,0). The scrollTo method seems to be called correctly inside componentDidMount but nothing moves …

Read More