Skip to content

Instantly share code, notes, and snippets.

@ashrithks
Created October 31, 2017 13:55
Show Gist options
  • Save ashrithks/8d97f928d92643468a26e29c4d2dbb67 to your computer and use it in GitHub Desktop.
Save ashrithks/8d97f928d92643468a26e29c4d2dbb67 to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link

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 }) }}

@amit13091992
Copy link

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 }) }}

@andresmechali
This only works if you click on the ScrollView. If you are normally scrolling then this method is not getting called.

@kunalsolanki1992
Copy link

+1

Has anyone found how to handle this?

@shiny852
Copy link

Hello, please is there a chance to scroll content of app using buttons ? I have 2 buttons, up and down. How can i make it slowly scroll up or down ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment