react-native-welcome

Welcome your user with useful instructions. Check out these screenshots:

Getting started

Simply add it as a dependency:

$ npm install --save react-native-welcome

Or if you're using yarn:

$ yarn add react-native-welcome

That's it! You're ready to go!

Usage

Simply import it:

import Welcome from "react-native-welcome";

And then Use it in a screen, you must need to set your screen so that it can take entire screen. It will take as much as it gets:

<Welcome />

Props

It has a default starter appearance. But you can always modify it as much as you want by utilizing these props:

• bgColor: Defines the color of entire background. Default is set to #fff

• children: Pass the elements as children to show them on the screen individually.

<Welcome>
  <Text>Welcome!!!</Text>
  <Text>Peace be upon you</Text>
  <Text>Make something great</Text>
  <Text>Pass your elements as children to control this area</Text>
  <Text>Once you are done, can skip it</Text>
</Welcome>

• elementContainerStyle: Defines the styling of the each elements' container mentioned above. Defaults to:

{{
    flex: 1,
    width: SCREEN_WIDTH,
}}

• barBgColor: The background color of the StatusBar. Defaults to #eee

• barStyle: The style of the StatusBar content. Defaults to dark-content. Also can be light-content(React native defaults)

• showIndicator: Show indicators for the each screens. Defaults to false, can be true

• onDone: is invoked when the user goes at the last screen and choose to finish the welcome screens

• navStyle: Defines the styling for the nav for the screens. Defaults to:

{{
    padding: 20,
    borderTopWidth: 2,
    backgroundColor: "#eee",
    borderColor: "#333"
}}

• prevArrow: Defines the element for previous screen button. Can be anything.

• nextArrow: Defines the element for screen screen button. Can be anything.

• doneIcon: Defines the element for finished screen button. Can be anything.

• dotColor: Defines the color of the active dots in the nav. Defaults to #fff

• dotBg: Defines the color of the inactive dots in the nav. Defaults to #000