title: iOS 13 Dark Mode in React Native with Tab Bar and Navigation Bar
body: <p>I am currently trying to have a set up with a bottom tab bar, and inside the tabs, each a navigation stack with navigation bar. I use the following code based on the react navigation <a href="https://github.com/react-navigation/theme-example/blob/master/App.tsx" rel="nofollow noreferrer">sample app</a> (just minor edits on the imports, as some things were moved).</p>
  
  <p>Unfortunately, only the tab bar is displayed in the dark mode color on iOS 13 simulator (dark grey), the navigation bar is white. How can I get it to display as well in the dark mode color?</p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, View } from 'react-native';
  import {
    createAppContainer,
    Themed,
  } from 'react-navigation';
  import { createStackNavigator } from 'react-navigation-stack';
  import { createBottomTabNavigator } from 'react-navigation-tabs';
  import { AppearanceProvider, useColorScheme } from 'react-native-appearance';
  
  function A() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;Themed.Text&gt;B&lt;/Themed.Text&gt;
      &lt;/View&gt;
    );
  }
  
  A.navigationOptions = { title: 'Hello from A' };
  
  function B() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;Themed.Text&gt;B&lt;/Themed.Text&gt;
      &lt;/View&gt;
    );
  }
  
  B.navigationOptions = { title: 'Hello from B!!!!' };
  
  let StackA = createStackNavigator({ A });
  let StackB = createStackNavigator({ B });
  let Tabs = createBottomTabNavigator({ StackA, StackB });
  let Navigation = createAppContainer(Tabs);
  
  export default function App() {
    let theme = useColorScheme();
  
    return (
      &lt;AppearanceProvider&gt;
        &lt;Navigation theme={theme} /&gt;
      &lt;/AppearanceProvider&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  </code></pre>