feat: change themes dynamically on the example project

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
     'plugin:prettier/recommended',
     'prettier/react',
     'plugin:jest/recommended',
+    'plugin:@typescript-eslint/recommended',
   ],
   parser: '@typescript-eslint/parser',
   plugins: ['react', 'prettier'],
@@ -37,5 +38,6 @@ module.exports = {
     'react/require-default-props': 'off',
     'react/jsx-props-no-spreading': 'off',
     'react/prop-types': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
   },
 };

example/src/App.tsx

@@ -1,58 +1,17 @@
 import React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
 
 import { NavigationContainer } from '@react-navigation/native';
-import { AppBar, ThemeProvider, original } from 'react95-native';
 
-import ExamplesScreen from './ExamplesScreen';
-import examples from './examples';
-
-const flattenedExamples = examples
-  .map(group => group.sections.map(section => section.items))
-  .flat(2);
-
-type RootStackParamList = {
-  Home: undefined;
-  ButtonExample: undefined;
-  TextInputExample: undefined;
-};
-
-const Stack = createStackNavigator<RootStackParamList>();
+import { LocalThemeProvider } from './util/LocalThemeContext';
+import MainNavigation from './MainNavigation';
 
 const App = () => {
   return (
-    <ThemeProvider theme={original}>
+    <LocalThemeProvider>
       <NavigationContainer>
-        <Stack.Navigator
-          headerMode='screen'
-          screenOptions={{
-            header: ({ navigation, scene, previous }) => (
-              <AppBar>
-                {previous && (
-                  <AppBar.BackAction onPress={() => navigation.goBack()} />
-                )}
-                <AppBar.Content title={scene.descriptor.options.title} />
-              </AppBar>
-            ),
-          }}
-        >
-          <Stack.Screen
-            name='Home'
-            component={ExamplesScreen}
-            options={{ title: 'Examples' }}
-          />
-          {flattenedExamples.map(({ name, title, component }) => (
-            <Stack.Screen
-              key={name}
-              /* @ts-ignore */
-              name={name}
-              component={component}
-              options={{ title }}
-            />
-          ))}
-        </Stack.Navigator>
+        <MainNavigation />
       </NavigationContainer>
-    </ThemeProvider>
+    </LocalThemeProvider>
   );
 };
 

example/src/ExamplesScreen.tsx

@@ -1,43 +1,63 @@
-import React from 'react';
-import { StyleSheet, SafeAreaView, View } from 'react-native';
+import React, { useContext } from 'react';
+import { StyleSheet, SafeAreaView } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { Panel, Cutout, List, ScrollView } from 'react95-native';
+import { Panel, Cutout, List, ScrollView, original } from 'react95-native';
 
 import examples from './examples';
+import themes from './examples/themes';
+import { LocalThemeContext } from './util/LocalThemeContext';
 
 const ExamplesScreen = () => {
   const navigation = useNavigation();
 
+  const { setTheme } = useContext(LocalThemeContext);
+
+  const onThemePress = (themeId: string) => {
+    const { theme = original } = themes.find(({ id }) => id === themeId) || {};
+
+    setTheme(theme);
+  };
+
   return (
     <SafeAreaView style={styles.container}>
-      <Panel variant='outside' style={[styles.panel]}>
-        <Cutout style={[styles.cutout]}>
-          <ScrollView style={[styles.scrollView]} alwaysShowScrollbars>
-            <View style={[styles.content]}>
-              {examples.map(group => (
-                <List.Accordion
-                  title={group.title}
-                  key={group.title}
-                  style={[styles.section]}
-                  defaultExpanded
-                >
-                  {group.sections.map((section, i) => (
-                    <React.Fragment key={section.title}>
-                      {i > 0 && <List.Divider />}
-                      <List.Section title={section.title}>
-                        {section.items.map(item => (
-                          <List.Item
-                            title={item.title}
-                            key={item.title}
-                            onPress={() => navigation.navigate(item.name)}
-                          />
-                        ))}
-                      </List.Section>
-                    </React.Fragment>
-                  ))}
-                </List.Accordion>
+      <Panel variant='outside' style={styles.panel}>
+        <Cutout style={styles.cutout}>
+          <ScrollView
+            style={styles.scrollView}
+            contentContainerStyle={styles.content}
+            alwaysShowScrollbars
+          >
+            <List.Accordion title='Themes' defaultExpanded>
+              <List.Section>
+                {themes.map(theme => (
+                  <List.Item
+                    key={theme.id}
+                    title={theme.id}
+                    onPress={() => onThemePress(theme.id)}
+                  />
+                ))}
+              </List.Section>
+            </List.Accordion>
+            <List.Accordion
+              title='Components'
+              style={styles.section}
+              defaultExpanded
+            >
+              {examples.map((section, i) => (
+                <React.Fragment key={section.title}>
+                  {i > 0 && <List.Divider />}
+                  <List.Section title={section.title}>
+                    {section.items.map(item => (
+                      <List.Item
+                        title={item.title}
+                        key={item.title}
+                        onPress={() => navigation.navigate(item.name)}
+                      />
+                    ))}
+                  </List.Section>
+                </React.Fragment>
               ))}
-            </View>
+            </List.Accordion>
           </ScrollView>
         </Cutout>
       </Panel>

example/src/MainNavigation.tsx

@@ -0,0 +1,55 @@
+import React, { useContext } from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import { AppBar, ThemeProvider as React95Provider } from 'react95-native';
+
+import { LocalThemeContext } from './util/LocalThemeContext';
+import ExamplesScreen from './ExamplesScreen';
+import examples from './examples';
+
+const flattenedExamples = examples.map(section => section.items).flat();
+
+type RootStackParamList = {
+  Home: undefined;
+  ButtonExample: undefined;
+  TextInputExample: undefined;
+};
+
+const Stack = createStackNavigator<RootStackParamList>();
+
+const MainNavigation = () => {
+  const { theme } = useContext(LocalThemeContext);
+
+  return (
+    <React95Provider theme={theme}>
+      <Stack.Navigator
+        headerMode='screen'
+        screenOptions={{
+          header: ({ navigation, scene, previous }) => (
+            <AppBar>
+              {previous && (
+                <AppBar.BackAction onPress={() => navigation.goBack()} />
+              )}
+              <AppBar.Content title={scene.descriptor.options.title} />
+            </AppBar>
+          ),
+        }}
+      >
+        <Stack.Screen
+          name='Home'
+          component={ExamplesScreen}
+          options={{ title: 'Examples' }}
+        />
+        {flattenedExamples.map(({ name, title, component }) => (
+          <Stack.Screen
+            key={name}
+            name={name}
+            component={component}
+            options={{ title }}
+          />
+        ))}
+      </Stack.Navigator>
+    </React95Provider>
+  );
+};
+
+export default MainNavigation;

example/src/examples/index.tsx

@@ -20,86 +20,77 @@ import WindowExample from './WindowExample';
 
 export default [
   {
-    title: 'Components',
-    sections: [
+    title: 'Inputs',
+    items: [
+      { name: 'ButtonExample', component: ButtonExample, title: 'Button' },
       {
-        title: 'Inputs',
-        items: [
-          { name: 'ButtonExample', component: ButtonExample, title: 'Button' },
-          {
-            name: 'CheckboxExample',
-            component: CheckboxExample,
-            title: 'Checkbox',
-          },
-          {
-            name: 'FieldsetExample',
-            component: FieldsetExample,
-            title: 'Fieldset',
-          },
-          { name: 'RadioExample', component: RadioExample, title: 'Radio' },
-          { name: 'SelectExample', component: SelectExample, title: 'Select' },
-          {
-            name: 'SelectBoxExample',
-            component: SelectBoxExample,
-            title: 'SelectBox',
-          },
-          {
-            name: 'TextInputExample',
-            component: TextInputExample,
-            title: 'TextInput',
-          },
-        ],
+        name: 'CheckboxExample',
+        component: CheckboxExample,
+        title: 'Checkbox',
       },
       {
-        title: 'Layout',
-        items: [
-          { name: 'AppBarExample', component: AppBarExample, title: 'AppBar' },
-          { name: 'CutoutExample', component: CutoutExample, title: 'Cutout' },
-          {
-            name: 'DividerExample',
-            component: DividerExample,
-            title: 'Divider',
-          },
-          { name: 'PanelExample', component: PanelExample, title: 'Panel' },
-          { name: 'WindowExample', component: WindowExample, title: 'Window' },
-        ],
+        name: 'FieldsetExample',
+        component: FieldsetExample,
+        title: 'Fieldset',
       },
+      { name: 'RadioExample', component: RadioExample, title: 'Radio' },
+      { name: 'SelectExample', component: SelectExample, title: 'Select' },
       {
-        title: 'Navigation',
-        items: [
-          { name: 'ListExample', component: ListExample, title: 'List' },
-          { name: 'MenuExample', component: MenuExample, title: 'Menu' },
-          { name: 'TabsExample', component: TabsExample, title: 'Tabs' },
-        ],
+        name: 'SelectBoxExample',
+        component: SelectBoxExample,
+        title: 'SelectBox',
       },
       {
-        title: 'Other',
-        items: [
-          {
-            name: 'DesktopExample',
-            component: DesktopExample,
-            title: 'Desktop',
-          },
-          {
-            name: 'HourglassExample',
-            component: HourglassExample,
-            title: 'Hourglass',
-          },
-          {
-            name: 'ProgressExample',
-            component: ProgressExample,
-            title: 'Progress',
-          },
-        ],
+        name: 'TextInputExample',
+        component: TextInputExample,
+        title: 'TextInput',
+      },
+    ],
+  },
+  {
+    title: 'Layout',
+    items: [
+      { name: 'AppBarExample', component: AppBarExample, title: 'AppBar' },
+      { name: 'CutoutExample', component: CutoutExample, title: 'Cutout' },
+      {
+        name: 'DividerExample',
+        component: DividerExample,
+        title: 'Divider',
+      },
+      { name: 'PanelExample', component: PanelExample, title: 'Panel' },
+      { name: 'WindowExample', component: WindowExample, title: 'Window' },
+    ],
+  },
+  {
+    title: 'Navigation',
+    items: [
+      { name: 'ListExample', component: ListExample, title: 'List' },
+      { name: 'MenuExample', component: MenuExample, title: 'Menu' },
+      { name: 'TabsExample', component: TabsExample, title: 'Tabs' },
+    ],
+  },
+  {
+    title: 'Other',
+    items: [
+      {
+        name: 'DesktopExample',
+        component: DesktopExample,
+        title: 'Desktop',
+      },
+      {
+        name: 'HourglassExample',
+        component: HourglassExample,
+        title: 'Hourglass',
       },
       {
-        title: 'Typography',
-        items: [{ name: 'TextExample', component: TextExample, title: 'Text' }],
+        name: 'ProgressExample',
+        component: ProgressExample,
+        title: 'Progress',
       },
     ],
   },
   {
-    title: 'Themes',
-    sections: [],
+    title: 'Typography',
+    items: [{ name: 'TextExample', component: TextExample, title: 'Text' }],
   },
 ];

example/src/examples/themes.ts

@@ -0,0 +1,7 @@
+import { original, counterStrike, vaporTeal } from 'react95-native';
+
+export default [
+  { id: original.name, theme: original },
+  { id: counterStrike.name, theme: counterStrike },
+  { id: vaporTeal.name, theme: vaporTeal },
+];