├── .eslintrc.js ├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── demo ├── demo.gif ├── simple1.png ├── simple2.png └── simple3.png ├── examples ├── CustomButtons.js ├── Eula.js ├── Simple.js ├── WithCTA.js └── images │ ├── circle.png │ ├── square.png │ └── triangle.png ├── package-lock.json ├── package.json └── src ├── Dot.js ├── Dots.js ├── Page.js ├── Pagination.js ├── buttons ├── DoneButton.js ├── NextButton.js ├── SkipButton.js ├── SymbolButton.js ├── TextButton.js └── util.js └── index.js /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: 'babel-eslint', 3 | extends: ['airbnb', 'prettier'], 4 | plugins: ['react', 'react-native', 'jsx-a11y', 'import', 'prettier'], 5 | parserOptions: { 6 | ecmaVersion: 6, 7 | ecmaFeatures: { 8 | jsx: true, 9 | }, 10 | sourceType: 'module', 11 | }, 12 | rules: { 13 | 'react/jsx-filename-extension': 'off', 14 | 'no-underscore-dangle': 'off', 15 | 'arrow-body-style': 'off', 16 | 'react/jsx-wrap-multilines': 'off', 17 | 'jsx-a11y/href-no-hash': 'off', 18 | 'global-require': 'off', 19 | 'prettier/prettier': [ 20 | 'error', 21 | { 22 | singleQuote: true, 23 | trailingComma: 'es5', 24 | }, 25 | ], 26 | }, 27 | globals: { 28 | fetch: false, 29 | require: false, 30 | __DEV__: false, 31 | }, 32 | }; 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | yarn-error.log 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | *.keystore 43 | 44 | # fastlane 45 | # 46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 47 | # screenshots whenever they are needed. 48 | # For more information about the recommended setup visit: 49 | # https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md 50 | 51 | fastlane/report.xml 52 | fastlane/Preview.html 53 | fastlane/screenshots -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | demo 2 | examples 3 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 1.1.1 (April 15, 2020) 2 | 3 | * fix RTL 4 | * use `useNativeDrive` for RN v0.62+ 5 | 6 | ## 1.1.0 (May 01, 2019) 7 | 8 | * add more props for special cases 9 | 10 | ## 1.0.0 (January 04, 2019) 11 | 12 | * stable release (no changes) 13 | 14 | ## 0.10.0 (November 25, 2018) 15 | 16 | * override default pages styles 17 | 18 | ## 0.9.0 (October 29, 2018) 19 | 20 | * add `pageIndexCallback` to get the page index on change 21 | 22 | ## 0.8.0 (October 21, 2018) 23 | 24 | * add props for title's styles 25 | * fix font scaling for symbol buttons 26 | 27 | ## 0.7.0 (July 27, 2018) 28 | 29 | * add some more props and re-work how the statusbar color gets reset to default 30 | 31 | ## 0.6.0 (April 08, 2018) 32 | 33 | * iPhone X support (thanks to @nbolender) 34 | * new props: `flatlistProps` and `controlStatusBar` 35 | * fade-in animation for `Done` button 36 | 37 | ## 0.5.0 (March 24, 2018) 38 | 39 | * allow customization of image container styles 40 | * fix several propTypes warnings 41 | 42 | ## 0.4.0 (February 23, 2018) 43 | 44 | * Listen to orientation changes and adjust content appropiatly 45 | * Add animations between page chagnes 46 | * Make buttons, dots etc. adjustable via a wide range of different props 47 | * Change next arrow to text button `next`. 48 | 49 | ## 0.3.0 (October 18, 2017) 50 | 51 | * Increase touchable Radius for Buttons 52 | 53 | ## 0.2.0 (October 16, 2017) 54 | 55 | * Change name to `react-native-onboarding-swiper` 56 | * Change from ScrollView to FlatList 57 | * Add `skipLabel` prop 58 | * Title and subtitle can be components 59 | * Change `onEnd` to `onSkip` and `onDone` 60 | * Remove check mark dot because it's not useful 61 | * Adapt StatusBar color 62 | * Refactor most of the internal components 63 | 64 | ## 0.1.1 (October 11, 2016) 65 | 66 | * Detect light background and adapt the text and controls to it. 67 | * Allow to disable the bottom bar overlay via the `bottomOverlay` prop. 68 | * Allow to disable either of the skip, next, or done buttons. 69 | 70 | ## 0.1.0 (October 10, 2016) 71 | 72 | Initial release. 73 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright for portions of react-native-onboarding-swiper are held by 4 | Gosha Arinich, 2016 as part of react-native-simple-onboarding. 5 | All other copyright for react-native-onboarding-swiper are held by 6 | Johannes Filter, 2017. 7 | 8 | Permission is hereby granted, free of charge, to any person obtaining a copy 9 | of this software and associated documentation files (the "Software"), to deal 10 | in the Software without restriction, including without limitation the rights 11 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | copies of the Software, and to permit persons to whom the Software is 13 | furnished to do so, subject to the following conditions: 14 | 15 | The above copyright notice and this permission notice shall be included in all 16 | copies or substantial portions of the Software. 17 | 18 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 19 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 20 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 21 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 22 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 23 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 24 | SOFTWARE. 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `` [![npm](https://img.shields.io/npm/v/react-native-onboarding-swiper.svg)](https://www.npmjs.com/package/react-native-onboarding-swiper) [![npm](https://img.shields.io/npm/dm/react-native-onboarding-swiper.svg)](https://www.npmjs.com/package/react-native-onboarding-swiper) 2 | 3 | | ![](demo/simple1.png) | ![](demo/simple2.png) | ![](demo/demo.gif) | 4 | | --------------------- | --------------------- | ------------------ | 5 | 6 | 7 | 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**: 8 | `react-native-onboarding-swiper`. 9 | 10 | 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. 11 | 12 | Getting everything running merely takes a minute. Try out the example [running in your browser](https://snack.expo.io/dlQTGD06P). Or check out this [tutorial on YouTube](https://www.youtube.com/watch?v=SMkR-iIGvwQ). 13 | 14 | ## Install 15 | 16 | ```bash 17 | npm i react-native-onboarding-swiper 18 | ``` 19 | 20 | ```bash 21 | yarn add react-native-onboarding-swiper 22 | ``` 23 | 24 | ## Usage 25 | 26 | ```js 27 | import Onboarding from 'react-native-onboarding-swiper'; 28 | 29 | , 34 | title: 'Onboarding', 35 | subtitle: 'Done with React Native Onboarding Swiper', 36 | }, 37 | ... 38 | ]} 39 | /> 40 | ``` 41 | 42 | ## Examples 43 | 44 | Check out the three examples files: the [simple example](examples/Simple.js), the [example with a Call-to-Action button](examples/WithCTA.js) or the [example with custom button components](examples/CustomButtons.js). 45 | 46 | ## Required Properties 47 | 48 | * `pages` (required): an array of pages in the following shape: 49 | * `backgroundColor` (required): a background color. The color of the font and dots adapts to the background color. 50 | * `image` (required): a component (e.g. ``) to display at the top of the page. 51 | * `title` (required): a string **OR** a React-Native component. 52 | * `subtitle` (required): a string **OR** a React-Native component. 53 | 54 | ## Optional Properties 55 | 56 | ### Buttons 57 | 58 | * `nextLabel` (optional): a string **OR** a React-Native component for the Next label. Defaults to `Next`. 59 | * `showNext` (optional): a bool flag indicating whether the Next button is visible. Defaults to `true`. 60 | * `skipLabel` (optional): a string **OR** a React-Native component for the Skip label. Defaults to `Skip`. 61 | * `showSkip` (optional): a bool flag indicating whether the Skip button is visible. Defaults to `true`. 62 | * `onSkip` (optional): a callback that is fired if the Onboarding is skipped. 63 | * `skipToPage` (optional): when pressing skip, go to that page (e.g. `skipToPage={2}`). If this prop is provided, ignores `onSkip`. 64 | * `onDone` (optional): a callback that is fired after the Onboarding is completed. 65 | * `showDone` (optional): a bool flag indicating whether the Done checkmark button is visible. Defaults to `true`. 66 | 67 | ### General 68 | 69 | * `bottomBarHeight` (optional): a number for the height of the bottom bar. Defaults to `60`. 70 | * `bottomBarColor` (optional): backgroundColor of the bottom bar. Defaults to `transparent`. 71 | * `bottomBarHighlight` (optional): a bool flag indicating whether the bottom bar should be highlighted. Defaults to `true`. 72 | * `controlStatusBar` (optional): a bool flag indicating whether the status bar should change with the background color. Defaults to `true`. 73 | * `showPagination` (optional): whether to show the bottom pagination bar. Defaults to `true`. 74 | * `flatlistProps` (optional): additional props for the [FlatList](https://facebook.github.io/react-native/docs/flatlist.html) which holds all the pages. 75 | * `transitionAnimationDuration` (optional): The duration in milliseconds for the animation of the background color for the page transition. Defaults to `500`. 76 | * `allowFontScalingText` (optional): Font scaling can cause troubles with high-resolution screens. You may want to disable it. Defaults to `true`. 77 | * `allowFontScalingButtons` (optional): Font scaling can cause troubles with high-resolution screens. You may want to disable it. Defaults to `true`. 78 | * `pageIndexCallback` (optional): a function that receives the page `index` as a parameter on page change. [Example Usage](https://github.com/jfilter/react-native-onboarding-swiper/pull/40) 79 | 80 | ### Default Page Styles 81 | 82 | For the pages in the `pages` array, you can set the default styles (and override the styles set by this component). 83 | 84 | * `containerStyles` (optional): override the default container styles. 85 | * `imageContainerStyles` (optional): override the default image container styles e.g. the `paddingBottom` of 60. 86 | * `titleStyles` (optional): override the default title styles. 87 | * `subTitleStyles` (optional): override the default subtitle styles. 88 | 89 | ### Adjust Individual Page Styles 90 | 91 | For each page in the `pages` array, you can override the default page styles. [An example](examples/CustomButtons.js). 92 | 93 | * `titleStyles` (optional): modify styles of a specific page's title. 94 | * `subTitleStyles` (optional): modify styles of a specific page's subtitle. 95 | 96 | ## Custom Components Properties 97 | 98 | 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](examples/CustomButtons.js). 99 | 100 | * `SkipButtonComponent` (optional): Skip Button, gets `skipLabel` as prop. 101 | * `NextButtonComponent` (optional): Next Button, gets `nextLabel` as prop. 102 | * `DoneButtonComponent` (optional): Done Button. 103 | * `DotComponent` (optional): Dot for the pagination, gets `selected` as prop to indicate the active page. 104 | 105 | ## Controlling the pages imperatively 106 | 107 | You can control the Onboarding component imperatively with [useRef](https://reactjs.org/docs/hooks-reference.html#useref). 108 | 109 | ```js 110 | const onboardingRef = useRef(null); 111 | 112 | 116 | 117 | onboardingRef.current.goNext() 118 | onboardingRef.current.goToPage(2, true) 119 | onboardingRef.current.goToPage(2, false) 120 | ``` 121 | 122 | Methods: 123 | 124 | * `goNext()` : Go to the next page. 125 | * `goToPage(pageIndex, animated)` : Go to the selected page. 126 | 127 | ## Contributing 128 | 129 | If you have a **question**, found a **bug** or want to propose a new **feature**, have a look at the [issues page](https://github.com/jfilter/react-native-onboarding-swiper/issues). 130 | 131 | **Pull requests** are especially welcomed when they fix bugs or improve the code quality. 132 | 133 | ## Related Work 134 | 135 | * https://github.com/jacse/react-native-app-intro-slider 136 | * https://github.com/gorhom/react-native-paper-onboarding 137 | 138 | ## Acknowledgements 139 | 140 | Built upon the work by [Gosha Arinich](https://github.com/goshakkk/react-native-simple-onboarding) which was originally inspired by [AndroidOnboarder](https://github.com/chyrta/AndroidOnboarder). 141 | 142 | ## License 143 | 144 | MIT. 145 | -------------------------------------------------------------------------------- /demo/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfilter/react-native-onboarding-swiper/d90f44d6d64d07bf10c92fce4abdd1b72f62bcac/demo/demo.gif -------------------------------------------------------------------------------- /demo/simple1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfilter/react-native-onboarding-swiper/d90f44d6d64d07bf10c92fce4abdd1b72f62bcac/demo/simple1.png -------------------------------------------------------------------------------- /demo/simple2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfilter/react-native-onboarding-swiper/d90f44d6d64d07bf10c92fce4abdd1b72f62bcac/demo/simple2.png -------------------------------------------------------------------------------- /demo/simple3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jfilter/react-native-onboarding-swiper/d90f44d6d64d07bf10c92fce4abdd1b72f62bcac/demo/simple3.png -------------------------------------------------------------------------------- /examples/CustomButtons.js: -------------------------------------------------------------------------------- 1 | import { Image, View } from 'react-native'; 2 | import React from 'react'; 3 | import { Button } from 'react-native-elements'; 4 | 5 | import Onboarding from 'react-native-onboarding-swiper'; 6 | 7 | const Square = ({ isLight, selected }) => { 8 | let backgroundColor; 9 | if (isLight) { 10 | backgroundColor = selected ? 'rgba(0, 0, 0, 0.8)' : 'rgba(0, 0, 0, 0.3)'; 11 | } else { 12 | backgroundColor = selected ? '#fff' : 'rgba(255, 255, 255, 0.5)'; 13 | } 14 | return ( 15 | 23 | ); 24 | }; 25 | 26 | const backgroundColor = isLight => (isLight ? 'blue' : 'lightblue'); 27 | const color = isLight => backgroundColor(!isLight); 28 | 29 | const Done = ({ isLight, ...props }) => ( 30 | 60 | ); 61 | 62 | const Next = ({ isLight, ...props }) => ( 63 | 56 | ); 57 | 58 | const Next = ({ isLight, ...props }) => ( 59 |