From 36ad5aaf046a611e2d1b61a03ff362259951b04a Mon Sep 17 00:00:00 2001
From: devthejo <devthejo@protonmail.com>
Date: Mon, 22 Sep 2025 14:40:33 +0200
Subject: [PATCH] fix(wizard): scrollview

---
 src/app/index.js                            | 22 +++++++++++++--------
 src/containers/PermissionWizard/HeroMode.js |  9 ++++++++-
 src/containers/PermissionWizard/SkipInfo.js |  9 ++++++++-
 src/containers/PermissionWizard/Success.js  |  9 ++++++++-
 src/containers/PermissionWizard/Welcome.js  |  9 ++++++++-
 src/layout/LayoutProviders.js               |  2 --
 6 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/app/index.js b/src/app/index.js
index e9bea14..228ad6c 100644
--- a/src/app/index.js
+++ b/src/app/index.js
@@ -23,6 +23,10 @@ import AppLifecycleListener from "~/containers/AppLifecycleListener";
 
 import { useUpdates } from "~/updates";
 import Error from "~/components/Error";
+import {
+  SafeAreaProvider,
+  initialWindowMetrics,
+} from "react-native-safe-area-context";
 
 import useTrackLocation from "~/hooks/useTrackLocation";
 // import { initializeBackgroundFetch } from "~/services/backgroundFetch";
@@ -298,13 +302,15 @@ function AppContent() {
 
 export default function App() {
   return (
-    <ErrorBoundary
-      onError={errorHandler}
-      FallbackComponent={Error}
-      // Add a buffer time before allowing reset to prevent immediate re-crashes
-      minTimeBetweenResets={1000}
-    >
-      <AppContent />
-    </ErrorBoundary>
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+      <ErrorBoundary
+        onError={errorHandler}
+        FallbackComponent={Error}
+        // Add a buffer time before allowing reset to prevent immediate re-crashes
+        minTimeBetweenResets={1000}
+      >
+        <AppContent />
+      </ErrorBoundary>
+    </SafeAreaProvider>
   );
 }
diff --git a/src/containers/PermissionWizard/HeroMode.js b/src/containers/PermissionWizard/HeroMode.js
index 2443bc3..02d3d58 100644
--- a/src/containers/PermissionWizard/HeroMode.js
+++ b/src/containers/PermissionWizard/HeroMode.js
@@ -8,6 +8,7 @@ import {
   AppState,
 } from "react-native";
 import { Title } from "react-native-paper";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Ionicons, Entypo } from "@expo/vector-icons";
 import {
   permissionsActions,
@@ -55,6 +56,7 @@ const HeroMode = () => {
     "batteryOptimizationDisabled",
   ]);
   const theme = useTheme();
+  const insets = useSafeAreaInsets();
 
   const [skipMessage] = useState(() => {
     const randomIndex = Math.floor(Math.random() * skipMessages.length);
@@ -498,7 +500,12 @@ const HeroMode = () => {
     <View
       style={[styles.container, { backgroundColor: theme.colors.background }]}
     >
-      <ScrollView style={styles.scrollView}>
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
         <View style={styles.content}>
           <View style={styles.heroHeader}>
             <Image
diff --git a/src/containers/PermissionWizard/SkipInfo.js b/src/containers/PermissionWizard/SkipInfo.js
index 157a1b0..e79f3ed 100644
--- a/src/containers/PermissionWizard/SkipInfo.js
+++ b/src/containers/PermissionWizard/SkipInfo.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { View, StyleSheet, Image, ScrollView } from "react-native";
 import { Title } from "react-native-paper";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTheme } from "~/theme";
 import { permissionWizardActions } from "~/stores";
 import CustomButton from "~/components/CustomButton";
@@ -8,6 +9,7 @@ import Text from "~/components/Text";
 
 const SkipInfo = () => {
   const theme = useTheme();
+  const insets = useSafeAreaInsets();
 
   const handleFinish = () => {
     permissionWizardActions.setCompleted(true);
@@ -17,7 +19,12 @@ const SkipInfo = () => {
     <View
       style={[styles.container, { backgroundColor: theme.colors.background }]}
     >
-      <ScrollView style={styles.scrollView}>
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
         <View style={styles.content}>
           <View style={styles.header}>
             <View style={styles.imageContainer}>
diff --git a/src/containers/PermissionWizard/Success.js b/src/containers/PermissionWizard/Success.js
index fd70e62..c3585f1 100644
--- a/src/containers/PermissionWizard/Success.js
+++ b/src/containers/PermissionWizard/Success.js
@@ -1,6 +1,7 @@
 import React, { useCallback } from "react";
 import { View, StyleSheet, Image, ScrollView } from "react-native";
 import { Button, Title } from "react-native-paper";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Ionicons } from "@expo/vector-icons";
 import { permissionWizardActions } from "~/stores";
 import { useTheme } from "~/theme";
@@ -9,6 +10,7 @@ import CustomButton from "~/components/CustomButton";
 
 const Success = () => {
   const theme = useTheme();
+  const insets = useSafeAreaInsets();
 
   const handleFinish = useCallback(() => {
     permissionWizardActions.setCompleted(true);
@@ -18,7 +20,12 @@ const Success = () => {
     <View
       style={[styles.container, { backgroundColor: theme.colors.background }]}
     >
-      <ScrollView style={styles.scrollView}>
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
         <View style={styles.content}>
           <Image
             source={require("~/assets/img/wizard-success.png")}
diff --git a/src/containers/PermissionWizard/Welcome.js b/src/containers/PermissionWizard/Welcome.js
index 1f22211..947ac04 100644
--- a/src/containers/PermissionWizard/Welcome.js
+++ b/src/containers/PermissionWizard/Welcome.js
@@ -1,6 +1,7 @@
 import React, { useState, useCallback, useEffect } from "react";
 import { View, StyleSheet, Image, ScrollView } from "react-native";
 import { Title } from "react-native-paper";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Ionicons } from "@expo/vector-icons";
 import {
   permissionsActions,
@@ -26,6 +27,7 @@ const Welcome = () => {
     "locationForeground",
   ]);
   const theme = useTheme();
+  const insets = useSafeAreaInsets();
 
   const handleNext = useCallback(() => {
     permissionWizardActions.setCurrentStep("hero");
@@ -148,7 +150,12 @@ const Welcome = () => {
     <View
       style={[styles.container, { backgroundColor: theme.colors.background }]}
     >
-      <ScrollView style={styles.scrollView}>
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
         <View style={styles.content}>
           <Image
             source={require("~/assets/img/logo.png")}
diff --git a/src/layout/LayoutProviders.js b/src/layout/LayoutProviders.js
index 2afa276..ed3d681 100644
--- a/src/layout/LayoutProviders.js
+++ b/src/layout/LayoutProviders.js
@@ -1,7 +1,6 @@
 import React, { useRef, useState, useMemo } from "react";
 import { StatusBar } from "react-native";
 
-import { SafeAreaProvider } from "react-native-safe-area-context";
 import { useColorScheme } from "~/theme";
 import { Provider as PaperProvider } from "react-native-paper";
 import { NavigationContainer } from "@react-navigation/native";
@@ -58,7 +57,6 @@ export default function LayoutProviders({ layoutKey, setLayoutKey, children }) {
       />
       <ComposeComponents
         components={[
-          SafeAreaProvider,
           [PaperProvider, { theme: dark ? PaperDarkTheme : PaperLightTheme }],
           [RootNavCtx.Provider, { value: navigationRef }],
           [DrawerStateCtx.Provider, { value: drawerStateCtxVal }],