Skip to content
This repository was archived by the owner on Feb 25, 2020. It is now read-only.

Commit cc37ff4

Browse files
brentvatnebrentvatne
committed
feat: add theme support
1 parent 8b87f74 commit cc37ff4

20 files changed

+3499
-3854
lines changed

‎example/.buckconfig‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎example/.eslintrc‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
{
2-
'extends': '../.eslintrc',
2+
"extends": '../.eslintrc',
33

4-
'settings':
5-
{
6-
'import/core-modules':
7-
[
8-
'react-navigation-drawer',
9-
'react-native-gesture-handler',
10-
'react-native-reanimated',
11-
'react-native-vector-icons/MaterialIcons',
12-
],
13-
},
4+
"settings": {
5+
"import/core-modules": [ "expo", "react-navigation-drawer" ]
6+
},
7+
8+
"rules": {
9+
"react/prop-types": "off",
10+
}
1411
}

‎example/.watchmanconfig‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎example/App.js‎

Lines changed: 85 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import * as React from 'react';
22
// eslint-disable-next-line no-unused-vars
3-
import { FlatList, I18nManager } from 'react-native';
4-
import { createAppContainer } from '@react-navigation/native';
5-
6-
// eslint-disable-next-line import/named
3+
import { View, TouchableOpacity, FlatList, I18nManager } from 'react-native';
4+
import { ThemeContext, ThemeColors } from '@react-navigation/core';
5+
import { Themed, createAppContainer } from '@react-navigation/native';
76
import { createStackNavigator } from 'react-navigation-stack';
7+
import { MaterialCommunityIcons } from '@expo/vector-icons';
88
import { List, Divider } from 'react-native-paper';
9+
910
import { SimpleDrawer, SimpleDrawerUnmountInactive } from './src/SimpleDrawer';
1011
import { ParallaxDrawer } from './src/ParallaxDrawer';
1112
import StyledDrawer from './src/StyledDrawer';
@@ -43,29 +44,46 @@ const data = [
4344
},
4445
];
4546

47+
class Row extends React.PureComponent {
48+
static contextType = ThemeContext;
49+
50+
render() {
51+
let { item, navigation } = this.props;
52+
53+
return (
54+
<List.Item
55+
title={item.title}
56+
onPress={() => navigation.navigate(item.routeName)}
57+
style={{ backgroundColor: ThemeColors[this.context].bodyContent }}
58+
titleStyle={{ color: ThemeColors[this.context].label }}
59+
/>
60+
);
61+
}
62+
}
63+
4664
class Home extends React.Component {
65+
static contextType = ThemeContext;
66+
4767
static navigationOptions = {
4868
title: 'Examples',
4969
};
5070

51-
_renderItem = ({ item }) => (
52-
<List.Item
53-
title={item.title}
54-
onPress={() => this.props.navigation.navigate(item.routeName)}
55-
/>
56-
);
57-
5871
_keyExtractor = item => item.routeName;
72+
_renderItem = ({ item }) => {
73+
return <Row item={item} navigation={this.props.navigation} />;
74+
};
5975

6076
render() {
6177
return (
62-
<FlatList
63-
ItemSeparatorComponent={Divider}
64-
renderItem={this._renderItem}
65-
keyExtractor={this._keyExtractor}
66-
style={{ backgroundColor: '#fff' }}
67-
data={data}
68-
/>
78+
<>
79+
<Themed.StatusBar />
80+
<FlatList
81+
ItemSeparatorComponent={Divider}
82+
renderItem={this._renderItem}
83+
keyExtractor={this._keyExtractor}
84+
data={data}
85+
/>
86+
</>
6987
);
7088
}
7189
}
@@ -93,4 +111,52 @@ const MainNavigator = createStackNavigator(
93111
}
94112
);
95113

96-
export default createAppContainer(MainNavigator);
114+
const Navigation = createAppContainer(MainNavigator);
115+
116+
const App = () => {
117+
let [theme, setTheme] = React.useState('light');
118+
119+
return (
120+
<View style={{ flex: 1 }}>
121+
<Navigation theme={theme} />
122+
123+
<View style={{ position: 'absolute', bottom: 60, right: 20 }}>
124+
<TouchableOpacity
125+
onPress={() => {
126+
setTheme(theme === 'light' ? 'dark' : 'light');
127+
}}
128+
>
129+
<View
130+
style={{
131+
backgroundColor: ThemeColors[theme].bodyContent,
132+
borderRadius: 25,
133+
width: 50,
134+
height: 50,
135+
alignItems: 'center',
136+
justifyContent: 'center',
137+
borderColor: ThemeColors[theme].bodyBorder,
138+
borderWidth: 1,
139+
shadowColor: ThemeColors[theme].label,
140+
shadowOffset: {
141+
width: 0,
142+
height: 2,
143+
},
144+
shadowOpacity: 0.4,
145+
shadowRadius: 2,
146+
147+
elevation: 5,
148+
}}
149+
>
150+
<MaterialCommunityIcons
151+
name="theme-light-dark"
152+
size={30}
153+
color={ThemeColors[theme].label}
154+
/>
155+
</View>
156+
</TouchableOpacity>
157+
</View>
158+
</View>
159+
);
160+
};
161+
162+
export default App;

‎example/app.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@
33
"name": "React Navigation Drawer Example",
44
"description": "Demonstrates the various capabilities of react-navigation-drawer",
55
"slug": "react-navigation-drawer-demo",
6-
"sdkVersion": "32.0.0",
6+
"sdkVersion": "34.0.0",
77
"version": "1.0.0",
88
"primaryColor": "#2196f3",
99
"packagerOpts": {
10+
"assetExts": ["ttf"],
1011
"config": "./metro.config.js",
1112
"projectRoots": ""
1213
}

‎example/metro.config.js‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,19 @@
1-
/* eslint-disable import/no-extraneous-dependencies, import/no-commonjs */
1+
/* eslint-disable import/no-commonjs, import/no-extraneous-dependencies */
22

33
const path = require('path');
44
const blacklist = require('metro-config/src/defaults/blacklist');
5-
const project = require('../package.json');
5+
const pak = require('../package.json');
66
const escape = require('escape-string-regexp');
77

8-
const projectDependencies = Object.keys({
9-
...project.dependencies,
10-
...project.peerDependencies,
11-
});
8+
const dependencies = Object.keys(pak.dependencies);
9+
const peerDependencies = Object.keys(pak.peerDependencies);
1210

1311
module.exports = {
1412
projectRoot: __dirname,
1513
watchFolders: [path.resolve(__dirname, '..')],
1614

1715
resolver: {
1816
blacklistRE: blacklist([
19-
new RegExp(
20-
`^${escape(
21-
path.resolve(__dirname, 'node_modules', project.name)
22-
)}\\/.*$`
23-
),
2417
new RegExp(
2518
`^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$`
2619
),
@@ -29,7 +22,12 @@ module.exports = {
2922
providesModuleNodeModules: [
3023
'@expo/vector-icons',
3124
'@babel/runtime',
32-
...projectDependencies,
25+
'@react-navigation/core',
26+
'@react-navigation/native',
27+
'react-native-gesture-handler',
28+
'react-native-reanimated',
29+
...dependencies,
30+
...peerDependencies,
3331
],
3432
},
3533
};

‎example/package.json‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,27 @@
66
"scripts": {
77
"start": "expo start",
88
"android": "expo start --android",
9-
"ios": "expo start --ios",
10-
"eject": "expo eject"
9+
"ios": "expo start --ios"
1110
},
1211
"dependencies": {
13-
"@react-navigation/core": "^3.4.0",
14-
"@react-navigation/native": "^3.4.1",
15-
"expo": "32.0.6",
16-
"hoist-non-react-statics": "^3.3.0",
17-
"react": "16.5.0",
18-
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
19-
"react-native-paper": "^2.15.2",
20-
"react-navigation-stack": "^1.2.0"
12+
"@expo/vector-icons": "^10.0.0",
13+
"@react-navigation/core": "^3.5.0",
14+
"@react-navigation/native": "^3.6.0",
15+
"expo": "^34.0.0",
16+
"expo-asset": "^6.0.0",
17+
"expo-constants": "~6.0.0",
18+
"react": "16.8.3",
19+
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
20+
"react-native-gesture-handler": "~1.3.0",
21+
"react-native-maps": "~0.24.0",
22+
"react-native-paper": "^2.2.0",
23+
"react-native-reanimated": "~1.1.0",
24+
"react-native-webview": "~5.12.0",
25+
"react-navigation-stack": "^1.4.0"
2126
},
2227
"devDependencies": {
23-
"babel-plugin-module-resolver": "^3.2.0"
24-
},
25-
"resolutions": {
26-
"**/prop-types": "15.6.0",
27-
"**/react-lifecycles-compat": "3.0.4",
28-
"**/hoist-non-react-statics": "3.3.0",
29-
"**/react-native-screens": "1.0.0-alpha.22"
28+
"babel-plugin-module-resolver": "^3.2.0",
29+
"babel-preset-expo": "^5.0.0",
30+
"glob-to-regexp": "^0.4.0"
3031
}
3132
}

‎example/src/GestureInteraction.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import * as React from 'react';
2-
import { Button, WebView, View } from 'react-native';
3-
import { MapView } from 'expo';
2+
import { Button, View } from 'react-native';
43
import { withNavigation } from '@react-navigation/core';
54
import {
65
createDrawerNavigator,
76
DrawerGestureContext,
87
} from 'react-navigation-drawer';
8+
import MapView from 'react-native-maps';
9+
import { WebView } from 'react-native-webview';
910
import { NativeViewGestureHandler } from 'react-native-gesture-handler';
1011

1112
@withNavigation
@@ -44,13 +45,13 @@ class ContainerWithButtons extends React.Component {
4445

4546
const MapScreen = () => (
4647
<ContainerWithButtons>
47-
<DrawerGestureContext>
48+
<DrawerGestureContext.Consumer>
4849
{ref => (
4950
<NativeViewGestureHandler waitFor={ref}>
5051
<MapView style={{ flex: 1 }} />
5152
</NativeViewGestureHandler>
5253
)}
53-
</DrawerGestureContext>
54+
</DrawerGestureContext.Consumer>
5455
</ContainerWithButtons>
5556
);
5657

@@ -60,7 +61,7 @@ MapScreen.navigationOptions = {
6061

6162
const WebViewScreen = () => (
6263
<ContainerWithButtons>
63-
<DrawerGestureContext>
64+
<DrawerGestureContext.Consumer>
6465
{ref => (
6566
<NativeViewGestureHandler waitFor={ref}>
6667
<WebView
@@ -69,7 +70,7 @@ const WebViewScreen = () => (
6970
/>
7071
</NativeViewGestureHandler>
7172
)}
72-
</DrawerGestureContext>
73+
</DrawerGestureContext.Consumer>
7374
</ContainerWithButtons>
7475
);
7576

0 commit comments

Comments
 (0)