Set context in createReduxContainer

Sets `NavigationContext`, `ThemeContext`, and `SafeAreaContext` for downstream consumers

Author: Ashoat

package.json

@@ -23,6 +23,7 @@
   "peerDependencies": {
     "@react-navigation/core": "*",
     "react": "*",
+    "react-native-safe-area-context": "*",
     "redux": "*"
   }
 }

src/create-redux-container.js

@@ -6,9 +6,15 @@ import type {
   NavigationNavigator,
   NavigationScreenProp,
   NavigationNavigatorProps,
+  SupportedThemes,
 } from '@react-navigation/core';
 
 import * as React from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import {
+  ThemeProvider,
+  NavigationProvider,
+} from '@react-navigation/core';
 
 import {
   initializeListeners,
@@ -35,6 +41,7 @@ function createReduxContainer<
   ContainerProps: {
     ...$Diff<NavigatorProps, InjectedProps<State>>,
     ...$Exact<RequiredProps<State>>,
+    theme: SupportedThemes | 'no-preference',
   },
 >(
   Navigator: NavigatorType,
@@ -47,6 +54,7 @@ function createReduxContainer<
 
     static router = Navigator.router;
     currentNavProp: ?NavigationScreenProp<State>;
+    static defaultProps = { theme: 'no-preference' };
 
     componentDidMount() {
       initializeListeners(key, this.props.state);
@@ -60,6 +68,21 @@ function createReduxContainer<
       return this.currentNavProp;
     }
 
+    get theme() {
+      if (this.props.theme === 'light' || this.props.theme === 'dark') {
+        return this.props.theme;
+      } else if (this.props.theme === 'no-preference') {
+        return 'light';
+      } else {
+        console.warn(
+          `Invalid theme provided: ${
+            this.props.theme
+          }. Only 'light' and 'dark' are supported. Falling back to 'light'`
+        );
+        return 'light';
+      }
+    }
+
     render() {
       const { dispatch, state, ...props } = this.props;
       this.currentNavProp = propConstructor(
@@ -69,10 +92,16 @@ function createReduxContainer<
         this.getCurrentNavigation,
       );
       return (
-        <Navigator
-          {...props}
-          navigation={this.currentNavProp}
-        />
+        <SafeAreaProvider>
+          <ThemeProvider value={this.theme}>
+            <NavigationProvider value={this.currentNavProp}>
+              <Navigator
+                {...props}
+                navigation={this.currentNavProp}
+              />
+            </NavigationProvider>
+          </ThemeProvider>
+        </SafeAreaProvider>
       );
     }