Fix: Web rendering issues and welcome screen layout issue

boilerplate/app/components/Screen.tsx

@@ -2,7 +2,6 @@ import { useScrollToTop } from "@react-navigation/native"
 import { StatusBar, StatusBarProps, StatusBarStyle } from "expo-status-bar"
 import { ReactNode, useRef, useState } from "react"
 import {
-  KeyboardAvoidingView,
   KeyboardAvoidingViewProps,
   LayoutChangeEvent,
   Platform,
@@ -14,7 +13,7 @@ import {
 } from "react-native"
 import { $styles } from "../theme"
 import { ExtendedEdge, useSafeAreaInsetsStyle } from "../utils/useSafeAreaInsetsStyle"
-import { KeyboardAwareScrollView } from "react-native-keyboard-controller"
+import { KeyboardAwareScrollView, KeyboardAvoidingView } from "react-native-keyboard-controller"
 import { useAppTheme } from "@/utils/useAppTheme"
 
 export const DEFAULT_BOTTOM_OFFSET = 50
@@ -253,6 +252,25 @@ export function Screen(props: ScreenProps) {
 
   const $containerInsets = useSafeAreaInsetsStyle(safeAreaEdges)
 
+  {
+    /**
+     * KeyboardAvoidingView crashes in web,
+     * therefore we want to use ScrollView just for web
+     */
+  }
+  const ContentWrapperView =
+    Platform.OS === "web"
+      ? ScrollView
+      : (props: KeyboardAvoidingViewProps) => (
+          <KeyboardAvoidingView
+            behavior={isIos ? "padding" : "height"}
+            keyboardVerticalOffset={keyboardOffset}
+            {...KeyboardAvoidingViewProps}
+            style={[$styles.flex1, KeyboardAvoidingViewProps?.style]}
+            {...props}
+          />
+        )
+
   return (
     <View
       style={[
@@ -266,18 +284,13 @@ export function Screen(props: ScreenProps) {
         {...StatusBarProps}
       />
 
-      <KeyboardAvoidingView
-        behavior={isIos ? "padding" : "height"}
-        keyboardVerticalOffset={keyboardOffset}
-        {...KeyboardAvoidingViewProps}
-        style={[$styles.flex1, KeyboardAvoidingViewProps?.style]}
-      >
+      <ContentWrapperView>
         {isNonScrolling(props.preset) ? (
           <ScreenWithoutScrolling {...props} />
         ) : (
           <ScreenWithScrolling {...props} />
         )}
-      </KeyboardAvoidingView>
+      </ContentWrapperView>
     </View>
   )
 }

boilerplate/app/screens/WelcomeScreen.tsx

@@ -9,7 +9,7 @@ import {
 import { isRTL } from "../i18n"
 import { useStores } from "../models" // @demo remove-current-line
 import { AppStackScreenProps } from "../navigators"
-import type { ThemedStyle } from "@/theme"
+import { spacing, type ThemedStyle } from "@/theme"
 import { useHeader } from "../utils/useHeader" // @demo remove-current-line
 import { useSafeAreaInsetsStyle } from "../utils/useSafeAreaInsetsStyle"
 import { useAppTheme } from "@/utils/useAppTheme"
@@ -57,7 +57,7 @@ export const WelcomeScreen: FC<WelcomeScreenProps> = observer(
             tx="welcomeScreen:readyForLaunch"
             preset="heading"
           />
-          <Text tx="welcomeScreen:exciting" preset="subheading" />
+          <Text tx="welcomeScreen:exciting" preset="subheading" style={$subheading} />
           <Image
             style={$welcomeFace}
             source={welcomeFace}
@@ -87,8 +87,9 @@ const $topContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   flexShrink: 1,
   flexGrow: 1,
   flexBasis: "57%",
-  justifyContent: "center",
+  justifyContent: "space-around",
   paddingHorizontal: spacing.lg,
+  paddingBottom: spacing.sm,
 })
 
 const $bottomContainer: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
@@ -108,6 +109,10 @@ const $welcomeLogo: ThemedStyle<ImageStyle> = ({ spacing }) => ({
   marginBottom: spacing.xxl,
 })
 
+const $subheading: TextStyle = {
+  paddingRight: spacing.xxxl,
+}
+
 const $welcomeFace: ImageStyle = {
   height: 169,
   width: 269,

boilerplate/app/utils/useHeader.tsx

@@ -1,6 +1,7 @@
-import { useLayoutEffect } from "react"
+import { useEffect, useLayoutEffect } from "react"
 import { useNavigation } from "@react-navigation/native"
 import { Header, HeaderProps } from "../components"
+import { Platform } from "react-native"
 
 /**
  * A hook that can be used to easily set the Header of a react-navigation screen from within the screen's component.
@@ -13,10 +14,15 @@ export function useHeader(
   deps: Parameters<typeof useLayoutEffect>[1] = [],
 ) {
   const navigation = useNavigation()
+  /**
+   * We need to have multiple implementations of this hook for web and mobile.
+   * Web needs to use useEffect to avoid a rendering loop.
+   * In mobile and also to avoid a visible header jump when navigating between screens, we use
+   * `useLayoutEffect`, which will apply the settings before the screen renders.
+   */
+  const useAppropriateEffect = Platform.OS === "web" ? useEffect : useLayoutEffect
 
-  // To avoid a visible header jump when navigating between screens, we use
-  // `useLayoutEffect`, which will apply the settings before the screen renders.
-  useLayoutEffect(() => {
+  useAppropriateEffect(() => {
     navigation.setOptions({
       headerShown: true,
       header: () => <Header {...headerProps} />,