From 96411033a04667220db8b75ab63b6d6d2b0a5298 Mon Sep 17 00:00:00 2001
From: Aman Mittal <amandeepmittal@live.com>
Date: Thu, 3 Oct 2024 23:41:39 +0530
Subject: [PATCH] Render StatusBar before app loads in StickerSmash app (#518)

## Why

Using the `StatusBar` component in the child component or root layout of
Expo Router does not affect the status bar style changes (applied
through code) every time the app is re-rendered in the dev mode.

Using `setStatusBar` with a `useEffect` ensures that any time the app
loads, the status bar style is applied before app loads.
---
 stickersmash/app/(tabs)/index.tsx | 80 +++++++++++++++----------------
 stickersmash/app/_layout.tsx      |  9 +++-
 2 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/stickersmash/app/(tabs)/index.tsx b/stickersmash/app/(tabs)/index.tsx
index ff6498dd..fad14e07 100644
--- a/stickersmash/app/(tabs)/index.tsx
+++ b/stickersmash/app/(tabs)/index.tsx
@@ -5,7 +5,6 @@ import { GestureHandlerRootView } from "react-native-gesture-handler";
 import * as MediaLibrary from "expo-media-library";
 import { captureRef } from "react-native-view-shot";
 import domtoimage from "dom-to-image";
-import { StatusBar } from "expo-status-bar";
 
 import Button from "@/components/Button";
 import ImageViewer from "@/components/ImageViewer";
@@ -92,50 +91,47 @@ export default function Index() {
   };
 
   return (
-    <>
-      <GestureHandlerRootView style={styles.container}>
-        <View style={styles.imageContainer}>
-          <View ref={imageRef} collapsable={false}>
-            <ImageViewer
-              imgSource={PlaceholderImage}
-              selectedImage={selectedImage}
-            />
-            {pickedEmoji && (
-              <EmojiSticker imageSize={40} stickerSource={pickedEmoji} />
-            )}
-          </View>
+    <GestureHandlerRootView style={styles.container}>
+      <View style={styles.imageContainer}>
+        <View ref={imageRef} collapsable={false}>
+          <ImageViewer
+            imgSource={PlaceholderImage}
+            selectedImage={selectedImage}
+          />
+          {pickedEmoji && (
+            <EmojiSticker imageSize={40} stickerSource={pickedEmoji} />
+          )}
         </View>
-        {showAppOptions ? (
-          <View style={styles.optionsContainer}>
-            <View style={styles.optionsRow}>
-              <IconButton icon="refresh" label="Reset" onPress={onReset} />
-              <CircleButton onPress={onAddSticker} />
-              <IconButton
-                icon="save-alt"
-                label="Save"
-                onPress={onSaveImageAsync}
-              />
-            </View>
-          </View>
-        ) : (
-          <View style={styles.footerContainer}>
-            <Button
-              theme="primary"
-              label="Choose a photo"
-              onPress={pickImageAsync}
-            />
-            <Button
-              label="Use this photo"
-              onPress={() => setShowAppOptions(true)}
+      </View>
+      {showAppOptions ? (
+        <View style={styles.optionsContainer}>
+          <View style={styles.optionsRow}>
+            <IconButton icon="refresh" label="Reset" onPress={onReset} />
+            <CircleButton onPress={onAddSticker} />
+            <IconButton
+              icon="save-alt"
+              label="Save"
+              onPress={onSaveImageAsync}
             />
           </View>
-        )}
-        <EmojiPicker isVisible={isModalVisible} onClose={onModalClose}>
-          <EmojiList onSelect={setPickedEmoji} onCloseModal={onModalClose} />
-        </EmojiPicker>
-      </GestureHandlerRootView>
-      <StatusBar style="light" />
-    </>
+        </View>
+      ) : (
+        <View style={styles.footerContainer}>
+          <Button
+            theme="primary"
+            label="Choose a photo"
+            onPress={pickImageAsync}
+          />
+          <Button
+            label="Use this photo"
+            onPress={() => setShowAppOptions(true)}
+          />
+        </View>
+      )}
+      <EmojiPicker isVisible={isModalVisible} onClose={onModalClose}>
+        <EmojiList onSelect={setPickedEmoji} onCloseModal={onModalClose} />
+      </EmojiPicker>
+    </GestureHandlerRootView>
   );
 }
 
diff --git a/stickersmash/app/_layout.tsx b/stickersmash/app/_layout.tsx
index 58c17734..aecd665c 100644
--- a/stickersmash/app/_layout.tsx
+++ b/stickersmash/app/_layout.tsx
@@ -1,10 +1,17 @@
 import { Stack } from "expo-router";
+import { setStatusBarStyle } from "expo-status-bar";
+import { useEffect } from "react";
 
 export default function RootLayout() {
+  useEffect(() => {
+    setTimeout(() => {
+      setStatusBarStyle("light");
+    }, 0);
+  }, []);
+
   return (
     <Stack>
       <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-      <Stack.Screen name="+not-found" />
     </Stack>
   );
 }