Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-native-slider-intro
Advanced tools
Readme
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.
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 |
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
FAQs
A simple and full customizable React Native package which implements a unique slider.
The npm package react-native-slider-intro receives a total of 122 weekly downloads. As such, react-native-slider-intro popularity was classified as not popular.
We found that react-native-slider-intro demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.