feat: add custom theme support (#211)

packages/native/src/NavigationNativeContainer.tsx

@@ -4,7 +4,14 @@ import {
   NavigationContainerProps,
   NavigationContainerRef,
 } from '@react-navigation/core';
+import ThemeProvider from './theming/ThemeProvider';
+import DefaultTheme from './theming/DefaultTheme';
 import useBackButton from './useBackButton';
+import { Theme } from './types';
+
+type Props = NavigationContainerProps & {
+  theme?: Theme;
+};
 
 /**
  * Container component which holds the navigation state
@@ -13,11 +20,12 @@ import useBackButton from './useBackButton';
  *
  * @param props.initialState Initial state object for the navigation tree.
  * @param props.onStateChange Callback which is called with the latest navigation state when it changes.
+ * @param props.theme Theme object for the navigators.
  * @param props.children Child elements to render the content.
  * @param props.ref Ref object which refers to the navigation object containing helper methods.
  */
 const NavigationNativeContainer = React.forwardRef(function NativeContainer(
-  props: NavigationContainerProps,
+  { theme = DefaultTheme, ...rest }: Props,
   ref: React.Ref<NavigationContainerRef>
 ) {
   const refContainer = React.useRef<NavigationContainerRef>(null);
@@ -27,11 +35,9 @@ const NavigationNativeContainer = React.forwardRef(function NativeContainer(
   React.useImperativeHandle(ref, () => refContainer.current);
 
   return (
-    <NavigationContainer
-      {...props}
-      ref={refContainer}
-      children={props.children}
-    />
+    <ThemeProvider value={theme}>
+      <NavigationContainer {...rest} ref={refContainer} />
+    </ThemeProvider>
   );
 });
 

packages/native/src/index.tsx

@@ -5,3 +5,8 @@ export { default as NavigationNativeContainer } from './NavigationNativeContaine
 export { default as useBackButton } from './useBackButton';
 export { default as useLinking } from './useLinking';
 export { default as useScrollToTop } from './useScrollToTop';
+
+export { default as DefaultTheme } from './theming/DefaultTheme';
+export { default as DarkTheme } from './theming/DarkTheme';
+export { default as ThemeProvider } from './theming/ThemeProvider';
+export { default as useTheme } from './theming/useTheme';

packages/native/src/theming/DarkTheme.tsx

@@ -0,0 +1,14 @@
+import { Theme } from '../types';
+
+const DarkTheme: Theme = {
+  dark: true,
+  colors: {
+    primary: 'rgb(10, 132, 255)',
+    background: 'rgb(1, 1, 1)',
+    card: 'rgb(18, 18, 18)',
+    text: 'rgb(229, 229, 231)',
+    border: 'rgb(39, 39, 41)',
+  },
+};
+
+export default DarkTheme;

packages/native/src/theming/DefaultTheme.tsx

@@ -0,0 +1,14 @@
+import { Theme } from '../types';
+
+const DefaultTheme: Theme = {
+  dark: false,
+  colors: {
+    primary: 'rgb(0, 122, 255)',
+    background: 'rgb(242, 242, 242)',
+    card: 'rgb(255, 255, 255)',
+    text: 'rgb(28, 28, 30)',
+    border: 'rgb(199, 199, 204)',
+  },
+};
+
+export default DefaultTheme;

packages/native/src/theming/ThemeContext.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import DefaultTheme from './DefaultTheme';
+import { Theme } from '../types';
+
+const ThemeContext = React.createContext<Theme>(DefaultTheme);
+
+export default ThemeContext;

packages/native/src/theming/ThemeProvider.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import ThemeContext from './ThemeContext';
+import { Theme } from '../types';
+
+type Props = {
+  value: Theme;
+  children: React.ReactNode;
+};
+
+export default function ThemeProvider({ value, children }: Props) {
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}

packages/native/src/theming/useTheme.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import ThemeContext from './ThemeContext';
+
+export default function useTheme() {
+  const theme = React.useContext(ThemeContext);
+
+  return theme;
+}

packages/native/src/types.tsx

@@ -0,0 +1,10 @@
+export type Theme = {
+  dark: boolean;
+  colors: {
+    primary: string;
+    background: string;
+    card: string;
+    text: string;
+    border: string;
+  };
+};