Fix screen jump from Welcome screen to Demo screen (#2744)

* Prevent screen jump

Android and iOS were both jumping when navigating from the Welcome
screen to the Demo Showroom screen (although in different directions,
and Android was less severe).

I found this issue was prevented when we use the `<StatusBar>` component
on the WelcomeScreen as well as DemoShowroom, so converted WelcomeScreen
to use the built-in `Screen` component, which includes `<StatusBar>`.

However, that raised another issue: when navigating from the Login
screen to the Welcome screen, the "fixed" `Screen` component on Welcome
screen would render the wrong height; it would be slightly too tall.
This didn't occur when changing presets and reloading the app via fast
refresh, which indicated to me that it was likely due to a state change
that was using the "old" screen dimensions from Login screen, but then
was incorrect after another state change took place on the Welcome
screen.

I found that was correct: the `useHeader` hook was using useEffect,
which means that header height wouldn't be set until the second render,
so when the KeyboardAvoidingView on on Welcome screen tried to render,
it had the wrong height information and rendered the wrong size.

By using `useLayoutEffect`, we make sure the header height is set before
any of the screen components try to render, fixing the issue.

* Spacing is unused when generating with no demo

causes a lint error in a generated project, so fixed

boilerplate/app/screens/WelcomeScreen.tsx

@@ -4,6 +4,7 @@ import { Image, ImageStyle, TextStyle, View, ViewStyle } from "react-native"
 import {
   Button, // @demo remove-current-line
   Text,
+  Screen,
 } from "app/components"
 import { isRTL } from "../i18n"
 import { useStores } from "../models" // @demo remove-current-line
@@ -46,7 +47,7 @@ export const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeSc
   const $bottomContainerInsets = useSafeAreaInsetsStyle(["bottom"])
 
   return (
-    <View style={themed($container)}>
+    <Screen preset="fixed">
       <View style={themed($topContainer)}>
         <Image style={themed($welcomeLogo)} source={welcomeLogo} resizeMode="contain" />
         <Text
@@ -75,16 +76,11 @@ export const WelcomeScreen: FC<WelcomeScreenProps> = observer(function WelcomeSc
         />
         {/* @demo remove-block-end */}
       </View>
-    </View>
+    </Screen>
   )
   // @mst replace-next-line }
 })
 
-const $container: ThemedStyle<ViewStyle> = ({ colors }) => ({
-  flex: 1,
-  backgroundColor: colors.background,
-})
-
 const $topContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
   flexShrink: 1,
   flexGrow: 1,

boilerplate/app/theme/styles.ts

@@ -1,5 +1,5 @@
 import { ViewStyle } from "react-native"
-import { spacing } from "./spacing"
+import { spacing } from "./spacing" // @demo remove-current-line
 
 /* Use this file to define styles that are used in multiple places in your app. */
 export const $styles = {

boilerplate/app/utils/useHeader.tsx

@@ -14,7 +14,9 @@ export function useHeader(
 ) {
   const navigation = useNavigation()
 
-  React.useEffect(() => {
+  // To avoid a visible header jump when navigating between screens, we use
+  // `useLayoutEffect`, which will apply the settings before the screen renders.
+  React.useLayoutEffect(() => {
     navigation.setOptions({
       headerShown: true,
       header: () => <Header {...headerProps} />,

test/vanilla/__snapshots__/ignite-remove-demo.test.ts.snap

@@ -66,7 +66,7 @@ removing file /user/home/ignite/app/screens/LoginScreen.tsx
    Found 'remove-file' in /user/home/ignite/app/screens/LoginScreen.tsx
    Found '@demo remove-current-line', '@demo remove-block-start', '@demo remove-block-end' in /user/home/ignite/app/screens/WelcomeScreen.tsx
    Found '@demo remove-current-line', '@demo remove-block-start', '@demo remove-block-end' in /user/home/ignite/app/services/api/api.ts
-   Found '@demo remove-block-start', '@demo remove-block-end' in /user/home/ignite/app/theme/styles.ts
+   Found '@demo remove-current-line', '@demo remove-block-start', '@demo remove-block-end' in /user/home/ignite/app/theme/styles.ts
    Removed empty directory '/user/home/ignite/.maestro'
    Removed empty directory '/user/home/ignite/app/screens/DemoShowroomScreen/demos'
    Removed empty directory '/user/home/ignite/app/screens/DemoShowroomScreen'