A simple and full customizable React Native package which implements a unique slider.

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.

• Basic example
• Column buttons example
• Custom buttons example
• Previous button example
• Status bar example
• Custom slider render function example
• React navigation custom hook example (CANNOT BE RUN, the file includes more information how you can test it.)
• Another example for customize the package with third party libraries.

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