Getting current page item info

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.

[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>

[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.