get theme from navigation

apps/Example.tsx

@@ -12,6 +12,7 @@ import {
   DarkTheme,
   DefaultTheme,
   NavigationContainer,
+  useTheme,
 } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
@@ -142,7 +143,7 @@ interface MainScreenProps {
 }
 
 const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
-  const scheme = useColorScheme();
+  const isDark = useTheme().dark;
   return (
     <ScrollView testID="root-screen-examples-scrollview">
       <SettingsSwitch
@@ -155,10 +156,7 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
         }}
       />
       <Text
-        style={[
-          styles.label,
-          scheme === 'dark' ? styles.labelDark : styles.labelLight,
-        ]}
+        style={[styles.label, isDark ? styles.labelDark : styles.labelLight]}
         testID="root-screen-examples-header">
         Examples
       </Text>
@@ -172,10 +170,7 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
         />
       ))}
       <Text
-        style={[
-          styles.label,
-          scheme === 'dark' ? styles.labelDark : styles.labelLight,
-        ]}>
+        style={[styles.label, isDark ? styles.labelDark : styles.labelLight]}>
         Playgrounds
       </Text>
       {playgrounds.map(name => (

apps/src/screens/Events.tsx

@@ -170,7 +170,9 @@ interface PrivacyScreenProps {
   navigation: NativeStackNavigationProp<StackParamList, 'Main'>;
 }
 
-const PrivacyScreen = ({ navigation }: PrivacyScreenProps): React.JSX.Element => {
+const PrivacyScreen = ({
+  navigation,
+}: PrivacyScreenProps): React.JSX.Element => {
   const toast = useToast();
 
   useEffect(() => {
@@ -228,7 +230,9 @@ interface OptionsScreenProps {
   navigation: NativeStackNavigationProp<StackParamList, 'Main'>;
 }
 
-const OptionsScreen = ({ navigation }: OptionsScreenProps): React.JSX.Element => {
+const OptionsScreen = ({
+  navigation,
+}: OptionsScreenProps): React.JSX.Element => {
   const toast = useToast();
 
   useEffect(() => {

apps/src/screens/SearchBar.tsx

@@ -1,5 +1,5 @@
 import React, { useLayoutEffect, useRef, useState } from 'react';
-import { ScrollView, Text, StyleSheet, useColorScheme } from 'react-native';
+import { ScrollView, Text, StyleSheet } from 'react-native';
 import { SearchBarCommands, SearchBarProps } from 'react-native-screens';
 import {
   createNativeStackNavigator,
@@ -14,7 +14,7 @@ import {
   ToastProvider,
   useToast,
 } from '../shared';
-import { DarkTheme, DefaultTheme } from '@react-navigation/native';
+import { DarkTheme, DefaultTheme, useTheme } from '@react-navigation/native';
 
 type StackParamList = {
   Main: undefined;
@@ -32,7 +32,7 @@ interface MainScreenProps {
 
 const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
   const toast = useToast();
-  const scheme = useColorScheme();
+  const isDark = useTheme().dark;
 
   const [search, setSearch] = useState('');
   const [placeholder, setPlaceholder] = useState('Search for something...');
@@ -137,7 +137,7 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
       <Text
         style={[
           styles.heading,
-          scheme === 'dark' ? styles.headingDark : styles.headingLight,
+          isDark ? styles.headingDark : styles.headingLight,
         ]}>
         iOS only
       </Text>
@@ -159,7 +159,7 @@ const MainScreen = ({ navigation }: MainScreenProps): React.JSX.Element => {
       <Text
         style={[
           styles.heading,
-          scheme === 'dark' ? styles.headingDark : styles.headingLight,
+          isDark ? styles.headingDark : styles.headingLight,
         ]}>
         Android only
       </Text>

apps/src/shared/Form.tsx

@@ -1,12 +1,6 @@
 import React, { Fragment } from 'react';
-import { DarkTheme, DefaultTheme } from '@react-navigation/native';
-import {
-  View,
-  StyleSheet,
-  Text,
-  TextInput,
-  useColorScheme,
-} from 'react-native';
+import { DarkTheme, DefaultTheme, useTheme } from '@react-navigation/native';
+import { View, StyleSheet, Text, TextInput } from 'react-native';
 
 const fields = [
   { name: 'form-first-name', placeholder: 'First Name *' },
@@ -15,15 +9,12 @@ const fields = [
 ];
 
 export const Form = (): React.JSX.Element => {
-  const scheme = useColorScheme();
+  const isDark = useTheme().dark;
   return (
     <View testID="form" style={styles.wrapper}>
       <Text
         testID="form-header"
-        style={[
-          styles.heading,
-          scheme === 'dark' ? styles.labelDark : styles.labelLight,
-        ]}>
+        style={[styles.heading, isDark ? styles.labelDark : styles.labelLight]}>
         Example form
       </Text>
       {fields.map(({ name, placeholder }) => (
@@ -32,15 +23,15 @@ export const Form = (): React.JSX.Element => {
             testID={`${name}-label`}
             style={[
               styles.label,
-              scheme === 'dark' ? styles.labelDark : styles.labelLight,
+              isDark ? styles.labelDark : styles.labelLight,
             ]}>
             {placeholder}
           </Text>
           <TextInput
             testID={`${name}-input`}
             style={[
               styles.input,
-              scheme === 'dark' ? styles.inputDark : styles.inputLight,
+              isDark ? styles.inputDark : styles.inputLight,
             ]}
           />
         </Fragment>

apps/src/shared/ListItem.tsx

@@ -1,12 +1,6 @@
-import { DarkTheme, DefaultTheme } from '@react-navigation/native';
+import { DarkTheme, DefaultTheme, useTheme } from '@react-navigation/native';
 import React from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  useColorScheme,
-} from 'react-native';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 
 interface Props {
   title: string;
@@ -21,17 +15,17 @@ export const ListItem = ({
   testID,
   disabled,
 }: Props): React.JSX.Element => {
-  const scheme = useColorScheme();
+  const isDark = useTheme().dark;
   return (
     <TouchableOpacity onPress={onPress} testID={testID} disabled={disabled}>
       <View
         style={[
           styles.container,
-          scheme === 'dark' ? styles.containerDark : styles.containerLight,
+          isDark ? styles.containerDark : styles.containerLight,
         ]}>
         <Text
           style={[
-            scheme === 'dark' ? styles.titleDark : styles.titleLight,
+            isDark ? styles.titleDark : styles.titleLight,
             disabled && styles.disabled,
           ]}>
           {disabled && '(N/A) '}

apps/src/shared/SettingsInput.tsx

@@ -1,12 +1,11 @@
-import { DarkTheme, DefaultTheme } from '@react-navigation/native';
+import { DarkTheme, DefaultTheme, useTheme } from '@react-navigation/native';
 import React, { useState } from 'react';
 import {
   Text,
   View,
   TouchableOpacity,
   StyleSheet,
   TextInput,
-  useColorScheme,
 } from 'react-native';
 
 type Props = {
@@ -21,24 +20,24 @@ export const SettingsInput = ({
   onValueChange,
 }: Props): React.JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
-  const scheme = useColorScheme();
+  const isDark = useTheme().dark;
   return (
     <TouchableOpacity onPress={() => setIsOpen(!isOpen)}>
       <View
         style={[
           styles.container,
-          scheme === 'dark' ? styles.containerDark : styles.containerLight,
+          isDark ? styles.containerDark : styles.containerLight,
         ]}>
         <Text
           style={[
             styles.label,
-            scheme === 'dark' ? styles.labelDark : styles.labelLight,
+            isDark ? styles.labelDark : styles.labelLight,
           ]}>{`${label}: ${value}`}</Text>
         {isOpen ? (
           <TextInput
             style={[
               styles.input,
-              scheme === 'dark' ? styles.inputDark : styles.inputLight,
+              isDark ? styles.inputDark : styles.inputLight,
             ]}
             value={value}
             onChangeText={onValueChange}

apps/src/shared/SettingsPicker.tsx

@@ -1,12 +1,6 @@
-import { DarkTheme, DefaultTheme } from '@react-navigation/native';
+import { DarkTheme, DefaultTheme, useTheme } from '@react-navigation/native';
 import React, { useState } from 'react';
-import {
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  ViewStyle,
-  useColorScheme,
-} from 'react-native';
+import { Text, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
 
 type Props<T = string> = {
   testID?: string;
@@ -26,20 +20,20 @@ export function SettingsPicker<T extends string>({
   style = {},
 }: Props<T>): React.JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
-  const scheme = useColorScheme();
+  const isDark = useTheme().dark;
   return (
     <TouchableOpacity
       style={[
         styles.container,
-        scheme === 'dark' ? styles.containerDark : styles.containerLight,
+        isDark ? styles.containerDark : styles.containerLight,
         style,
       ]}
       onPress={() => setIsOpen(!isOpen)}>
       <Text
         testID={testID}
         style={[
           styles.label,
-          scheme === 'dark' ? styles.labelDark : styles.labelLight,
+          isDark ? styles.labelDark : styles.labelLight,
         ]}>{`${label}: ${value}`}</Text>
       {isOpen
         ? items.map(item => (
@@ -48,7 +42,7 @@ export function SettingsPicker<T extends string>({
                 testID={`${label.split(' ').join('-')}-${item}`.toLowerCase()}
                 style={[
                   styles.item,
-                  scheme === 'dark' ? styles.itemDark : styles.itemLight,
+                  isDark ? styles.itemDark : styles.itemLight,
                   item === value && { fontWeight: 'bold' },
                 ]}>
                 {item}

apps/src/shared/SettingsSwitch.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { DarkTheme, DefaultTheme } from '@react-navigation/native';
+import { DarkTheme, DefaultTheme, useTheme } from '@react-navigation/native';
 import {
   Text,
   View,
   TouchableOpacity,
   StyleSheet,
   ViewStyle,
-  useColorScheme,
 } from 'react-native';
 
 type Props = {
@@ -22,19 +21,19 @@ export const SettingsSwitch = ({
   onValueChange,
   style = {},
 }: Props): React.JSX.Element => {
-  const scheme = useColorScheme();
+  const isDark = useTheme().dark;
   return (
     <TouchableOpacity onPress={() => onValueChange(!value)}>
       <View
         style={[
           styles.container,
-          scheme === 'dark' ? styles.containerDark : styles.containerLight,
+          isDark ? styles.containerDark : styles.containerLight,
           style,
         ]}>
         <Text
           style={[
             styles.label,
-            scheme === 'dark' ? styles.labelDark : styles.labelLight,
+            isDark ? styles.labelDark : styles.labelLight,
           ]}>{`${label}: ${value}`}</Text>
       </View>
     </TouchableOpacity>