react-native-pages

A component to handle transition between pages based on a list of ordered statuses

Using:

• react-move for animations

Installation

npm install --save @fnzc/react-native-pages

or

yarn add @fnzc/react-native-pages

Demo

Here is how it can look like with a login/register flow example:

Usage

Basic usage requires you to provide:

• a currentStatus representing the current page
• pages, an array of page
• an array of statuses ordered

The pages will use the statuses ordered in the provided array to transition from left to right or right to left

NOTE: A page contains:

{
  associatedStatus: string,
  component: JSX.Element,
  style?: StypeProp<ViewStyle>
}

Example usage:

import Pages from '@fnzc/react-native-pages'

const orderedStatuses = ['email', 'login', 'password', 'finished', 'confirmed', 'loading']

createPages = (): Page[] => {
  return [
    {
      component: this.createPage(...),
      associatedStatus: 'email'
    },
    {
      component: this.createPage(...),
      associatedStatus: 'password' 
    },
    ...
  ]
}

<PagesComponent
  currentStatus={this.props.status}
  orderedStatuses={orderedStatuses}
  pages={this.createPages()}/>

Options

| Key | Description | Default | Required | Type | |---|---|---|---|---| |currentStatus|Name of the status associated to the current page|None|true|string| |pages|The array of pages that have to be displayedPage|None|true|Page[]| |orderedStatuses|The array of ordered statuses use to transition the pages|None|true|any[]| |translateEnterDuration|The duration of the enter transition|400|false|number| |translateEnterFunction|The easing function of the enter transition|easeQuadInOut|false|(normalizedTime: number) => number| |translateEnterPosition|The position of the page on the enter transition|0|false|number| |translateEndForwardPosition|The position of the page at the end of a forward transition|-Dimensions.get('window').width|false|number| |translateEndBackwardPosition|The position of the page at the end of a backward transition|Dimensions.get('window').width|false|number| |translateLeaveDuration|The duration of the enter transition|400|false|number| |translateLeaveFunction|The easing function of the enter transition|easeQuadInOut|false|(normalizedTime: number) => number| |translateStartForwardPosition|The position of the page at the start of a forward transition|Dimensions.get('window').width|false|number| |translateStartBackwardPosition|The position of the page at the start of a backward transition|-Dimensions.get('window').width|false|number|

Contributing

Pull requests are welcome.