0.1.1 • Published 3 years ago
react-native-tutorial-overlay v0.1.1
React Native Tutorial Overlay
A React Native layer component to build tutorials.
‣ Installation
- First if you are using a bare React Native project you are going to need to install
react-native-svg
npm install react-native-svg
- Then install
react-native-tutorial-overlay
(if you are using expo you can just installreact-native-tutorial-overlay
)
npm install react-native-tutorial-overlay
‣ Usage Example
import { View, Text, StyleSheet } from 'react-native';
import TutorialOverlay from "react-native-tutorial-overlay";
export default function App() {
return (
<View style={styles.container}>
<View style={styles.taskContainer}>
<Text style={styles.taskTitle}>#01 - Task</Text>
<Text style={styles.taskDescription}>
build your app first steps tutorial
</Text>
</View>
<View style={styles.taskContainer}>
<Text style={styles.taskTitle}>#02 - Task</Text>
<Text style={styles.taskDescription}>finish task 01</Text>
</View>
<TutorialOverlay x="10" y="80" width="95%" height="120" shape="rectangle">
<View style={styles.tutorialContainer}>
<Text style={styles.tutorialText}>Here you can check your tasks</Text>
</View>
</TutorialOverlay>
</View>
);
}
const styles = StyleSheet.create({
container: {
marginTop: 90,
paddingHorizontal: 20,
},
taskContainer: {
height: 100,
marginBottom: 20,
padding: 20,
backgroundColor: '#FF6B6B',
},
taskTitle: {
fontSize: 24,
color: '#fff',
},
taskDescription: {
fontSize: 14,
color: '#fff',
},
tutorialContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
tutorialText: {
color: 'white',
fontSize: 20,
},
});
‣ All Properties
Prop | Default Value | Type | Description |
---|---|---|---|
shape | circle | string | shape of the hole |
x | 0 | number / string | x position of the role |
y | 0 | number / string | y position of the role |
width | 100 | number / string | width of rectangle (only for rectangle shape) |
height | 100 | number / string | height of rectangle (only for rectangle shape) |
radius | 100 | number | radius of circle (only for circle shape) |
borderRadius | 10 | number | border radius of the hole (only for rectangle shape) |
backgroundColor | rgba(0, 0, 0, 0.9) | string | background color of the overlay |
‣ Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
‣ License
MIT