Make theming somewhat more performant

src/components/App.tsx

@@ -10,10 +10,12 @@ import {
     DarkTheme,
 } from '@react-navigation/native';
 import { useColorScheme } from 'react-native';
+import { ColorSchemeContext, themes } from './Colors';
 
 export default function App(): JSX.Element {
     const colorScheme = useColorScheme();
-    // const colorScheme = 'dark';
+    const theme = themes[colorScheme || 'light'];
+    // const theme = 'dark';
 
     useEffect(() => {
         async function setupTrackPlayer() {
@@ -35,9 +37,11 @@ export default function App(): JSX.Element {
     return (
         <Provider store={store}>
             <PersistGate loading={null} persistor={persistedStore}>
+                <ColorSchemeContext.Provider value={theme}>
                     <NavigationContainer theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
                         <Routes />
                     </NavigationContainer>
+                </ColorSchemeContext.Provider>
             </PersistGate>
         </Provider>
     );

src/components/Button.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState }  from 'react';
 import { SvgProps } from 'react-native-svg';
 import { 
-    PressableProps, 
+    PressableProps, ViewProps, 
 } from 'react-native';
 import { THEME_COLOR } from 'CONSTANTS';
 import styled, { css } from 'styled-components/native';
@@ -10,6 +10,7 @@ import useDefaultStyles from './Colors';
 interface ButtonProps extends PressableProps {
     icon?: React.FC<SvgProps>;
     title: string;
+    style?: ViewProps['style'];
 }
 
 interface PressableStyleProps {

src/components/Colors.ts

@@ -1,10 +1,13 @@
 import { THEME_COLOR } from 'CONSTANTS';
-import { StyleSheet, useColorScheme } from 'react-native';
+import React from 'react';
-
+import { useContext } from 'react';
-export default function useDefaultStyles() {
+import { ColorSchemeName, StyleSheet } from 'react-native';
-    const scheme = useColorScheme();
-    // const scheme = 'dark';
 
+/**
+ * Function for generating both the dark and light stylesheets, so that they
+ * don't have to be generate on every individual component render
+ */
+function generateStyles(scheme: ColorSchemeName) {
     return StyleSheet.create({
         text: {
             color: scheme === 'dark' ? '#fff' : '#000',
@@ -44,10 +47,29 @@ export default function useDefaultStyles() {
     });
 }
 
+// Prerender both stylesheets
+export const themes: Record<'dark' | 'light', ReturnType<typeof generateStyles>> = {
+    'dark': generateStyles('dark'),
+    'light': generateStyles('light'),
+};
+
+// Create context for supplying the theming information
+export const ColorSchemeContext = React.createContext(themes.dark);
+
+/**
+ * Retrieves the default styles object in hook form 
+ */
+export default function useDefaultStyles() {
+    return useContext(ColorSchemeContext);
+}
+
 interface DefaultStylesProviderProps {
     children: (defaultStyles: ReturnType<typeof useDefaultStyles>) => JSX.Element;
 }
 
+/**
+ * A render props component to supply the defaultStyles object.
+ */
 export function DefaultStylesProvider(props: DefaultStylesProviderProps) {
     const defaultStyles = useDefaultStyles();