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:
;
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 todark-content
. Also can belight-content
(React native defaults) -
showIndicator
: Show indicators for the each screens. Defaults tofalse
, can betrue
-
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