React Native Scrollview scroll back to first image

Question

Trying to implement a image slider in React native using scrollview. The scrollview should scroll back to the first image if the user scrolls right from the last image. Implementing as a functional component. How do i detect that the user has scrolled ? I have tried using onScroll method of ScrollView , but it fires too many events. I want to basically reset the scrollview to first image if the user scrolls past the last image.

const scrollRef = useRef()

<View style={styles.container}>
      <ScrollView
       ref={ref => { scrollRef.current = ref }}
       horizontal={true} 
       showsHorizontalScrollIndicator={false}
       >

       {images.map((image, imageId) => {
              return (
                <TouchableHighlight
                  key={imageId}
                  underlayColor='red'
                >
                <Image source={{uri: image}} style={{width:width, aspectRatio: 3, resizeMode: 'cover'}} />
              </TouchableHighlight>
              )
        })}
      </ScrollView>
   </View>

Neha Chauhan · Accepted Answer · 2020-02-12 10:40:21Z

1

Please use Flatlist instead of scrollview,

        <FlatList
          ref={(ref) => {
            flatListRef = ref;
          }}
          horizontal={true}
          pagingEnabled={true}
          data={imageArray} //files
          legacyImplementation={true}
          showsHorizontalScrollIndicator={false}
          renderItem={({ item, index }: any) =>
            (
              <View
                style={{
                  width: width,
                  height: '100%',
                  justifyContent: 'center',
                  // alignItems: 'center',
                  backgroundColor: 'white'
                }}
              >

                <Image source={{ uri: item.uri }} style={{ width: '100%', 
                 height: item.height }}></Image>
                <Text style={{
                  paddingTop: 14, paddingLeft: 20, fontFamily: 'Roboto- 
                  Regular', fontSize: 16, color: 'rgb(74,74,74)'
                }}>{description + " " + item.width + 'x' + item.height + 
              '.jpg'}</Text>
              </View>
            )}
        />```

please try this code, hope this works for you

edited Feb 12, 2020 at 10:40

answered Feb 6, 2020 at 13:54

Neha Chauhan

6475 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Pokemon Player Over a year ago

My scrollview is working. I want to make the scroll position reach back to 1 in case of if the user scrolls past last image. How do I do that in Flatlist ?

Neha Chauhan Over a year ago

In the flast list you need to create Ref and using that ref you can use the flatlist method this.flatListRef.scrollToIndex({ index: this.state.currentindex, animated: true }); Also I have update the above code. You can see how i had assign the Ref.

Pokemon Player Over a year ago

On what event should the index be updated ? I tried doing it on onScroll, however onScroll is not reliable and gets triggered multiple times.

Neha Chauhan Over a year ago

@PokemonPlayer Please try above code I have implemented this code at my end. It's working for me. Hope it will also work for you. If not work then please do let me know.

Pokemon Player Over a year ago

This just gives a basic carousel. If i have 4 images, it does not scroll back to first position if i try to scroll past the last image, which is the problem i am trying to solve.

Collectives™ on Stack Overflow

React Native Scrollview scroll back to first image

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related