react-native-stager

A performant wizard-like multi stages component for React Native without a router

Why?

Using a router solution to create a multi-step wizard-like interface is good, but sometimes you want to keep all your state in just one parent component without having to rely on redux for example, enter the Stager

How?

import React from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import Stager, { Stage } from 'react-native-stager'

class MyWizard extends React.Component {
  render() {
    return (
      <Stager onChange={(stage, direction) => {
        // stage == step 1 || step 2
        // direction = 1 = next | -1 = prev | 0 = reset / initial
      }}>
        <Stage key="step 1" continue={() => true}>
          {({ instance, context }) => (
            <View>
              <TouchableOpacity onPress={context.notify}>
                <Text>{'Hello'}</Text>
              </TouchableOpacity>
            </View>
          )}
        </Stage>

        <Stage key="step 2" noPrevious loaded={(cb) => this.setState({ loaded: true }, cb)}>
          {() => (
            <Text>{'World'}</Text>
          )}
        </Stage>
      </Stager>
    )
  }
}

export default MyWizard

Components and API

Stager

The root component that will hold the steps. Accepts an onChange prop that receives the transitioning stage name and the direction (-1 = prev / 1 = next / 0 = reset/initial). Can be safely nested.

<Stager onChange={(stage, direction) => {
  // do something nice
  }}>
<Stager>

Stage

Need to set inside Stager. Can use continue, noPrevious and loaded props. Notice that the children must always be a function. The key prop is required.

It receives an object with instance (this current Stage) and context (the current Stager)

<Stager>
  <Stage key="step 1">
    {({ instance, context }) => (
      <Text>{'This is step 1'}</Text>
    )}
  </Stage>
</Stager>

When using continue, you always need to signal to the Stage that it should re-evaluate the continue function, to see if you're able to continue. This is so the component doesn't re-render everytime everytime a children changes.

<Stager>
  <Stage
    key="step 1"
    continue={() => this.state.canContinue}
    >
    {({ instance, context }) => (
      <View>
        <Text>{'This is step 1'}</Text>
        <Button title="can continue" onPress={() => {
          this.setState({
            canContinue: true
          }, instance.refresh)
        }} />
      </View>
    )}
  </Stage>

  <Stage
    key="step 2"
    loaded={(cb) => this.setState({ canContinue: false }, cb)}
    continue={() => this.state.canContinue}
    >
    {({ instance, context }) => (
      <View>
        <Text>{'This is step 1'}</Text>
        <Button title="can continue" onPress={() => {
          this.setState({
            canContinue: true
          }, instance.refresh)
        }} />
      </View>
    )}
  </Stage>
</Stager>

StageButtons

StageProgress

Caveats

• Since you need to use function children, your shouldComponentUpdate might go crazy. To counter that assign a class member for your function that returns your component
• The default progress and prev / next buttons are dull, and most likely won't match your application style. For that, use StageProgress and StageButtons wherever you feel like it
• Children Stage won't automatically update (since Stage has shouldComponentUpdate to return false), so you need, on the instance, to call refresh whenever you need to update your prev / next buttons

License

MIT