Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork54
Paper Onboarding is a material design UI slider for `React Native`.
License
gorhom/react-native-paper-onboarding
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Paper Onboarding is a material design UI slider forReact Native inspired byRamotion Paper Onboarding.
yarn add @gorhom/paper-onboarding# ornpm install @gorhom/paper-onboardingAlso, you need to installreact-native-reanimated,react-native-gesture-handler &react-native-svg, and follow their installation instructions.
importPaperOnboarding,{PaperOnboardingItemType}from"@gorhom/paper-onboarding";constdata:PaperOnboardingItemType[]=[{title:'Hotels',description:'All hotels and hostels are sorted by hospitality rating',backgroundColor:'#698FB8',image:/* IMAGE COMPONENT */,icon:/* ICON COMPONENT */,content:/* CUSTOM COMPONENT */,},{title:'Banks',description:'We carefully verify all banks before add them into the app',backgroundColor:'#6CB2B8',image:/* IMAGE COMPONENT */,icon:/* ICON COMPONENT */,content:/* CUSTOM COMPONENT */,},{title:'Stores',description:'All local stores are categorized for your convenience',backgroundColor:'#9D8FBF',image:/* IMAGE COMPONENT */,icon:/* ICON COMPONENT */,content:/* CUSTOM COMPONENT */,},];constScreen=()=>{consthandleOnClosePress=()=>console.log('navigate to other screen')return(<PaperOnboardingdata={data}onCloseButtonPress={handleOnClosePress}/>)}
| name | description | required | type | default |
|---|---|---|---|---|
| data | Array of pages/slides to present. | YES | Array<PaperOnboardingItemType> | |
| safeInsets | Safe area insets usually come fromreact-native-safe-area-context. | NO | Insets | {top: 50, bottom: 50, left: 50, right: 50} |
| direction | Pan gesture direction. | NO | 'horizontal' | 'vertical' | horizontal |
| indicatorSize | Indicator size (width and height). | NO | number | 40 |
| indicatorBackgroundColor | Indicator background color. | NO | string | white |
| indicatorBorderColor | Indicator border color. | NO | string | white |
| titleStyle | Text style to overrideall page/slide title style. | NO | StyleProp | |
| descriptionStyle | Text style to overrideall page/slide description style. | NO | StyleProp | |
| closeButton | Custom component to be used instead of the default close button. | NO | (() => React.ReactNode) | React.ReactNode | |
| closeButtonText | Close button text. | NO | string | close |
| closeButtonTextStyle | Close button text style. | NO | StyleProp | |
| onCloseButtonPress | Callback on close button pressed. | NO | () => void | |
| onIndexChange | Callback when index change. | NO | () => void |
| name | description | required | type |
|---|---|---|---|
| content | Slide/page content, this will replace default content. | NO | ((props:PageContentProps) => React.ReactNode) | React.ReactNode |
| image | Image cover. | NO | (() => React.ReactNode) | React.ReactNode |
| icon | Indicator icon. | NO | (() => React.ReactNode) | React.ReactNode |
| backgroundColor | Background color. | YES | string |
| title | Title text. | NO | string |
| description | Description text. | NO | string |
| titleStyle | Text style to override page/slide title default style. | NO | StyleProp |
| descriptionStyle | Text style to override page/slide description default style. | NO | StyleProp |
| showCloseButton | Show close button when page/slide is active,note: last page will always show close button. | NO | boolean |
| name | description | type |
|---|---|---|
| next | Navigate to next page. | () => void |
| previous | Navigate to previous page. | () => void |
To keep this library maintained and up-to-date please considersponsoring it on GitHub. Or if you are looking for a private support or help in customizing the experience, then reach out to me on Twitter@gorhom.
- react-native-gesture-handler
- react-native-reanimated
- react-native-redash
- react-native-svg
- @react-native-community/bob
About
Paper Onboarding is a material design UI slider for `React Native`.
Topics
Resources
License
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.