How to disable highlighting effect of TouchableOpacity when scrolling?

Question

<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.

Solution 1

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".

Solution 2

Try setting the activeOpacity prop on the TouchableOpacity to 1 when scrolling. Use default settings when the user stops scrolling.

https://facebook.github.io/react-native/docs/touchableopacity#activeopacity

Solution 3

You can try changing param delayPressIn. Look doc.

<TouchableOpacity delayPressIn={150} > 
 {children}
</TouchableOpacity>

Solution 4

You could try replace TouchOpacity with RectButton in 'react-native-gesture-handler'. And don't forget to replace the ScrollView import from 'react-native' to 'react-native-gesture-handler'.

I found this solution in here.

It just said:

provides native and platform default interaction for buttons that are placed in a scrollable container (in which case the interaction is slightly delayed to prevent button from highlighting when you fling)

Solution 5

You can make use of onScrollBeginDrag and onScrollEndDrag props.

 state = {
    scrollBegin: false
  }

  scrollStart = () => this.setState({scrollBegin: true})   
  scrollEnd = () => this.setState({scrollBegin: false})

 <ScrollView onScrollBeginDrag={this.scrollStart} onScrollEndDrag={this.scrollEnd}>
   ... Other stuff
 </ScrollView>

and set activeOpacity={1} for TouchableOpacity when this.state.scrollBegin=true

View more solutions

Comments

[Henok Tesfaye]

Thank you @Pritish Vaidya but it doesn't solve my problem. Your solution is worked after scrolling is started but not the moment i started scroll.

[Tina]

This works fine. Thanks! Setting activeOpacity={1} does not fade the view.

[duhaime]

I'm confused--why use TouchableOpacity if you set the element's opacity to 1 when the user interacts with it? Isn't the whole goal to indicate user interactions by changing the opacity?

[Jeevan Prakash]

@duhaime honestly speaking the default effect looks so weird sometimes that developer wants to get rid of it entirely. At the end, there will be UX loss either way. Sometimes, removing that effect seems better option.

[Will]

@JeevanPrakash then you should use TouchableWithoutFeedback

[wkwkwk]

you can decrease the value if you want a lighter fade effect

[Abid Khairy]

work like a charm. but i prefer using 100 ms delay time as the fade effect won't show on scroll but still visible on normal press

[JCraine]

The documentation link has updated. It's now here: docs.swmansion.com/react-native-gesture-handler/docs/api/…

[Sir hennihau]

I'm on 0.63.3 and it doesn't just work out of the box :s