Merge pull request #1449 from GetStream/mads/wrap-sample-in-theme-provider

fix: wrap the SampleApp with ThemeProvider

Author: vanGalilea

examples/SampleApp/App.tsx

@@ -116,26 +116,28 @@ const App = () => {
         backgroundColor: streamChatTheme.colors?.white_snow || '#FCFCFC',
       }}
     >
-      <NavigationContainer
-        ref={RootNavigationRef}
-        theme={{
-          colors: {
-            ...(colorScheme === 'dark' ? DarkTheme : DefaultTheme).colors,
-            background: streamChatTheme.colors?.white_snow || '#FCFCFC',
-          },
-          dark: colorScheme === 'dark',
-        }}
-      >
-        <AppContext.Provider value={{ chatClient, loginUser, logout, switchUser }}>
-          {isConnecting ? (
-            <LoadingScreen />
-          ) : chatClient ? (
-            <DrawerNavigatorWrapper chatClient={chatClient} />
-          ) : (
-            <UserSelector />
-          )}
-        </AppContext.Provider>
-      </NavigationContainer>
+      <ThemeProvider style={streamChatTheme}>
+        <NavigationContainer
+          ref={RootNavigationRef}
+          theme={{
+            colors: {
+              ...(colorScheme === 'dark' ? DarkTheme : DefaultTheme).colors,
+              background: streamChatTheme.colors?.white_snow || '#FCFCFC',
+            },
+            dark: colorScheme === 'dark',
+          }}
+        >
+          <AppContext.Provider value={{ chatClient, loginUser, logout, switchUser }}>
+            {isConnecting ? (
+              <LoadingScreen />
+            ) : chatClient ? (
+              <DrawerNavigatorWrapper chatClient={chatClient} />
+            ) : (
+              <UserSelector />
+            )}
+          </AppContext.Provider>
+        </NavigationContainer>
+      </ThemeProvider>
     </SafeAreaProvider>
   );
 };
@@ -175,26 +177,20 @@ const DrawerNavigatorWrapper: React.FC<{
   );
 };
 
-const UserSelector = () => {
-  const streamChatTheme = useStreamChatTheme();
-
-  return (
-    <ThemeProvider style={streamChatTheme}>
-      <UserSelectorStack.Navigator initialRouteName='UserSelectorScreen'>
-        <UserSelectorStack.Screen
-          component={AdvancedUserSelectorScreen}
-          name='AdvancedUserSelectorScreen'
-          options={{ gestureEnabled: false, headerShown: false }}
-        />
-        <UserSelectorStack.Screen
-          component={UserSelectorScreen}
-          name='UserSelectorScreen'
-          options={{ gestureEnabled: false, headerShown: false }}
-        />
-      </UserSelectorStack.Navigator>
-    </ThemeProvider>
-  );
-};
+const UserSelector = () => (
+  <UserSelectorStack.Navigator initialRouteName='UserSelectorScreen'>
+    <UserSelectorStack.Screen
+      component={AdvancedUserSelectorScreen}
+      name='AdvancedUserSelectorScreen'
+      options={{ gestureEnabled: false, headerShown: false }}
+    />
+    <UserSelectorStack.Screen
+      component={UserSelectorScreen}
+      name='UserSelectorScreen'
+      options={{ gestureEnabled: false, headerShown: false }}
+    />
+  </UserSelectorStack.Navigator>
+);
 
 // TODO: Split the stack into multiple stacks - ChannelStack, CreateChannelStack etc.
 const HomeScreen = () => {