@fnzc/react-native-pages NPM

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

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.

react-native pages rules transition

d3-ease lodash react-move

@everything-registry/sub-chunk-332 @zalastax/nolb-_fn

1.0.0

5 years ago