react-native-scrollview
ScrollView with flex 1 makes it un-scrollable
Try using flexGrow: 1 instead of flex: 1 in scrollView content container style as follows. <ScrollView contentContainerStyle={{ flexGrow: 1, borderColor: ‘green’, borderWidth: 5 }}> <View style={styles.box1} /> <View style={styles.box2} /> <View style={styles.box1} /> </ScrollView> https://snack.expo.io/HkkEVoh6Z
How to get currently visible index in RN flat list
UPD. thanks to @ch271828n for pointing that onViewableItemsChanged shouldn`t be updated You can use FlatList onViewableItemsChanged prop to get what you want. class Test extends React.Component { onViewableItemsChanged = ({ viewableItems, changed }) => { console.log(“Visible items are”, viewableItems); console.log(“Changed in this iteration”, changed); } render () => { return ( <FlatList onViewableItemsChanged={this.onViewableItemsChanged } viewabilityConfig={{ … Read more
Detect ScrollView has reached the end
I did it like this: 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 … Read more