feat: add theme support

react-navigation · Sep 4, 2019 · cc37ff4 · cc37ff4
1 parent 8b87f74
commit cc37ff4
Show file tree

Hide file tree

Showing 20 changed files with 3,499 additions and 3,854 deletions.
diff --git a/example/.buckconfig b/example/.buckconfig
diff --git a/example/.eslintrc b/example/.eslintrc
@@ -1,14 +1,11 @@
 {
-  'extends': '../.eslintrc',
+  "extends": '../.eslintrc',
 
-  'settings':
-    {
-      'import/core-modules':
-        [
-          'react-navigation-drawer',
-          'react-native-gesture-handler',
-          'react-native-reanimated',
-          'react-native-vector-icons/MaterialIcons',
-        ],
-    },
+  "settings": {
+    "import/core-modules": [ "expo", "react-navigation-drawer" ]
+  },
+
+  "rules": {
+    "react/prop-types": "off",
+  }
 }
diff --git a/example/.watchmanconfig b/example/.watchmanconfig
diff --git a/example/App.js b/example/App.js
@@ -1,11 +1,12 @@
 import * as React from 'react';
 // eslint-disable-next-line no-unused-vars
-import { FlatList, I18nManager } from 'react-native';
-import { createAppContainer } from '@react-navigation/native';
-
-// eslint-disable-next-line import/named
+import { View, TouchableOpacity, FlatList, I18nManager } from 'react-native';
+import { ThemeContext, ThemeColors } from '@react-navigation/core';
+import { Themed, createAppContainer } from '@react-navigation/native';
 import { createStackNavigator } from 'react-navigation-stack';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { List, Divider } from 'react-native-paper';
+
 import { SimpleDrawer, SimpleDrawerUnmountInactive } from './src/SimpleDrawer';
 import { ParallaxDrawer } from './src/ParallaxDrawer';
 import StyledDrawer from './src/StyledDrawer';
@@ -43,29 +44,46 @@ const data = [
   },
 ];
 
+class Row extends React.PureComponent {
+  static contextType = ThemeContext;
+
+  render() {
+    let { item, navigation } = this.props;
+
+    return (
+      <List.Item
+        title={item.title}
+        onPress={() => navigation.navigate(item.routeName)}
+        style={{ backgroundColor: ThemeColors[this.context].bodyContent }}
+        titleStyle={{ color: ThemeColors[this.context].label }}
+      />
+    );
+  }
+}
+
 class Home extends React.Component {
+  static contextType = ThemeContext;
+
   static navigationOptions = {
     title: 'Examples',
   };
 
-  _renderItem = ({ item }) => (
-    <List.Item
-      title={item.title}
-      onPress={() => this.props.navigation.navigate(item.routeName)}
-    />
-  );
-
   _keyExtractor = item => item.routeName;
+  _renderItem = ({ item }) => {
+    return <Row item={item} navigation={this.props.navigation} />;
+  };
 
   render() {
     return (
-      <FlatList
-        ItemSeparatorComponent={Divider}
-        renderItem={this._renderItem}
-        keyExtractor={this._keyExtractor}
-        style={{ backgroundColor: '#fff' }}
-        data={data}
-      />
+      <>
+        <Themed.StatusBar />
+        <FlatList
+          ItemSeparatorComponent={Divider}
+          renderItem={this._renderItem}
+          keyExtractor={this._keyExtractor}
+          data={data}
+        />
+      </>
     );
   }
 }
@@ -93,4 +111,52 @@ const MainNavigator = createStackNavigator(
   }
 );
 
-export default createAppContainer(MainNavigator);
+const Navigation = createAppContainer(MainNavigator);
+
+const App = () => {
+  let [theme, setTheme] = React.useState('light');
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Navigation theme={theme} />
+
+      <View style={{ position: 'absolute', bottom: 60, right: 20 }}>
+        <TouchableOpacity
+          onPress={() => {
+            setTheme(theme === 'light' ? 'dark' : 'light');
+          }}
+        >
+          <View
+            style={{
+              backgroundColor: ThemeColors[theme].bodyContent,
+              borderRadius: 25,
+              width: 50,
+              height: 50,
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderColor: ThemeColors[theme].bodyBorder,
+              borderWidth: 1,
+              shadowColor: ThemeColors[theme].label,
+              shadowOffset: {
+                width: 0,
+                height: 2,
+              },
+              shadowOpacity: 0.4,
+              shadowRadius: 2,
+
+              elevation: 5,
+            }}
+          >
+            <MaterialCommunityIcons
+              name="theme-light-dark"
+              size={30}
+              color={ThemeColors[theme].label}
+            />
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export default App;
diff --git a/example/app.json b/example/app.json
@@ -3,10 +3,11 @@
     "name": "React Navigation Drawer Example",
     "description": "Demonstrates the various capabilities of react-navigation-drawer",
     "slug": "react-navigation-drawer-demo",
-    "sdkVersion": "32.0.0",
+    "sdkVersion": "34.0.0",
     "version": "1.0.0",
     "primaryColor": "#2196f3",
     "packagerOpts": {
+      "assetExts": ["ttf"],
       "config": "./metro.config.js",
       "projectRoots": ""
     }

diff --git a/example/metro.config.js b/example/metro.config.js
@@ -1,26 +1,19 @@
-/* eslint-disable import/no-extraneous-dependencies, import/no-commonjs */
+/* eslint-disable import/no-commonjs, import/no-extraneous-dependencies */
 
 const path = require('path');
 const blacklist = require('metro-config/src/defaults/blacklist');
-const project = require('../package.json');
+const pak = require('../package.json');
 const escape = require('escape-string-regexp');
 
-const projectDependencies = Object.keys({
-  ...project.dependencies,
-  ...project.peerDependencies,
-});
+const dependencies = Object.keys(pak.dependencies);
+const peerDependencies = Object.keys(pak.peerDependencies);
 
 module.exports = {
   projectRoot: __dirname,
   watchFolders: [path.resolve(__dirname, '..')],
 
   resolver: {
     blacklistRE: blacklist([
-      new RegExp(
-        `^${escape(
-          path.resolve(__dirname, 'node_modules', project.name)
-        )}\\/.*$`
-      ),
       new RegExp(
         `^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$`
       ),
@@ -29,7 +22,12 @@ module.exports = {
     providesModuleNodeModules: [
       '@expo/vector-icons',
       '@babel/runtime',
-      ...projectDependencies,
+      '@react-navigation/core',
+      '@react-navigation/native',
+      'react-native-gesture-handler',
+      'react-native-reanimated',
+      ...dependencies,
+      ...peerDependencies,
     ],
   },
 };
diff --git a/example/package.json b/example/package.json
@@ -6,26 +6,27 @@
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
-    "ios": "expo start --ios",
-    "eject": "expo eject"
+    "ios": "expo start --ios"
   },
   "dependencies": {
-    "@react-navigation/core": "^3.4.0",
-    "@react-navigation/native": "^3.4.1",
-    "expo": "32.0.6",
-    "hoist-non-react-statics": "^3.3.0",
-    "react": "16.5.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
-    "react-native-paper": "^2.15.2",
-    "react-navigation-stack": "^1.2.0"
+    "@expo/vector-icons": "^10.0.0",
+    "@react-navigation/core": "^3.5.0",
+    "@react-navigation/native": "^3.6.0",
+    "expo": "^34.0.0",
+    "expo-asset": "^6.0.0",
+    "expo-constants": "~6.0.0",
+    "react": "16.8.3",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
+    "react-native-gesture-handler": "~1.3.0",
+    "react-native-maps": "~0.24.0",
+    "react-native-paper": "^2.2.0",
+    "react-native-reanimated": "~1.1.0",
+    "react-native-webview": "~5.12.0",
+    "react-navigation-stack": "^1.4.0"
   },
   "devDependencies": {
-    "babel-plugin-module-resolver": "^3.2.0"
-  },
-  "resolutions": {
-    "**/prop-types": "15.6.0",
-    "**/react-lifecycles-compat": "3.0.4",
-    "**/hoist-non-react-statics": "3.3.0",
-    "**/react-native-screens": "1.0.0-alpha.22"
+    "babel-plugin-module-resolver": "^3.2.0",
+    "babel-preset-expo": "^5.0.0",
+    "glob-to-regexp": "^0.4.0"
   }
 }
diff --git a/example/src/GestureInteraction.js b/example/src/GestureInteraction.js
@@ -1,11 +1,12 @@
 import * as React from 'react';
-import { Button, WebView, View } from 'react-native';
-import { MapView } from 'expo';
+import { Button, View } from 'react-native';
 import { withNavigation } from '@react-navigation/core';
 import {
   createDrawerNavigator,
   DrawerGestureContext,
 } from 'react-navigation-drawer';
+import MapView from 'react-native-maps';
+import { WebView } from 'react-native-webview';
 import { NativeViewGestureHandler } from 'react-native-gesture-handler';
 
 @withNavigation
@@ -44,13 +45,13 @@ class ContainerWithButtons extends React.Component {
 
 const MapScreen = () => (
   <ContainerWithButtons>
-    <DrawerGestureContext>
+    <DrawerGestureContext.Consumer>
       {ref => (
         <NativeViewGestureHandler waitFor={ref}>
           <MapView style={{ flex: 1 }} />
         </NativeViewGestureHandler>
       )}
-    </DrawerGestureContext>
+    </DrawerGestureContext.Consumer>
   </ContainerWithButtons>
 );
 
@@ -60,7 +61,7 @@ MapScreen.navigationOptions = {
 
 const WebViewScreen = () => (
   <ContainerWithButtons>
-    <DrawerGestureContext>
+    <DrawerGestureContext.Consumer>
       {ref => (
         <NativeViewGestureHandler waitFor={ref}>
           <WebView
@@ -69,7 +70,7 @@ const WebViewScreen = () => (
           />
         </NativeViewGestureHandler>
       )}
-    </DrawerGestureContext>
+    </DrawerGestureContext.Consumer>
   </ContainerWithButtons>
 );