Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

react-native self scrolling effect using scrollview

$
0
0

I am not sure if the heading is accurate but I want to implement something like this in react-native

enter image description here

Notice how it automatically scrolls for a while when the user scrolls quickly from right to left.

This is what I have

enter image description here

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;

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>