onNext, onPrevious, onMove events

[kickbk]

Are there any event listeners available for when we go from one slide to the other? For example:

<Onboarding
    onMove={(currentSlide, nextSlide) => {
        console.log('Moved from slide ${currentSlide} to slide ${nextSlide}');
    }}
    pages={[
        {
            ...
            onNext: ( {(currentSlideIndex) => {console.log("Pressed NEXT on slide", currentSlideIndex)}}),
            onPrevious: ( {(currentSlideIndex) => {console.log("Pressed Previous on slide", currentSlideIndex)}})
         },

[kickbk]

Added a PR for onSlide to handle it. This method is necessary if, for instance, you want to start an animation on a specific slide (page) when you wipe/move to it.

[darrylyoung]

I'd also love to see this kind of functionality as I have a similar use case. That is, I'd like to start an animation on an image as soon as the user navigates to that page/slide.

For now, here's a workaround I came up with that allows me to do that. If anyone's interested, here's what I did:

1. In the component that uses <Onboarding />, create some state that stores the current page index and use pageIndexCallback to keep this updated with the current page/slide.

const [currentPageIndex, setCurrentPageIndex] = useState<number>(0)

const getPageIndex = (pageIndex: number) => {
  setCurrentPageIndex(pageIndex)
}

return (
  <View>
    <Onboarding
      pageIndexCallback={getPageIndex}
      // ...
    />
  </View>
)

2. In each of the components that hold the image, receive a shouldAnimate prop and, based on the index, decide whether you're currently on that page/slide.

<Onboarding
  pageIndexCallback={getPageIndex}
  // ...
  pages={[
    {
      backgroundColor: color.palette.offWhite,
      image: (
        <OnboardingImage
          shouldAnimate={currentPageIndex === 0}
          // ...
        />
      ),
      title: 'Title 1',
      subtitle: 'Subtitle 1',
    },
    {
      backgroundColor: color.palette.offWhite,
      image: (
        <OnboardingImage
          shouldAnimate={currentPageIndex === 1}
          // ...
        />
      ),
      title: 'Title 2',
      subtitle: 'Subtitle 2',
    },
    // ... (more pages comparing `currentPageIndex` with incrementing indexes of 3, 4, etc.)
  ]}
/>

3. Finally, in the component that holds the image, receive the shouldAnimate prop and using useEffect, trigger whatever animation is required. As currentPageIndex is updated every time the user navigates, the shouldAnimate boolean changes, triggering a re-render and triggering the required animation.

Quite the workaround, I guess, but it's actually working really well so it'll do for now.

[jfilter]

You can get updates via pageIndexCallback and build your logic around it, like @darrylyoung demonstrated: https://github.com/jfilter/react-native-onboarding-swiper/issues/103#issuecomment-874919808

[thisisashukla]

hi @jfilter it would be great to have onNext, onPrevious, onMove props though. Would help users write their logic easily and cleanly. Thanks