React Native Scroll View to keep track of full page scroll location

Question

I have a scroll view that contains an image that covers the entire screen. There are two buttons at the bottom of the screen, these will allow you to download or set the image as a wallpaper. The problem I'm having is I don't know which image is being looked at in the horizontal scroll view when the button is clicked.

I have knowledge of the screen size and was assuming if I could get the content offset or something like that from the currently viewed image in the view divided by the screen size could let me know what image in the array I'm looking at to perform the rest of the functionality.

Unfortunately, I'm unaware of how this could be done the code is below to give a bit of context.

        <ScrollView 
          horizontal
          decelerationRate={0}
          snapToInterval={width}
          snapToAlignment={"center"}
          style={{ height: height }}
        >
          {
            availibleBackgrounds.map(element => (
              <Image
                style={{ width: width, height: height, justifyContent: 'flex-end', alignItems: 'center' }}
                source={{
                  uri: element
                }}
              />
            ))
          }
        </ScrollView>

D10S · Accepted Answer · 2020-08-09 19:28:24Z

1

You need to get the offset of the content and you can do it with adding the following prop the the ScrollView:

onMomentumScrollEnd={event => setSelectedIndex(event.nativeEvent.contentOffset.x/width)}

setSelectedIndex is a function you should create.

edited Aug 9, 2020 at 19:28

answered Aug 9, 2020 at 6:14

D10S

1,5692 gold badges9 silver badges15 bronze badges

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

4 Comments

Chris Marshall Over a year ago

Once I get things started I will give this a try cheers

Chris Marshall Over a year ago

So i was having a play around with this solution and im guessing its going to require quite a lot of calculations to determine as the snap value isnt given to me its the end drag value thats givent to me but sometimes it can scrollback snap or scroll forward snap and you dont really know which way it has went as the value just tells you where you liftwed the finger.

D10S Over a year ago

Swap the 'onScrollEndDrag' with 'onMomentumScrollEnd'. Let me know if it worked so I'll edit my answer (for future generations ;)

Chris Marshall Over a year ago

Was just about to through that ion here it's much better on the calculations I have using the onMomentumScrollEnd method so i would suggest the change to onMomentumScrollEnd instead of the dragEnd

Chris Marshall · Accepted Answer · 2020-08-09 19:25:39Z

To add a little more closure to this question here's what I've done

  calculateCurrentIndex(position) {
    this.setState({ 
      selectedIndex: {
        current: Math.ceil((position / width).toFixed(2)),
      } 
    });
  }

----------------------------------------

        <ScrollView 
          horizontal
          decelerationRate={0}
          snapToInterval={width}
          snapToAlignment={"center"}
          style={{ height: height }}
          onMomentumScrollEnd={event => this.calculateCurrentIndex(event.nativeEvent.contentOffset.x)}
          showsHorizontalScrollIndicator={false}
        >
          {
            availibleBackgrounds.map((element, index) => (
              <Image
                key={index}
                style={{ width: width, height: height, justifyContent: 'flex-end', alignItems: 'center' }}
                source={{
                  uri: element
                }}
              />
            ))
          }
        </ScrollView>

Collectives™ on Stack Overflow

React Native Scroll View to keep track of full page scroll location

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related