From 586bbde2d8f0e66115017bea60fa7359b0719979 Mon Sep 17 00:00:00 2001
From: Stanley Ugwu <stanleyugwu2018@gmail.com>
Date: Mon, 20 Jun 2022 02:59:36 +0100
Subject: [PATCH 1/3] fix: change to accurate package name in installation
 command

The specified installation command: `npm i @opengeekslab/react-native-paper-onboarding` fails because the package `@opengeekslab/react-native-paper-onboarding` doesn't exist in npm registry. However, `react-native-paper-onboarding` exists and works so this commit replaces the missing package name with existing one.
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 25c36ac..efe1947 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ This project is developed and maintained by <a href="https://www.openGeeksLab.co
 
 ## Installation
 Just run:
-- npm i @opengeekslab/react-native-paper-onboarding
+- npm i 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

From 260d885c87be928c93672c996cc0c29606fd170d Mon Sep 17 00:00:00 2001
From: Stanley Ugwu <stanleyugwu2018@gmail.com>
Date: Mon, 20 Jun 2022 03:11:52 +0100
Subject: [PATCH 2/3] feat(docs): Add example for functional component screen

Adds example that explains how to define a screen and set the static `backgroundColor` property, with functional component
---
 README.md | 76 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 76 insertions(+)

diff --git a/README.md b/README.md
index efe1947..3aa6f9b 100644
--- a/README.md
+++ b/README.md
@@ -59,6 +59,7 @@ export default class App extends Component {
 }
 ```
 ## Screen example
+#### Class component
 ```javascript
 import React, { Component } from 'react';
 import {
@@ -132,6 +133,81 @@ const styles = StyleSheet.create({
 });
 ```
 
+#### Functional component
+```javascript
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Image,
+  View,
+  Text,
+} from 'react-native';
+
+import bgImage from './img.png';
+
+function Screen1() {
+   return (
+      <View style={styles.container}>
+        <View style={styles.imageContainer}>
+          <Image
+            blurRadius={0}
+            source={bgImage}
+            style={styles.image}
+            resizeMode={'contain'}
+          />
+        </View>
+        <View style={styles.textContainer}>
+          <Text style={styles.textTitle}>
+            INVITE FRIENDS
+          </Text>
+          <Text style={styles.lilText}>
+            Listen Your Favorite Music Together
+          </Text>
+        </View>
+      </View>
+    );
+}
+
+// 👇 Sets the background color for the screen
+Screen1.backgroundColor = '#ff3631';
+
+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',
+  },
+});
+
+export default Screen1;
+```
+
 # Contact us if interested.
 <a href="https://opengeekslab.com/contact-us/">
 <img src="https://raw.githubusercontent.com/openGeeksLab/docs/master/contact_our_team.png" width="25%" height="25%" style="max-width:100%;"></a>

From 103b5aafef057626ec1342cec859d263a6f30138 Mon Sep 17 00:00:00 2001
From: Stanley Ugwu <stanleyugwu2018@gmail.com>
Date: Mon, 20 Jun 2022 03:30:31 +0100
Subject: [PATCH 3/3] feat: set `useNativeDriver` to `true` for animation
 function

Added `useNativeDriver:true` to `Animation.timing` config object.
Without specifying this property, react-natives shows a warning as it's a required option.
Adding this property clears the warning and hopefully improves performance.
---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index c207f5e..7b78113 100644
--- a/src/index.js
+++ b/src/index.js
@@ -137,7 +137,7 @@ class PaperOnboardingContainer extends Component {
     const { screens } = this.props;
     Animated.timing(
       backgroundAnimation,
-      { toValue: 1, duration: 900 },
+      { toValue: 1, duration: 900, useNativeDriver:true },
     ).start(() => {
       backgroundAnimation.setValue(0);
       this.nextBackground = screens[currentScreen].backgroundColor;