Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

ScrollView inside TouchableOpacity

Tags:

javascript

ios

jsx

react-native

I'm trying to set a horizontal ScrollView inside a TouchableOpacity component (for necessary reasons). However the TouchableOpacity overrides any horizontal scrolling capabilities and executes the onPress even for a horizontal touch movement.

Is there a way to give the ScrollView touch event priority over the parent Touchable? That way the user can scroll the component and press it. Below is a code snippet similar to what I'm trying to implement.

<TouchableOpacity
    onPress={this._onPress}>
    <View>
        ... Some view I want static ...
    </View>
    <ScrollView
        horizontal={true}>
        ... A bunch of components I want scrollable ...
    </ScrollView>
</TouchableOpacity>

Thanks!

like image 386
cAstronaut Avatar asked Mar 26 '17 06:03

cAstronaut

People also ask

Can we use ScrollView inside FlatList?

Under the hood, FlatList uses the ScrollView component to render scrollable elements. However, unlike generic ScrollView, FlatList displays data lazily to save memory and processing time. Let's begin with the first method of rendering list data in a React Native app using the map function.

Which is better FlatList or ScrollView?

As opposed to the ScrollView, the FlatList renders only those elements that are currently being displayed on the screen (default: 10 items). Thus, it does not have any impact on the performance of the application. So, it is preferable to use the FlatList Component to display a large list of data.

What is the difference between FlatList and ScrollView?

This is due to the fact that ScrollView renders all the children in one go and maintains them. Meanwhile, FlatList unmounts components once they are way off the screen and recreates them from scratch once the item comes back from screen (thus state is lost).

What is the use of ScrollView component?

Using ScrollView ScrollViews can be configured to allow paging through views using swiping gestures by using the pagingEnabled props. Swiping horizontally between views can also be implemented on Android using the ViewPager component. On iOS a ScrollView with a single item can be used to allow the user to zoom content.

1 Answers

You can try this. I tried your code and It's work for me.

<TouchableOpacity>
  <View>
    <Text>... Some view I want static ...</Text>
  </View>
  <ScrollView horizontal>
    <View onStartShouldSetResponder={() => true}>
      <Text>... A bunch of components I want scrollable ...</Text>
    </View>
  </ScrollView>
</TouchableOpacity>
like image 156
John Ocean Avatar answered Oct 01 '22 20:10

John Ocean
Sign in to Comment

Related questions

Auto increment value in custom directive

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!