fix(boilerplate): expo-router keyboard provider + theme fix (#2825 by @…

…frankcalise) [skip ci] * fix(boilerplate): fix expo-router provider configuration * fix(boilerplate): properly theme the welcome screen for expo-router
infinitered · Oct 29, 2024 · f82f324 · f82f324
1 parent f2cdd00
commit f82f324
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 24 deletions.
diff --git a/boilerplate/src/app/_layout.tsx b/boilerplate/src/app/_layout.tsx
@@ -1,13 +1,14 @@
 import { useEffect, useState } from "react"
-import { ViewStyle } from "react-native"
 import { Slot, SplashScreen } from "expo-router"
-import { GestureHandlerRootView } from "react-native-gesture-handler"
+import { KeyboardProvider } from "react-native-keyboard-controller"
 // @mst replace-next-line
 import { useInitialRootStore } from "@/models"
 import { useFonts } from "@expo-google-fonts/space-grotesk"
 import { customFontsToLoad } from "@/theme"
 import { initI18n } from "@/i18n"
 import { loadDateFnsLocale } from "@/utils/formatDate"
+import { useThemeProvider } from "@/utils/useAppTheme"
+
 
 SplashScreen.preventAutoHideAsync()
 
@@ -29,6 +30,7 @@ export default function Root() {
 
   const [fontsLoaded, fontError] = useFonts(customFontsToLoad)
   const [isI18nInitialized, setIsI18nInitialized] = useState(false)
+  const { themeScheme, setThemeContextOverride, ThemeProvider } = useThemeProvider()
 
   useEffect(() => {
     initI18n()
@@ -53,7 +55,11 @@ export default function Root() {
     return null
   }
 
-  return <GestureHandlerRootView style={$root}><Slot /></GestureHandlerRootView>
+  return (
+    <ThemeProvider value={{ themeScheme, setThemeContextOverride }}>
+      <KeyboardProvider>
+        <Slot />
+      </KeyboardProvider>
+    </ThemeProvider>
+  )
 }
-
-const $root: ViewStyle = { flex: 1 }
diff --git a/boilerplate/src/app/index.tsx b/boilerplate/src/app/index.tsx
@@ -1,54 +1,61 @@
 // @mst replace-next-line
 import { observer } from "mobx-react-lite"
 import { Image, ImageStyle, TextStyle, View, ViewStyle } from "react-native"
-import { Text } from "@/components"
+import { Screen, Text } from "@/components"
 import { isRTL } from "@/i18n"
-import { colors, spacing } from "@/theme"
+import { ThemedStyle } from "@/theme"
 import { useSafeAreaInsetsStyle } from "@/utils/useSafeAreaInsetsStyle"
+import { useAppTheme } from "@/utils/useAppTheme"
 
 const welcomeLogo = require("../../assets/images/logo.png")
 const welcomeFace = require("../../assets/images/welcome-face.png")
 
 // @mst replace-next-line export default function WelcomeScreen() {
 export default observer(function WelcomeScreen() {
   const $bottomContainerInsets = useSafeAreaInsetsStyle(["bottom"])
+  const { theme, themed } = useAppTheme()
 
   return (
-    <View style={$container}>
-      <View style={$topContainer}>
-        <Image style={$welcomeLogo} source={welcomeLogo} resizeMode="contain" />
+    <Screen safeAreaEdges={["top"]} contentContainerStyle={themed($container)}>
+      <View style={themed($topContainer)}>
+        <Image style={themed($welcomeLogo)} source={welcomeLogo} resizeMode="contain" />
         <Text
           testID="welcome-heading"
-          style={$welcomeHeading}
+          style={themed($welcomeHeading)}
           tx="welcomeScreen:readyForLaunch"
           preset="heading"
         />
         <Text tx="welcomeScreen:exciting" preset="subheading" />
-        <Image style={$welcomeFace} source={welcomeFace} resizeMode="contain" />
+        <Image
+          style={$welcomeFace}
+          source={welcomeFace}
+          resizeMode="contain"
+          tintColor={theme.isDark ? theme.colors.palette.neutral900 : undefined}
+        />
       </View>
 
-      <View style={[$bottomContainer, $bottomContainerInsets]}>
+      <View style={[themed($bottomContainer), $bottomContainerInsets]}>
         <Text tx="welcomeScreen:postscript" size="md" />
       </View>
-    </View>
+    </Screen>
   )
 // @mst replace-next-line }
 })
 
-const $container: ViewStyle = {
+const $container: ThemedStyle<ViewStyle> = ({ colors }) => ({
   flex: 1,
   backgroundColor: colors.background,
-}
+})
 
-const $topContainer: ViewStyle = {
+const $topContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   flexShrink: 1,
   flexGrow: 1,
   flexBasis: "57%",
   justifyContent: "center",
   paddingHorizontal: spacing.lg,
-}
+})
 
-const $bottomContainer: ViewStyle = {
+const $bottomContainer: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
   flexShrink: 1,
   flexGrow: 0,
   flexBasis: "43%",
@@ -57,12 +64,13 @@ const $bottomContainer: ViewStyle = {
   borderTopRightRadius: 16,
   paddingHorizontal: spacing.lg,
   justifyContent: "space-around",
-}
-const $welcomeLogo: ImageStyle = {
+})
+
+const $welcomeLogo: ThemedStyle<ImageStyle> = ({ spacing }) => ({
   height: 88,
   width: "100%",
   marginBottom: spacing.xxl,
-}
+})
 
 const $welcomeFace: ImageStyle = {
   height: 169,
@@ -73,6 +81,6 @@ const $welcomeFace: ImageStyle = {
   transform: [{ scaleX: isRTL ? -1 : 1 }],
 }
 
-const $welcomeHeading: TextStyle = {
+const $welcomeHeading: ThemedStyle<TextStyle> = ({ spacing }) => ({
   marginBottom: spacing.md,
-}
+})