All Projects β†’ jfilter β†’ React Native Onboarding Swiper

jfilter / React Native Onboarding Swiper

Licence: other
πŸ›³ Delightful onboarding for your React-Native app

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Onboarding Swiper

Androidonboarder
A simple way to make a beauty onboarding experience (app intro or welcome screen) for your users.
Stars: ✭ 269 (-54.87%)
Mutual labels:  introduction, intro, onboarding
Pvview
A small library that helps you to make an amazing parallax view
Stars: ✭ 227 (-61.91%)
Mutual labels:  tutorial, introduction, onboarding
Showcaseview
πŸ”¦The ShowcaseView library is designed to highlight and showcase specific parts of apps to the user with an attractive and flat overlay.
Stars: ✭ 281 (-52.85%)
Mutual labels:  introduction, intro, onboarding
Material Onboarding
A simple library which allows easy replication of several* app onboarding techniques.
Stars: ✭ 217 (-63.59%)
Mutual labels:  tutorial, intro, onboarding
Tutti
Tutti is a Swift library that lets you create tutorials, hints and onboarding experiences.
Stars: ✭ 224 (-62.42%)
Mutual labels:  tutorial, onboarding
Rakuguide
The Raku Guide
Stars: ✭ 155 (-73.99%)
Mutual labels:  tutorial, introduction
Wasm By Example
Wasm By Example is a website with a set of hands-on introduction examples and tutorials for WebAssembly (Wasm)
Stars: ✭ 226 (-62.08%)
Mutual labels:  tutorial, introduction
VSpot
A nice focus view intro for your app. Focus a specific view on first time launch
Stars: ✭ 27 (-95.47%)
Mutual labels:  introduction, intro
react-native-slider-intro
A simple and fully customizable React Native component that implements an intro slider for your app
Stars: ✭ 80 (-86.58%)
Mutual labels:  slider, intro
Android-Onboarder
Android Onboarder is a simple and lightweight library that helps you to create cool and beautiful introduction screens for your apps without writing dozens of lines of code.
Stars: ✭ 85 (-85.74%)
Mutual labels:  onboarding, introduction
React Native App Intro
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
Stars: ✭ 3,169 (+431.71%)
Mutual labels:  introduction, intro
Core
D Language online tour (https://tour.dlang.org/) and online editor (https://run.dlang.io/)
Stars: ✭ 89 (-85.07%)
Mutual labels:  tutorial, introduction
Showcaseview
This ShowcaseView library can be used to showcase any specific part of the UI or can even be used during OnBoarding of a user to give a short intro about different widgets visible on the screen.
Stars: ✭ 69 (-88.42%)
Mutual labels:  tutorial, onboarding
Pvonboardkit
Add your own walkthrough/intro/tutorial into the app
Stars: ✭ 51 (-91.44%)
Mutual labels:  tutorial, intro
React Native Paper Onboarding
Paper Onboarding is a material design UI slider for `React Native`.
Stars: ✭ 310 (-47.99%)
Mutual labels:  slider, onboarding
Ahoy Onboarding
Android onboarding library.
Stars: ✭ 951 (+59.56%)
Mutual labels:  tutorial, onboarding
Reactour
Tourist Guide into your React Components
Stars: ✭ 2,782 (+366.78%)
Mutual labels:  introduction, intro
Trip.js
πŸš€ Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.
Stars: ✭ 789 (+32.38%)
Mutual labels:  tutorial, onboarding
RN-intro-screen
Usage of intro / welcome screen in react-native as onboarding slider swiper
Stars: ✭ 15 (-97.48%)
Mutual labels:  slider, onboarding
Bubbleshowcase Android
BubbleShowCase is a framework that let you to use informative bubbles to help your users pointing out different App features.
Stars: ✭ 313 (-47.48%)
Mutual labels:  tutorial, intro

<Onboarding /> npm npm

There are many ways to onboard people to your mobile app. But for React-Native, there is solely one component that is a) easy to setup and b) highly customizable: react-native-onboarding-swiper.

Your new users shouldn't jump in at the deep end. First give them a pleasurable, delightful introduction and only then let them explore your awesome app.

Getting everything running merely takes a minute. Try out the example running in your browser.

Install

npm i react-native-onboarding-swiper
import Onboarding from 'react-native-onboarding-swiper';

Usage

<Onboarding
  pages={[
    {
      backgroundColor: '#fff',
      image: <Image source={require('./images/circle.png')} />,
      title: 'Onboarding',
      subtitle: 'Done with React Native Onboarding Swiper',
    },
    ...
  ]}
/>

Examples

Check out the three examples files: the simple example, the example with a Call-to-Action button or the example with custom button components.

Required Properties

  • pages (required): an array of pages in the following shape:
    • backgroundColor (required): a background color. The color of the font and dots adapts to the background color.
    • image (required): a component (e.g. <Image />) to display at the top of the page.
    • title (required): a string OR a React-Native component.
    • subtitle (required): a string OR a React-Native component.

Optional Properties

Buttons

  • nextLabel (optional): a string OR a React-Native component for the Next label. Defaults to Next.
  • showNext (optional): a bool flag indicating whether the Next button is visible. Defaults to true.
  • skipLabel (optional): a string OR a React-Native component for the Skip label. Defaults to Skip.
  • showSkip (optional): a bool flag indicating whether the Skip button is visible. Defaults to true.
  • onSkip (optional): a callback that is fired if the Onboarding is skipped.
  • skipToPage (optional): when pressing skip, go to that page (e.g. skipToPage={2}). If this prop is provided, ignores onSkip.
  • onDone (optional): a callback that is fired after the Onboarding is completed.
  • showDone (optional): a bool flag indicating whether the Done checkmark button is visible. Defaults to true.

General

  • bottomBarHeight (optional): a number for the height of the bottom bar. Defaults to 60.
  • bottomBarColor (optional): backgroundColor of the bottom bar. Defaults to transparent.
  • bottomBarHighlight (optional): a bool flag indicating whether the bottom bar should be highlighted. Defaults to true.
  • controlStatusBar (optional): a bool flag indicating whether the status bar should change with the background color. Defaults to true.
  • showPagination (optional): whether to show the bottom pagination bar. Defaults to true.
  • flatlistProps (optional): additional props for the FlatList which holds all the pages.
  • transitionAnimationDuration (optional): The duration in milliseconds for the animation of the background color for the page transition. Defaults to 500.
  • allowFontScalingText (optional): Font scaling can cause troubles with high-resolution screens. You may want to disable it. Defaults to true.
  • allowFontScalingButtons (optional): Font scaling can cause troubles with high-resolution screens. You may want to disable it. Defaults to true.
  • pageIndexCallback (optional): a function that receives the page index as a parameter on page change. Example Usage

Default Page Styles

For the pages in the pages array, you can set the default styles (and override the styles set by this component).

  • containerStyles (optional): override the default container styles.
  • imageContainerStyles (optional): override the default image container styles e.g. the paddingBottom of 60.
  • titleStyles (optional): override the default title styles.
  • subTitleStyles (optional): override the default subtitle styles.

Adjust Individual Page Styles

For each page in the pages array, you can override the default page styles. An example.

  • titleStyles (optional): modify styles of a specific page's title.
  • subTitleStyles (optional): modify styles of a specific page's subtitle.

Custom Components Properties

You can also provide your own custom components for the buttons and the dots. All of them have access to a isLight prop but it's up to you what you do with it. Also checkout this example.

  • SkipButtonComponent (optional): Skip Button, gets skipLabel as prop.
  • NextButtonComponent (optional): Next Button, gets nextLabel as prop.
  • DoneButtonComponent (optional): Done Button.
  • DotComponent (optional): Dot for the pagination, gets selected as prop to indicate the active page.

Contributing

If you have a question, found a bug or want to propose a new feature, have a look at the issues page.

Pull requests are especially welcomed when they fix bugs or improve the code quality.

Related

Acknowledgements

Built upon the work by Gosha Arinich which was originally inspired by AndroidOnboarder.

License

MIT.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].