Neologistic Paraphasic Mumbling

    @ticmakers-react-native/onboarding

    1.2.1 • Public • Published

    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)

    Install

    npm i @ticmakers-react-native/onboarding

    DownloadsWeekly Downloads

    1

    Version

    1.2.1

    License

    BSD-3-Clause

    Unpacked Size

    2.91 MB

    Total Files

    170

    Last publish

    Collaborators

    • ticmakers