📲 react-native-slider-intro

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

Installation

yarn add react-native-slider-intro

or

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

Running the example project

iOS

yarn example ios

Android

yarn example android

Usage

Basic example

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 SliderIntroItemProps props, you can use a custom render with children and numberOfSlides properties.

Properties

Examples

• 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.

Troubleshooting

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.

Contributing

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

License

MIT