nestedScrollview in react native

nestedScrollview

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

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.

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

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.

+1

Has anyone found how to handle this?

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 ?