https://github.com/pspatel5/react-native-app-intro
A fully customizable React Native component aimed to beautify the onboarding experience.
https://github.com/pspatel5/react-native-app-intro
material-intro-screen onboarding react-native react-native-intro react-native-onboard
Last synced: 2 months ago
JSON representation
A fully customizable React Native component aimed to beautify the onboarding experience.
- Host: GitHub
- URL: https://github.com/pspatel5/react-native-app-intro
- Owner: PSPatel5
- License: mit
- Created: 2021-06-04T11:10:35.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-10T06:15:56.000Z (about 5 years ago)
- Last Synced: 2025-04-27T18:06:55.924Z (about 1 year ago)
- Topics: material-intro-screen, onboarding, react-native, react-native-intro, react-native-onboard
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@pspatel/react-native-app-intro
- Size: 13.6 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native App Intro
This project is a [React Native](https://facebook.github.io/react-native/) onboarding library that can be used to beautify user onboarding experience.
The library is completely written in typescript and highly customizable.
## Demo
| Expand | Scale Dot | Slide Dot | Slide Border |
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| 
| 
| 
| 
|
## Library Highlights
Some of the key highlights of this library is as below:
- Beautiful pagination animations.
- Custom pagination component support.
- Custom Next and Skip button component support.
- Completely written in typescript.
- Cross-platform support.
- Highly customizable.
## Properties
##### Interfaces
```typescript
// page indicator animation whlie changing screen.
type animationType =
| "sliding-border"
| "sliding-dot"
| "scaling-dot"
| "expanding";
interface renderSkipButtonProps {
activeIndex: number;
totalSlides: number;
goToSlide: (slideNumber: number) => void;
onSkipPress: () => void; // same function that you sent via BottomProps
}
interface renderNextButtonProps {
activeIndex: number;
totalSlides: number;
goToSlide: (slideNumber: number) => void;
isLastPage: boolean;
onNextPress: (activeIndex: number, nextIndex: number) => void; // same function that you sent via BottomProps
}
// Bottom Button Props
interface BottomProps {
showSkipButton?: boolean;
skipButtonText?: string;
nextButtonText?: string;
skipTextStyle?: StyleProp;
nextTextStyle?: StyleProp;
skipContainerStyle?: StyleProp;
nextContainerStyle?: StyleProp;
bottomContainerStyle?: StyleProp;
onSkipPress?: () => void;
onNextPress?: (activeIndex: number, nextIndex: number) => void;
onDonePress?: () => void;
renderSkipButton?: (props: renderSkipButtonProps) => ReactNode; // To render custom Skip button. Refer RenderSkipButtonProps Interface above for further details.
renderNextButton?: (props: renderNextButtonProps) => ReactNode; // To render custom Next button. Refer RenderNextButtonProps Interface above for further details.
}
// Pagination component props
interface PaginationProps {
activeDotColor?: string;
inactiveDotColor?: string;
dotSize?: number;
dotSpacing?: number;
animationType?: animationType;
dotStyle?: StyleProp;
containerStyle?: StyleProp;
activeDotStyle?: StyleProp;
}
// Page Component Props
interface PageProps {
title: string;
image: ImageSourcePropType;
description?: string;
containerStyle?: StyleProp;
titleStyle?: StyleProp;
imageStyle?: StyleProp;
descriptionStyle?: StyleProp;
}
```
| Property Name | Expected Type | Default Value | Required |
| :--------------: | :------------------------------------------------------------------------------------: | :-----------: | :------: |
| showPagination | boolean | false | - |
| paginationProps | [Pagination Props](https://github.com/Parth-coditas/react-native-app-intro#interfaces) | undefined | - |
| buttonProps | [Bottom Props](https://github.com/Parth-coditas/react-native-app-intro#interfaces) | undefined | - |
| renderPagination | ( activeIndex:number , totalSlides:number ) => ReactNode | undefined | - |
| onSlideChange | (currentIndex: number, prevIndex: number) => void | undefined | - |
## Start
To add this library, simply run :
```bash
$ npm install @pspatel/react-native-app-intro
```
or
```bash
$ yarn add @pspatel/react-native-app-intro
```
## Usage
```javascript
import React from "react";
import { View, Text } from "react-native";
import { IntroSlider } from "@pspatel/react-native-app-intro";
const Screen = ({ title }) => {
return (
{title}
);
};
const App = () => {
return (
);
};
```