https://github.com/opengeekslab/react-native-paper-onboarding
JavaScript for React-Native iOS Android module
https://github.com/opengeekslab/react-native-paper-onboarding
android cross-platform crossplatform ios javascript module react-native
Last synced: 8 months ago
JSON representation
JavaScript for React-Native iOS Android module
- Host: GitHub
- URL: https://github.com/opengeekslab/react-native-paper-onboarding
- Owner: openGeeksLab
- Created: 2018-09-12T10:22:46.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-10-28T08:43:54.000Z (over 2 years ago)
- Last Synced: 2024-10-30T07:07:19.669Z (over 1 year ago)
- Topics: android, cross-platform, crossplatform, ios, javascript, module, react-native
- Language: JavaScript
- Homepage: https://opengeekslab.com
- Size: 19.5 KB
- Stars: 15
- Watchers: 2
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# About
Our company provides custom UI design and development solutions for mobile applications and websites.
Need a team to create a project?
This project is developed and maintained by openGeeksLab LLC.
# react-native-paper-onboarding
## Requirements
- React Native 0.50+
- iOS 9.0+
- Android 4.2+
## Installation
Just run:
- npm i @opengeekslab/react-native-paper-onboarding
## Basic usage
The library depends on that each screen should contain a static backgroundColor field which contains the desired background color for this screen. The screen itself should have a transparent background
```javascript
import React, { Component } from 'react';
import PaperOnboarding from 'react-native-paper-onboarding';
import Screen1 from './screens/screen1';
import Screen2 from './screens/screen2';
import Screen3 from './screens/screen3';
const screens = [Screen1, Screen2, Screen3];
export default class App extends Component {
render() {
return (
);
}
}
```
## Screen example
```javascript
import React, { Component } from 'react';
import {
StyleSheet,
Image,
View,
Text,
} from 'react-native';
import bgImage from './img.png';
export default class Screen1 extends Component {
static backgroundColor = '#ff3631';
render() {
return (
INVITE FRIENDS
Listen Your Favorite Music Together
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
height: '100%',
backgroundColor: 'transparent',
},
imageContainer: {
flex: 1,
backgroundColor: 'transparent',
},
image: {
width: '100%',
height: '100%',
},
textContainer: {
height: '27%',
paddingLeft: 25,
backgroundColor: 'transparent',
},
textTitle: {
fontSize: 56,
fontFamily: 'Bebas Neue',
color: 'rgb(255, 255, 255)',
backgroundColor: 'transparent',
},
lilText: {
fontSize: 13,
fontFamily: 'Montserrat',
color: 'rgb(255, 255, 255)',
backgroundColor: 'transparent',
},
});
```
# Contact us if interested.
# Licence
Expanding is released under the MIT license.