Skip to content
A component to handle transition between pages based on a list of ordered statuses
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
dist
src
.gitignore
CHANGELOG.md
LICENSE
README.md
index.tsx
package.json
tsconfig.json
yarn.lock

README.md

react-native-pages

npm

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

Using:

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:

pages

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.

You can’t perform that action at this time.