Jacse / react-native-app-intro-slider

Simple and configurable app introduction slider for react native
MIT License
1.66k stars 330 forks source link

Provide functional example how to use custom buttons #214

Open ludgerey opened 4 years ago

ludgerey commented 4 years ago

There is an example how to use custom buttons, but as far as I can tell this example is not functional.

Current examle: https://github.com/Jacse/react-native-app-intro-slider/blob/master/examples/examples/CustomPagination/index.tsx

I don't know how to get those button to work.

Jacse commented 4 years ago

In what way is it not functional? Do the buttons now show up at all, are they not clickable or?

ludgerey commented 4 years ago

Sorry. I pasted the wrong example!

I am talking about this: https://github.com/Jacse/react-native-app-intro-slider/blob/master/examples/examples/CustomButtons/index.tsx

The buttons have no click handler and apparently there is no other magic that make them work. So the buttons seem to do nothing when pressing on them.

ncesar commented 3 years ago

having the same question :/

@jacse

ncesar commented 3 years ago

Functional component:

const slider = useRef();
return(
    <AppIntroSlider
      renderItem={renderItem}
      data={slides}
      onDone={onDone}
      showNextButton={true}
      ref={(ref) => (slider.current = ref)} // the ref
    />
  );

onPress={() => slider.current.goToSlide(1, true)}

and if you want to go to the next route without having to hardcode the index:

      onPress={() =>
        refSlider.current.goToSlide(refSlider.current.state.activeIndex + 1)
      }