You don’t need other libraries you can do that with ScrollView. All you need is to add the following props in your component. horizontal= {true} decelerationRate={0} snapToInterval={200} //your element width snapToAlignment={“center”} Check this snack for more details on how to implement it https://snack.expo.io/H1CnjIeDb
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
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
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