how to make a screen scrollable in react native code example
Example 1: how to detect onend reach of scrollview in react native
import React from 'react';
import {ScrollView, Text} from 'react-native';
const isCloseToBottom = ({layoutMeasurement, contentOffset, contentSize}) => {
const paddingToBottom = 20;
return layoutMeasurement.height + contentOffset.y >=
contentSize.height - paddingToBottom;
};
const MyCoolScrollViewComponent = ({enableSomeButton}) => (
<ScrollView
onScroll={({nativeEvent}) => {
if (isCloseToBottom(nativeEvent)) {
enableSomeButton();
}
}}
scrollEventThrottle={400}
>
<Text>Here is very long lorem ipsum or something...</Text>
</ScrollView>
);
export default MyCoolScrollViewComponent;
Example 2: auto scroll to view react-native
<ScrollView ref={view => this._scrollView = view} />
And set the scroll position elsewhere with:
scrollToRow(itemIndex) {
this._scrollView.scrollTo({y:itemIndex * ROW_HEIGHT});
}