React-native-pager-view: Getting current page item info

[erdouzun]

Hi everyone,

I have a simple question:

In which event I can get current page item?

Here is the simpflied version of my code:

renderPage(item) { let tmpConnectionOpacity = 0.25 let tmpInUseOpacity = 0.25 return ( <View key={item.id}> <TouchableOpacity> <Panel panelName={item.name} connectionOpacity={tmpConnectionOpacity} inUseOpacity={tmpInUseOpacity} /> </TouchableOpacity> </View> ); }
<ViewPager style={inlineStyles.panelPages} onPageSelected={this.onPageSelected} ref={(viewPager) => {this.viewPager = viewPager}}> {this.context.cloudData.panelList.map(panel => this.renderPage(panel))} </ViewPager>

I just want to get the current page item information. Such as key or index, so I will be able to process that information. OnPageSelected event doesn't meet my requirements.

Thx in advance.

[brunocrpontes]

onPageScroll props return the current page and its offset while the user scroll the ViewPager.

Store it in a state or a context if you need to use it in deeper children of ViewPager

[erdouzun]

onPageSelected = (e) => { alert(e.nativeEvent.position) };

I try to show the current position. But it didn't give me what I wanted.
TEST1 - index 0
TEST2 - index 1
TEST3 - index 2

are my items. But the indexes that alerted are not the same with the keys.

[erdouzun]

By the way,

onPageSelected and onPageScroll gives the same position values.

[brunocrpontes]

Yes, it will give the same position. You don't have a way to access the current position directly from ViewPager component, you need to store it and change the value based on events like onPageScroll or onPageSelected.

function Component(props) {
  //by default the initialPosition props is 0, set as initial value of currentPage too...
  const [currentPage, setCurrentPage] = useState(0);

  {... component code }
  const onPageScroll = (event) => {
    const {position} = event.nativeEvent;
    if(position !== currentPosition) {
      setCurrentPosition(position);
    }
  } 

 return (
  <ViewPager onPageScroll={onPageScroll}>
    ... your pages
  </ViewPager> 
 )
}

If you need the current position after render, just use currentPosition.

[erdouzun]

I understand what you mean, but this is very difficult for a horizantally scrollable view pager.

I guess, I should get offset and position values together and try to detect which page is shown at that time. Am I right?

[brunocrpontes]

I guess, I should get offset and position values together and try to detect which page is shown at that time. Am I right?

No, the position refers exactly to the current page are selected, offset are usual if you need some tracking to do some animation or an event with precision. If you just need the current index, position is enough.

[erdouzun]

But I tried to explain with the screenshots, position doesn't give the right index.

I can't understand working logic of position :/

When I scrolled to TEST 3 page, it didn't alert.
When I scrolled to TEST 2 page, it alerted 2. But I expected 1 from it.

[troZee]

@erdouzun have you checked out our example ? I think the answer is provided by @brunocrpontes . Can you provide a code ? Because it is hard to investigate, when example works fine but you code does not.

Thank you @brunocrpontes for trying to help @erdouzun

[erdouzun]

Yes I checked it out times and times. It looks so simple but I cannot get the right index when I scroll my pages.

onPageSelected = (event) => { const {position} = event.nativeEvent; this.context.changeSelectedPanel(this.context.cloudData.panelList[position].name) };

renderPage(item) { let tmpConnectionOpacity = 0.25 let tmpInUseOpacity = 0.25 return ( <View key={item.id}> <TouchableOpacity> <Panel panelName={item.name} connectionOpacity={tmpConnectionOpacity} inUseOpacity={tmpInUseOpacity} /> </TouchableOpacity> </View> ); }

let panelView = <View/> if(this.context.cloudData.panelList.length > 0) { panelView = <ViewPager style={inlineStyles.panelPages} onPageSelected={this.onPageSelected} initialPage={0} ref={(viewPager) => {this.viewPager = viewPager}}> {this.context.cloudData.panelList.map(panel => this.renderPage(panel))} </ViewPager> }

STYLE
panelPages: { height:StyleVars.windowHeight * 0.1304, marginTop:StyleVars.windowHeight * 0.0299, },

Page is rendered and it (pnPageSelected event) gives me the index 0 (OK.)
When I scrolled to 2nd item it gives me the index 0 (??)
When I scrolled to 3rd item it gives me nothing (??)
When I scrolled to 2nd item again it gives me index 2 (??)

[erdouzun]

In your example;

you scroll the pages with button touch event. So you can easily set the position.

I try to detect the page position with the slider current movement. This is why my code doesn't work. I hope I explain myself clear.

[erdouzun]

I guess the problem is about the defining the transitionStyle.
I added this and it worked

transitionStyle="scroll"

Thanks for your help.

[troZee]

Hey @erdouzun, transitionStyle is "scroll" by default. In curl mode onPageScroll does not work. I am still working on it.

[erdouzun]

I'm sorry if I mislead you.

I changed also the ref defining. Maybe the first problem of my code was that.

It was like that:
ref={(viewPager) => {this.viewPager = viewPager}}

And then I changed to:
ref={this.viewPager}

You are right transtionStyle="scroll" is default.

[mustapha-ghlissi]

This how you can do it:

onPageScroll = ({nativeEvent}) => {
        this.setState({
            activeStep: nativeEvent.position
        });
}

then pass the prev function to the ViewPager component

<ViewPager 

onPageScroll={this.onPageScroll}
>
.............
</ViewPager>

[HVHMobileDeveloper]

This how you can do it:

onPageScroll = ({nativeEvent}) => {
        this.setState({
            activeStep: nativeEvent.position
        });
}

then pass the prev function to the ViewPager component

<ViewPager 

onPageScroll={this.onPageScroll}
>
.............
</ViewPager>

Save my life 🎿✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅

[itechsuite]

This how you can do it:

onPageScroll = ({nativeEvent}) => {
        this.setState({
            activeStep: nativeEvent.position
        });
}

then pass the prev function to the ViewPager component

<ViewPager 

onPageScroll={this.onPageScroll}
>
.............
</ViewPager>

You saved me a lot

[itechsuite]

This worked