refined onboarding screen

Author: Infinite-Null

Screens/Initial.js

@@ -1,27 +1,58 @@
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import {useContext, useEffect} from "react";
-import {View} from "react-native";
-import Context from "../Context/Context";
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable react-native/no-inline-styles */
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {useEffect} from 'react';
+import {Dimensions, View} from 'react-native';
+import {Text} from 'react-native-animatable';
 
 export const Initial = ({navigation}) => {
-    const {Style1}=useContext(Context)
-    async function Get(){
-        const val=await AsyncStorage.getItem('On');
-        console.log(val)
-        if(val==='T'){
-            navigation.replace('HomePage')
-
-        }else{
-            navigation.replace('Onboarding')
-        }
+  async function Get() {
+    const val = await AsyncStorage.getItem('On');
+    console.log(val);
+    if (val === 'T') {
+      navigation.replace('HomePage');
+    } else {
+      navigation.replace('Onboarding');
     }
-    useEffect(() => {
-        Get()
-    }, []);
-    return (
-        <View style={{
-            backgroundColor:"black",
-            flex:1
-        }}></View>
-    )
-}
+  }
+  const width = Dimensions.get('window').width;
+  useEffect(() => {
+    setTimeout(() => {
+      Get();
+    }, 1400);
+  }, []);
+  return (
+    <View
+      style={{
+        backgroundColor: '#1e1b38',
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <Text
+        animation={'fadeIn'}
+        delay={300}
+        duration={1000}
+        style={{
+          color: 'white',
+          fontSize: width * 0.12,
+          fontWeight: 'bold',
+          textAlign: 'center',
+        }}>
+        O2 AI
+      </Text>
+      <Text
+        animation={'fadeIn'}
+        delay={700}
+        duration={300}
+        style={{
+          color: 'white',
+          fontSize: width * 0.03,
+          textAlign: 'center',
+        }}>
+        best AI experience.
+      </Text>
+    </View>
+  );
+};

Screens/OnboardingScreen.js

@@ -1,55 +1,34 @@
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react/react-in-jsx-scope */
 import Onboarding from 'react-native-onboarding-swiper';
-import {Image} from "react-native";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import {Dimensions} from 'react-native';
 
 export const OnboardingScreen = ({navigation}) => {
-    return (
-        <Onboarding
-            skipToPage={3}
-            titleStyles={{
-                fontSize:30
-            }}
-            onDone={async ()=>{
-                await AsyncStorage.setItem('On', "T");
-                navigation.replace("HomePage")
-            }}
-            pages={[
-                {
-                    backgroundColor: '#045d8d',
-                    image: <Image source={require('../Assets/logo.jpg')} style={{
-                        height:200,
-                        width:200,
-                        borderRadius:10
-                    }}/>,
-                    title: 'Welcome to O2.Ai',
-                    subtitle: 'Your personal Ai assistant',
-                },
-                {
-                    backgroundColor: '#257e54',
-                    image: <Image source={require('../Assets/mail.gif')} style={{
-                        height:200,
-                        width:200,
-                        borderRadius:1500
-                    }}/>,
-                    title: 'Mail Generation',
-                    subtitle: 'Generate professional mails with just one tap',
-                },
-                {
-                    backgroundColor: '#709f87',
-                    image: <Image source={require('../Assets/code.gif')} style={{
-                        height:200,
-                        width:200,
-                        borderRadius:1500
-                    }}/>,
-                    title: 'Code Generation',
-                    subtitle: 'A professional coder at your finger tip.',
-                },
-                {
-                    backgroundColor: '#333380',
-                    title: 'Let\'s Go !',
-                    subtitle:""
-                },
-            ]}
-        />
-    )
-}
+  const width = Dimensions.get('window').width;
+  return (
+    <Onboarding  
+      skipToPage={1}
+      titleStyles={{
+        fontSize: width * 0.3,
+        fontWeight: 'bold',
+      }}
+      onDone={async () => {
+        await AsyncStorage.setItem('On', 'T');
+        navigation.replace('HomePage');
+      }}
+      pages={[
+        {
+          backgroundColor: '#262152',
+          title: 'O2 AI',
+          subtitle: 'Your personal AI assistant \n for all your needs',
+        },
+        {
+          backgroundColor: '#1e1b38',
+          title: "Let's Go !",
+          subtitle: '',
+        },
+      ]}
+    />
+  );
+};