I am not sure if the heading is accurate but I want to implement something like this in react-native
Notice how it automatically scrolls for a while when the user scrolls quickly from right to left.
This is what I have
This is how my code looks like
<ScrollView style={{ ...styles.scrollView }} horizontal={true} contentContainerStyle={styles.scrollViewContainer} showsHorizontalScrollIndicator={false}> {profileData.map((profile, index) => { return (<TouchableWithoutFeedback key={`${index}Profile`} onPress={() => setActive(index)}><View style={styles.imageCircle}><ImageCircle uri={profile.path} active={index === active} /></View></TouchableWithoutFeedback> ); })}</ScrollView>
Any idea how I can fix it/apply it in my component? Below are the relevant styles.
import { StyleSheet, Dimensions } from 'react-native';const { width } = Dimensions.get('window');const styles = StyleSheet.create({ scrollView: { height: 100, }, scrollViewContainer: { paddingHorizontal: width * 0.5 - width * 0.1, }, imageCircle: { width: width * 0.2, display: 'flex', flexDirection: 'row', justifyContent: 'center', },});export default styles;