react-native-slider-intro
TypeScript icon, indicating that this package has built-in type declarations

2.1.14 • Public • Published

📲 react-native-slider-intro

npm version build platform runs with Expo Go react-native-slider-intro NPM total downloads license

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

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.

Examples

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

Package Sidebar

Install

npm i react-native-slider-intro

Weekly Downloads

84

Version

2.1.14

License

MIT

Unpacked Size

191 kB

Total Files

127

Last publish

Collaborators

  • rnstudio