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)