My Expo App is closed whenever i click on skip or done

[Ehab97]

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,
   },
});