fix(wizard): scrollview

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,6 +302,7 @@ function AppContent() {
 
 export default function App() {
   return (
+    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
       <ErrorBoundary
         onError={errorHandler}
         FallbackComponent={Error}
@@ -306,5 +311,6 @@ export default function App() {
       >
         <AppContent />
       </ErrorBoundary>
+    </SafeAreaProvider>
   );
 }

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

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}>

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")}

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")}

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 }],