Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
nestedScrollview in react native
import React, { Component } from 'react';
import { View, ScrollView } from 'react-native';
export default class App extends Component {
constructor() {
super();
this.state = {
enabled:true
};
}
render() {
return (
<ScrollView
scrollEnabled={this.state.enabled}
>
<View style={{height:600,backgroundColor:'violet'}}></View>
<View style={{ height: 2000, backgroundColor: 'red' }} >
<ScrollView
onTouchStart={(ev) => {
this.setState({enabled:false }); }}
onMomentumScrollEnd={(e) => { this.setState({ enabled:true }); }}
onScrollEndDrag={(e) => { this.setState({ enabled:true }); }}
style={{ margin: 10, maxHeight: 200 }} >
<View style={{ height: 200, backgroundColor: 'blue' }} />
<View style={{ height: 200, backgroundColor: 'pink' }} />
<View style={{ height: 200, backgroundColor: 'blue' }} />
<View style={{ height: 200, backgroundColor: 'pink' }} />
<View style={{ height: 200, backgroundColor: 'blue' }} />
<View style={{ height: 200, backgroundColor: 'pink' }} />
<View style={{ height: 200, backgroundColor: 'blue' }} />
<View style={{ height: 200, backgroundColor: 'pink' }} />
<View style={{ height: 200, backgroundColor: 'blue' }} />
<View style={{ height: 200, backgroundColor: 'pink' }} />
<View style={{ height: 200, backgroundColor: 'blue' }} />
<View style={{ height: 200, backgroundColor: 'pink' }} />
</ScrollView>
</View>
</ScrollView>
);
}
}
@Amitshinde19

This comment has been minimized.

Copy link

Amitshinde19 commented Jan 16, 2018

Hello ashrithks,
I am facing issue with nested scroll view. I downloaded your code and it's working as expected but in my case i use two scroll view.
I have one table component and i have used react-native-data-table library which is using listview internally and then i applied scroll view to that table.Right now i have created this table as a component and i am using this into my container. In the container screen i have applied
scrollview to entire screen so by using the your provided code i tried working with this but once child scroll view (Table scroll view) is enabled it never comes out of it. And my screen is stuck there.Facing this issue as following events are not triggering from child scroll view (Table scroll view).

onMomentumScrollEnd={(e) => { this.setState({ enabled:true }); }}
onScrollEndDrag={(e) => { this.setState({ enabled:true }) }};

Please help me in this and if possible please share the code. Thanks in advance.

@andresmechali

This comment has been minimized.

Copy link

andresmechali commented Mar 19, 2018

Maybe that happens when you touch the child scrollview without dragging. If that is the case, you can easily fix it by adding an event when touches finishes:

onTouchEnd={(ev) => { this.setState({ enabled: true }) }}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.