Open Ehab97 opened 8 months ago
import React from "react"; import { View, StyleSheet, Dimensions } from "react-native"; import Onboarding from "react-native-onboarding-swiper"; import LottieView from "lottie-react-native"; import { useNavigation } from "@react-navigation/native"; import { setItem } from "../utils/asyncStorage"; const { width } = Dimensions.get("window"); function OnboardingScreen() { const navigation = useNavigation(); const handleDone = async () => { await setItem("onboarded", "1"); console.log("Navigating to Home"); navigation.replace("Home"); }; return ( <View style={styles.Container}> <Onboarding containerStyles={{ paddingHorizontal: 15 }} onDone={handleDone} onSkip={handleDone} pages={[ { backgroundColor: "#a7f3d0", image: ( <View style={styles.lottie}> <LottieView style={{ flex: 1 }} source={require("../../assets/animations/boost.json")} autoPlay loop /> </View> ), title: "Boost Productivity", subtitle: "Subscribe this channel to boost your productivity level", }, { backgroundColor: "#fef3c7", image: ( <View style={styles.lottie}> <LottieView style={{ flex: 1 }} source={require("../../assets/animations/work.json")} autoPlay loop /> </View> ), title: "Work Seamlessly", subtitle: "Get your work done seamlessly without interruption", }, { backgroundColor: "#a78bfa", image: ( <View style={styles.lottie}> <LottieView style={{ flex: 1 }} source={require("../../assets/animations/achieve.json")} autoPlay loop /> </View> ), title: "Achieve Higher Goals", subtitle: "By boosting your productivity we help you to achieve higher goals", }, ]} /> </View> ); } const styles = StyleSheet.create({ Container: { flex: 1, }, lottie: { width: width * 0.9, height: width, }, }); export default OnboardingScreen;
import React, { useEffect, useState } from "react"; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import HomeScreen from "../screens/HomeScreen"; import OnboardingScreen from "../screens/OnboardingScreen"; const Stack = createNativeStackNavigator(); export default function AppNavigation() { return ( <NavigationContainer> <Stack.Navigator initialRouteName="OnBoarding"> <Stack.Screen name="Onboarding" options={{ headerShown: false }} component={OnboardingScreen} /> <Stack.Screen name="Home" options={{ headerShown: false }} component={HomeScreen} /> </Stack.Navigator> </NavigationContainer> ); }
import { StyleSheet, Text, View } from "react-native"; import AppNavigation from "./src/components/AppNavigation"; export default function App() { return <AppNavigation />; } const styles = StyleSheet.create({ container: { flex: 1, }, });