title: React native Navigation | How to set Up Dark theme
body: <p>I am practicing and new in React native and I really like React navigation.</p>
  <p>I have been playing around <strong>react navigation</strong> and made custom settings like <code>ErrorBoundary</code> which it works fine.</p>
  <p>I created one component and named it settings, from that settings component user can toggle the button go to Dark mode.</p>
  <p>I didn't find in the documentation how to change the app's dark mood. <strong>Can any please help me out, How to change dark mood from child component?</strong></p>
  <p><strong>This is my router component. Where I navigate the component.</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { Ionicons } from &quot;@expo/vector-icons&quot;;
  import { createBottomTabNavigator } from &quot;@react-navigation/bottom-tabs&quot;;
  import { useNavigation } from &quot;@react-navigation/native&quot;;
  import React, { useContext } from &quot;react&quot;;
  import { Button, Text, View } from &quot;react-native&quot;;
  import { ThemeContext } from &quot;styled-components&quot;;
  import ErrorBoundary from &quot;../components/errorBoundaries&quot;;
  import ITheme from &quot;../themes/types&quot;;
  import IssuesRouter from &quot;./issues/components/router&quot;;
  import Settings from &quot;./settings/Settings&quot;;
  import StyleGuide from &quot;./styleGuide&quot;;
  import Itinerary from &quot;./tasks/views/itinerary&quot;;
  
  const tabIcon = ({ focused, color, size, route }: any) =&gt; {
    let iconName;
    if (route.name === `Tasks`) {
      iconName = focused
        ? `ios-checkmark-circle`
        : `ios-checkmark-circle-outline`;
    } else if (route.name === `Issues`) {
      iconName = focused ? `ios-warning` : `ios-warning`;
    } else if (route.name === `History`) {
      iconName = focused ? `ios-list-box` : `ios-list`;
    } else if (route.name === `Settings`) {
      iconName = focused ? `ios-settings` : `ios-settings`;
    }
    return &lt;Ionicons name={iconName} size={size} color={color} /&gt;;
  };
  
  const ApplicationRouter = () =&gt; {
    const Tab = createBottomTabNavigator();
    const theme: ITheme = useContext(ThemeContext);
  
    const HomeScreen = () =&gt; { 
      const { navigate } = useNavigation();
      return (
        &lt;View
          style={{
            flex: 1,
            backgroundColor: `pink`,
            justifyContent: `center`,
            alignItems: `center`
          }}
        &gt;
          &lt;Text&gt;Home!&lt;/Text&gt;
          &lt;Button onPress={() =&gt; navigate(`Tasks`)} title=&quot;Open Modal&quot; /&gt;
        &lt;/View&gt;
      );
    };
  
    return (
      &lt;ErrorBoundary id=&quot;ApplicationRouter&quot;&gt;
        &lt;Tab.Navigator
          screenOptions={({ route }) =&gt; ({
            tabBarIcon: i =&gt;
              tabIcon({
                ...i,
                route
              })
          })}
          tabBarOptions={{
            activeTintColor: theme.linkColor,
            inactiveTintColor: theme.linkColorInactive,
            style: {
              paddingTop: 10,
              borderTopWidth: 0,
              backgroundColor: theme.backgroundColorAlt2
            }
          }}
          lazy={false}
        &gt;
          &lt;Tab.Screen name=&quot;Tasks&quot; component={Itinerary} /&gt;
          &lt;Tab.Screen name=&quot;Issues&quot; component={IssuesRouter} /&gt;
          &lt;Tab.Screen name=&quot;History&quot; component={HomeScreen} /&gt;
          &lt;Tab.Screen name=&quot;Settings&quot; component={Settings} /&gt; //THIS IS MY SETTING COMPONENT WHERE I WANT CHANGE MY DARK MOOD 
          &lt;Tab.Screen name=&quot;Style guide&quot; component={StyleGuide} /&gt;
        &lt;/Tab.Navigator&gt;
      &lt;/ErrorBoundary&gt;
    );
  };
  
  export default ApplicationRouter;
  </code></pre>
  <p><strong>This is my setting component</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState } from &quot;react&quot;;
  import { StyleSheet, Switch, View } from &quot;react-native&quot;;
  
  export default function App() {
    const [isEnabled, setIsEnabled] = useState(false);
    const toggleSwitch = () =&gt; setIsEnabled(previousState =&gt; !previousState);
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;Switch
          trackColor={{ false: &quot;#767577&quot;, true: &quot;#81b0ff&quot; }}
          thumbColor={isEnabled ? &quot;#f5dd4b&quot; : &quot;#f4f3f4&quot;}
          ios_backgroundColor=&quot;#3e3e3e&quot;
          onValueChange={toggleSwitch}
          value={isEnabled}
        /&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: &quot;center&quot;,
      justifyContent: &quot;center&quot;
    }
  });
  </code></pre>