yarn add react-native-slider-intro

or

npm install react-native-slider-intro --save

iOS

yarn example ios

Android

yarn example android

import React from 'react';
import SliderIntro from 'react-native-slider-intro';

const slides = [
  {
    index: 1,
    title: 'First step',
    text: 'Simple description.',
    link: 'https://pccontroller.rnstudio.hu',
    image: require('./images/step1.png'),
    backgroundColor: '#febe29',
  },
  {
    index: 2,
    title: 'Second step',
    text: 'Simple description for the second step.',
    image: require('./images/step2.png'),
    backgroundColor: '#febe29',
  },
];

const BasicExample = ({ closeExample }: { closeExample: () => void }) => {
  return (
    <SliderIntro data={slides} onDone={closeExample} onSkip={closeExample} />
  );
};

export default BasicExample;

The package includes two render options. Besides the default render when you can pass data as an array of ISliderIntroItem props, you can use a custom render with children and numberOfSlides properties.

| Name | Type | Default value | Description | | ---------------------------- | -------- | ------------------------------------- | -------------------------------------------------------------------------------------------- | | data | array | [] | Default render - array of items. Children will be ignored if data is passed. | | numberOfSlides | array | number | Custom render - if children is passed, data will be ignored. numberOfSlides is required in this case. | | children | ReactNode| null | Custom render - JSX elements to render. | | navigationBarBottom | number | 0 | Custom value of dot navigation container bottom position | | navigationBarHeight | number | 70 | Height of dot navigation container | | animateSlideSpeed | number | 15 | Speed of slider animation | | navContainerMaxSizePercent | number | 0.5 | Percent value of navigation container's width | | dotWidth | number | 12 | The radius of the 'dot' circle of navigation | | fixDotOpacity | number | 0.35 | Each dots opacity which don't have animation | | fixDotBackgroundColor | color| grey | Each dots background which don't have an animation | | animatedDotBackgroundColor | color| white | Each dots background which have an animation | | animateDotSpeed | number | 8 | Speed of dot animation | | animateDotBouncing | number | 2 | The 'bounciness' value of all animations. https://reactnative.dev/docs/animated#spring | | hasReactNavigation | boolean | false | There is a trouble with backButton behaviour when you're using react-navigation. You should use useFocusEffect in this case for reach the expected behaviour. More info: https://reactnavigation.org/docs/custom-android-back-button-handling/#why-not-use-component-lifecycle-methods | | useCustomBackHandlerEffect | function | none | As I mentioned above, sometimes we should rewrite the basic backHandler behaviour. This property will be a custom hook. See the example for more info: React navigation custom hook example| | backHandlerBehaviour | string | activeMinusOne | This prop can controls the backButton behaviour. The value should be activeMinusOne or previous| | skipLabel | string | Skip | Custom label of skip button | | nextLabel | string | Next | Custom label of next button | | doneLabel | string | Done | Custom label of done button | | renderSkipButton | function | Default skip/previous button renderer | Use to supply your own skip/previous button | | renderNextButton | function | Default next button renderer | Use to supply your own next button | | renderDoneButton | function | Default done button renderer | Use to supply your own done button | | onDone | function | none | Behaviour of done button | | onSkip | function | none | Behaviour of skip button | | showLeftButton | boolean | true | Show skip or previous button on the left side | | leftButtonType | string | skip | The button type on the left side should be skip or previous | | columnButtonStyle | boolean | false | Buttons will show up in a column | | showStatusBar | boolean | false | Show status bar on top of screen. You can make your own status bar outside of this component | | statusBarColor | color| #febe29 | Background color of status bar | | renderStatusBar | function | Default status bar renderer | Use to supply your own status bar component | | limitToSlide | number | (Device max width) * 0.35 | Use to change the limit of the slide animation. It is calculated based on the PanResponder's gestureState.dx property. For example, your device's width: 400px, the limit is 400 * 0.35 = 140px, so you need to swipe at least 140px to left or right to reach the next slide in the row.

TouchableOpacity onPress function: I've created a new issue on official react-native repository, because TouchableOpacity, Button and Pressable don't working inside PanResponder with react-navigation NavigationContainer. My solution: Import TouchableWithoutFeedback from react-native-gesture-handler instead of react-native and use onPressIn instead of onPress function then overwrite the renderItem function.

See the contributing guide to learn how to contribute to the repository and the development workflow.

MIT