TIC Makers - React Native Onboarding

React native component for onboarding.

Powered by TIC Makers

Demo

Onboarding Expo's snack

Install

Install @ticmakers-react-native/onboarding package and save into package.json:

NPM

$ npm install @ticmakers-react-native/onboarding --save

Yarn

$ yarn add @ticmakers-react-native/onboarding

How to use?

import React from 'react'
import Onboarding from '@ticmakers-react-native/onboarding'

export default class App extends React.Component {

  render() {

    // Define the pages, it will be displayed in order
    let pages = [
      {
        backgroundColor: '#fff',
        image: <Image source={ require('assets/circle.png') } />,
        subtitle: 'Done with React Native Onboarding Swiper',
        title: 'Onboarding',
      }, {
        backgroundColor: '#fe6e58',
        image: <Image source={ require('assets/square.png') } />,
        subtitle: 'This is the subtitle that sumplements the title.',
        title: 'The Title',
      }, {
        backgroundColor: '#999',
        image: <Image source={ require('assets/triangle.png') } />,
        subtitle: 'Beautiful, isn\'t it?',
        title: 'Triangle',
      }
    ]

    return (
      <Onboarding
        pages={ pages }
        onDone={ () => this.props.navigation.navigate('RouteName') }
      />
    )
  }
}

Properties

Name	Type	Default Value	Definition
bottomBarHeight (optional)	number	60	A number for the height of the bottom bar
bottomBarHighlight (optional)	boolean	true	A bool flag indicating whether the bottom bar should be highlighted
containerStyles (optional)	object { ...styles }	-	Override the default container styles
controlStatusBar (optional)	boolean	true	A bool flag indicating whether the status bar should change with the background color
defaultPages (optional)	boolean	false	Use 3 pages generated by default
imageContainerStyles (optional)	object { ...styles }	-	Override the default image container styles
nextLabel (optional)	string / Element	Next	A string or a React-Native component for the Next label
onDone	function	-	A callback that is fired after the OnBoarding is completed
onSkip (optional)	function	-	A callback that is fired if the OnBoarding is skipped
pages	array of object { pagesProperties }	-	A array of pages to show in the component. Show below pagesProperties
pageIndexCallback (optional)	function(indexPage: number)	-	A function that receives the page index as a parameter on page change
skipLabel (optional)	string / Element	Skip	A string OR a React-Native component for the Skip label
skipToPage (optional)	number	-	When pressing skip, go to that page (ex. skipToPage={2}). If this prop is provided, ignores onSkip
subtitleStyles (optional)	object { ...styles }	-	Override the default subtitle styles
titleStyles (optional)	object { ...styles }	-	Override the default title styles
transitionAnimationDuration (optional)	number	500	The duration in milliseconds for the animation of the background color for the page transition

Pages properties

Name	Type	Default Value	Definition
backgroundColor	string(hex,rgb,etc)	-	A background color. The color of the font and dots adapts to the background color
image	Element	-	A React-Native component to display at the top of the page
title	string / Element	-	A string OR a React-Native component
titleStyles (optional)	object { ...styles }	-	Modify styles of a specific page's title
subtitle	string / Element	-	A string OR a React-Native component
subtitleStyles (optional)	object { ...styles }	-	Modify styles of a specific page's subtitle

Todo

• Test on Android & iOS
• Improve and add new features
• Add more styles
• Create tests
• Add new props and components in readme

Version 1.2.1 (Changelog)