Getting the current page index

[pavsidhu]

There does not seem to be a clear method to understand what page is focused. Something along the lines of would be helpful:

<Pages onChange={index => this.setState({ index })} />

Let me know if I can help.

[sytolk]

I need this too. There is no way to track pages with Google Analytics

[pavsidhu]

I can't 100% remember where I found this code, but I customized it to add a page counter:

import * as React from 'react'
import {
  Dimensions,
  ScrollView,
  NativeSyntheticEvent,
  NativeScrollEvent
} from 'react-native'

interface Props {
  onPageChange: (page: number) => void
}

interface State {
  currentPage: number
}

const { width } = Dimensions.get('window')

export default class Pages extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)

    this.onScroll = this.onScroll.bind(this)
    this.onMomentumScrollEnd = this.onMomentumScrollEnd.bind(this)
  }

  onScroll(event?: NativeSyntheticEvent<NativeScrollEvent>) {
    if (!event) return

    const xOffset = event.nativeEvent.contentOffset.x + 10
    const currentPage = Math.floor(xOffset / width)
    this.setState({ currentPage })
  }

  onMomentumScrollEnd(event?: NativeSyntheticEvent<NativeScrollEvent>) {
    if (!event) return

    const { onPageChange } = this.props
    const xOffset = event.nativeEvent.contentOffset.x + 10
    const currentPage = Math.floor(xOffset / width)
    if (this.state.currentPage === currentPage) {
      if (onPageChange && typeof onPageChange === 'function') {
        onPageChange(this.state.currentPage)
      }
    }
  }

  render() {
    return (
      <ScrollView
        horizontal={true}
        snapToInterval={width}
        snapToAlignment="center"
        decelerationRate={0}
        onScroll={this.onScroll}
        onMomentumScrollEnd={this.onMomentumScrollEnd}
        scrollEventThrottle={16}
        showsHorizontalScrollIndicator={false}
      >
        {this.props.children}
      </ScrollView>
    )
  }
}

I used this in place of react-native-pages and it worked well for what I wanted it for. There's an onPageChange prop that returns the page index.

[AlanSaracho]

i found a solution for this problem.

i use the onMomentumScrollEnd scrollview prop.

my code:

onMomentumScrollEnd (event) {
    const {horizontal, onSelect} = this.props;
    const {[horizontal? 'width' : 'height']: base} = this.state;
    const {[horizontal? 'x' : 'y']: offset} = event.nativeEvent.contentOffset;

    onSelect(offset / base);
  }

[AlanSaracho]

@n4kz Can you give me access for fix this issue? Thanks!

[asimonv]

There does not seem to be a clear method to understand what page is focused. Something along the lines of would be helpful:

<Pages onChange={index => this.setState({ index })} />

Let me know if I can help.

it works now

[aroberts91]

There does not seem to be a clear method to understand what page is focused. Something along the lines of would be helpful:

<Pages onChange={index => this.setState({ index })} />

Let me know if I can help.

it works now

This still doesnt work for me

[tomleclercq]

There does not seem to be a clear method to understand what page is focused. Something along the lines of would be helpful:

<Pages onChange={index => this.setState({ index })} />

Let me know if I can help.

it works now

This still doesnt work for me

Same here, therefore I use <Pages onScrollEnd={index => this.setState({ index }} >

which works on iOS with the swipe action but not on Android

[n4kz]

Thanks for question and sorry for delayed reply. onScrollEnd callback can be used to get active page index as mentioned by @tomleclercq. On Android it should be fixed by recent release 0.8.0.

[Hopreeeenjust]

Does not work on Android with the release 0.9.0. 'onScrollEnd' doesn't get called.