Sexy 馃暫 Onboarder with Authentication and Permissions for React Native 馃
Last updated 2 years ago by jonovono .
ISCRepositoryBugsOriginal npmTarballpackage.json
$ cnpm install react-native-soap 
SYNC missed versions from official npm registry.

React Native SOAP (BETA)

Sexy Onboarder with Authentication and Permissions (and more)



The goal of this library is to provide a set of easy to use components typically found in user onboarding flows that you can customize and use make your onboarding flow look super sexy

When I was building Bunch I was looking for something like this since lots of other apps do onboarding the way we wanted but nothing seemed to exist. So I built one and want to make it open for others if they find it useful!

Build stuff like this easily:


Getting Started


yarn add react-native-soap

import Onboarder, {TextEntryScreen, BasicScreen} from 'react-native-soap'

NOTE. This repo relies on react-navigation at the moment, so you will need to link react-native-gesture-handler. I have thoughts of making it not use this library but it makes things easier for now.

yarn add react-native-gesture-handler

react-native link react-native-gesture-handler


For more detail view the example folder

If you are familular with react-navigation it operates very similar.

Create a Screen like:

const IntroScreen = BasicScreen({
  header: 'Welcome to SOAP!',
  middle: '',
  footer: 'Make simple screens like this'

Once you have your screens, hook them up to the Onboarder like so:

const OnboarderView = Onboarder({
  Initial: {
    screen: IntroScreen
}, {
  order: ['Initial'],
  animation: 'push'

And finally, render that OnboarderView in a component somewhere

export default class App extends Component {
  onEnd = (data) => {
   // this will contain any data saved

  onTransition = (from, to, data) => {
    console.log("INFO", from, to, data)

  render() {
    console.disableYellowBox = true

    if (this.state.onboarded) return this.renderAuthView()
    return (
      <OnboarderView onEnd={this.onEnd} onTransition={this.onTransition} />



  • onEnd: Called when the user finished onboarding
    • data: the data the user entered keyed by stateKeys
  • onTransition: called when user transitions from one screen to the next
    • from: the screen they were on
    • to: screen transitioning to
    • data: the data the user entered keyed by stateKeys

Also when setting up the Onboarder you can specify a few props

  • order: the order the screens should appear
  • animation: the type of animation to show when transitioning


header, middle, footer can contain a component, image url, or image and it should handle it 'intelligently'

  • backgroundStyle
  • backgroundImage
  • left
  • right
  • header
  • headerContainerStyle
  • headerStyle
  • middle
  • middleContainerStyle
  • middleStyle
  • footer
  • footerContainerStyle
  • footerStyle
  • hideButton
  • disableButton
  • onPress
  • buttonText
  • screenProps
  • navigation
  • onLeftPressed
  • onRightPressed


  • ...BasicScreenProps
  • ...ReactNative TextEntry props
  • stateKey: This is where the input the user saves will be saved to


There is lots left I want to do. I havn't brought over everything from our app into it yet. Here are some ideas, but feel free to open tickets with new ideas!

  • Auth flow (with Firebase?)
  • Permission flow
  • Add friends flow
  • Avatar caputure flow
  • Theming system to easily add and create new themes
  • Custom screen transitions
  • Separate ordering for Android vs iOS
  • Better handling of notches etc
  • Better scaling for different devices

Here are some examples of stuff I want to let you build eventually:

drawing drawing drawing

Real world usage

We currently use something like this for our onboarding at Bunch. Here is a gif of our flow:

Check out our app here to try out the onboarding :) :



I looked into using some of these but wanted something a bit more feature packed - but nonetheless they are awesome - and depending on what you are making may be better suited for you.


Feel free to open a ticket with stuff you would like to see. I'd love to know if others find this useful, if not I might not work on it too much more.

Otherwise, feel free to email me at

Current Tags

  • 0.0.2                                ...           latest (2 years ago)

2 Versions

  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
Dev Dependencies (0)
Dependents (0)

Copyright 2014 - 2017 漏 |