https://github.com/zonayedpca/react-native-welcome
Simple way to add interactive user instruction to let your user know about your app before start using it...
https://github.com/zonayedpca/react-native-welcome
react-native react-native-instruction react-native-slider react-native-welcome react-native-welcome-screen
Last synced: about 2 months ago
JSON representation
Simple way to add interactive user instruction to let your user know about your app before start using it...
- Host: GitHub
- URL: https://github.com/zonayedpca/react-native-welcome
- Owner: zonayedpca
- Created: 2019-05-26T13:39:10.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T11:41:51.000Z (over 2 years ago)
- Last Synced: 2024-04-29T16:21:19.987Z (about 1 year ago)
- Topics: react-native, react-native-instruction, react-native-slider, react-native-welcome, react-native-welcome-screen
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-welcome
- Size: 2.27 MB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-welcome
[](https://travis-ci.com/zonayedpca/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:
```javascript
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:
```javascript
```
### 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.
```javascript
Welcome!!!
Peace be upon you
Make something great
Pass your elements as children to control this area
Once you are done, can skip it
```
- `elementContainerStyle`: Defines the styling of the each elements' container mentioned above. Defaults to:
```javascript
{{
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:
```javascript
{{
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`