@eccocar/wizard-component NPM

Eccocar - Wizard Component

React native component for wizard.

Install

Install @eccocar/wizard-component package and save into package.json:

NPM

$ npm install @eccocar/wizard-component --save

Yarn

$ yarn add @eccocar/wizard-component

How to use?

import React from 'react'
import Wizard from '@eccocar/wizard-component'

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 Wizard Component',
        title: 'Welcome',
      }, {
        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 (
      <Wizard
        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.3.1 (Changelog)

eccocar react native components base onboarding welcome introduction intro wizard

@ticmakers-react-native/button @ticmakers-react-native/core @ticmakers-react-native/icon @ticmakers-react-native/image tinycolor2

@infinitebrahmanuniverse/nolb-_ecc @everything-registry/sub-chunk-274

1.3.1

2 years ago

1.3.0

2 years ago