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

Commit 9883cd8

Browse files
brentvatnebrentvatne
committed
feat: add theme support
1 parent 891b502 commit 9883cd8

File tree

6 files changed

+2076
-2390
lines changed

6 files changed

+2076
-2390
lines changed

‎example/App.js‎

Lines changed: 98 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,44 @@
11
import * as React from 'react';
22
import { registerRootComponent } from 'expo';
3-
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
4-
import { createStackNavigator } from 'react-navigation';
5-
import { createAppContainer } from '@react-navigation/native';
3+
import { View, TouchableOpacity, StyleSheet } from 'react-native';
4+
import {
5+
Assets as StackAssets,
6+
createStackNavigator,
7+
} from 'react-navigation-stack';
8+
import { Themed, createAppContainer } from '@react-navigation/native';
9+
import { ThemeColors, useTheme } from '@react-navigation/core';
10+
import { MaterialCommunityIcons } from '@expo/vector-icons';
11+
import { Asset } from 'expo-asset';
12+
613
import BottomTabs from './src/BottomTabs';
714
import MaterialTopTabs from './src/MaterialTopTabs';
815

9-
class Home extends React.Component {
10-
render() {
11-
return (
12-
<View>
13-
<TouchableOpacity
14-
style={styles.item}
15-
onPress={() => this.props.navigation.push('BottomTabs')}
16-
>
17-
<Text>Bottom tabs</Text>
18-
</TouchableOpacity>
19-
<TouchableOpacity
20-
style={styles.item}
21-
onPress={() => this.props.navigation.push('MaterialTopTabs')}
22-
>
23-
<Text>Material top tabs</Text>
24-
</TouchableOpacity>
25-
</View>
26-
);
27-
}
28-
}
16+
// Load the back button etc
17+
Asset.loadAsync(StackAssets);
18+
19+
const Home = props => {
20+
let theme = useTheme();
21+
22+
return (
23+
<View>
24+
<TouchableOpacity
25+
activeOpacity={0.8}
26+
style={theme === 'dark' ? styles.itemDark : styles.itemLight}
27+
onPress={() => props.navigation.push('BottomTabs')}
28+
>
29+
<Themed.Text>Bottom tabs</Themed.Text>
30+
</TouchableOpacity>
31+
<TouchableOpacity
32+
activeOpacity={0.8}
33+
style={theme === 'dark' ? styles.itemDark : styles.itemLight}
34+
onPress={() => props.navigation.push('MaterialTopTabs')}
35+
>
36+
<Themed.Text>Material top tabs</Themed.Text>
37+
</TouchableOpacity>
38+
<Themed.StatusBar />
39+
</View>
40+
);
41+
};
2942

3043
const List = createStackNavigator({
3144
Home: {
@@ -42,15 +55,75 @@ const List = createStackNavigator({
4255
},
4356
});
4457

45-
const App = createAppContainer(List);
58+
const Navigation = createAppContainer(List);
59+
60+
const App = () => {
61+
let [theme, setTheme] = React.useState('light');
62+
63+
return (
64+
<View style={styles.container}>
65+
<Navigation theme={theme} />
66+
<View style={styles.buttonContainer}>
67+
<TouchableOpacity
68+
style={[
69+
styles.button,
70+
{
71+
backgroundColor: ThemeColors[theme].bodyContent,
72+
borderColor: ThemeColors[theme].bodyBorder,
73+
shadowColor: ThemeColors[theme].label,
74+
},
75+
]}
76+
onPress={() => {
77+
setTheme(theme === 'light' ? 'dark' : 'light');
78+
}}
79+
>
80+
<MaterialCommunityIcons
81+
name="theme-light-dark"
82+
size={30}
83+
color={ThemeColors[theme].label}
84+
/>
85+
</TouchableOpacity>
86+
</View>
87+
</View>
88+
);
89+
};
4690

4791
const styles = {
48-
item: {
92+
container: {
93+
flex: 1,
94+
},
95+
buttonContainer: {
96+
position: 'absolute',
97+
bottom: 60,
98+
right: 20,
99+
},
100+
button: {
101+
shadowOffset: {
102+
width: 0,
103+
height: 2,
104+
},
105+
shadowOpacity: 0.4,
106+
shadowRadius: 2,
107+
borderRadius: 25,
108+
width: 50,
109+
height: 50,
110+
alignItems: 'center',
111+
justifyContent: 'center',
112+
elevation: 5,
113+
borderWidth: 1,
114+
},
115+
itemLight: {
49116
padding: 16,
50117
backgroundColor: '#fff',
51118
borderBottomWidth: StyleSheet.hairlineWidth,
52119
borderBottomColor: '#eee',
53120
},
121+
itemDark: {
122+
padding: 16,
123+
backgroundColor: ThemeColors.dark.bodyContent,
124+
borderBottomWidth: StyleSheet.hairlineWidth,
125+
borderBottomColor: ThemeColors.dark.bodyBorder,
126+
},
54127
};
55128

56129
registerRootComponent(App);

‎example/app.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"expo": {
33
"name": "React Navigation Tabs Example",
4-
"description": "Demonstrates the various capabilities of react-navigation-tabs: https://github.com/react-navigation/tabs",
4+
"description": "Demonstrates the various capabilities of react-navigation-tabs: https://github.com/react-navigation/react-navigation-tabs",
55
"slug": "react-navigation-tabs-demos",
6-
"sdkVersion": "32.0.0",
6+
"sdkVersion": "33.0.0",
77
"version": "1.0.0",
88
"primaryColor": "#2196f3",
99
"packagerOpts": {

‎example/package.json‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,27 @@
99
},
1010
"main": "App.js",
1111
"dependencies": {
12-
"@expo/vector-icons": "^10.0.1",
13-
"@react-navigation/core": "^3.4.0",
14-
"@react-navigation/native": "^3.3.0",
15-
"expo": "32.0.6",
16-
"react": "16.5.0",
17-
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
12+
"@expo/vector-icons": "^10.0.0",
13+
"@react-navigation/core": "3.5.0-alpha.7",
14+
"@react-navigation/native": "^3.6.0-alpha.1",
15+
"expo": "^33.0.7",
16+
"expo-asset": "^6.0.0",
17+
"expo-constants": "~5.0.1",
18+
"react": "16.8.3",
19+
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
1820
"react-native-safe-area-view": "^0.13.1",
19-
"react-native-screens": "^1.0.0-alpha.22",
20-
"react-native-tab-view": "^2.0.3",
21-
"react-navigation": "^3.6.0"
21+
"react-native-screens": "1.0.0-alpha.22",
22+
"react-native-tab-view": "^1.2.0",
23+
"react-navigation-stack": "1.4.0-alpha.0"
2224
},
2325
"devDependencies": {
2426
"babel-plugin-module-resolver": "^3.2.0",
25-
"babel-preset-expo": "^5.1.1",
27+
"babel-preset-expo": "^5.0.0",
2628
"glob-to-regexp": "^0.4.0"
2729
},
2830
"resolutions": {
29-
"**/@expo/vector-icons": "10.0.1",
30-
"**/@react-navigation/core": "3.4.0",
3131
"**/hoist-non-react-statics": "2.5.0",
32-
"**/react-native-tab-view": "2.0.3"
32+
"**/react-native-tab-view": "1.2.0",
33+
"**/prop-types": "15.6.1"
3334
}
3435
}

‎example/src/Shared/PhotoGrid.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import * as React from 'react';
2+
import { View, Image, ScrollView, Dimensions, StyleSheet } from 'react-native';
3+
import { withNavigation } from '@react-navigation/core';
4+
5+
@withNavigation
6+
class NavigationAwareScrollView extends React.Component {
7+
componentDidMount() {
8+
this.props.navigation.addListener('willFocus', () => {
9+
this._isFocused = true;
10+
});
11+
12+
this.props.navigation.addListener('willBlur', () => {
13+
this._isFocused = false;
14+
});
15+
16+
this.props.navigation.addListener('refocus', () => {
17+
if (this._isFocused) {
18+
this._component.scrollTo({ x: 0, y: 0 });
19+
}
20+
});
21+
}
22+
23+
setNativeProps(props) {
24+
this._component.setNativeProps(props);
25+
}
26+
27+
_setComponentRef(c) {
28+
this._component = c;
29+
}
30+
31+
getNode() {
32+
return this._component;
33+
}
34+
35+
render() {
36+
return (
37+
<ScrollView
38+
{...this.props}
39+
ref={view => {
40+
this._component = view;
41+
}}
42+
/>
43+
);
44+
}
45+
}
46+
47+
export default function PhotoGrid({ id }) {
48+
const PHOTOS = Array.from({ length: 24 }).map(
49+
(_, i) => `https://unsplash.it/300/300/?random&__id=${id}${i}`
50+
);
51+
52+
return (
53+
<NavigationAwareScrollView contentContainerStyle={styles.content}>
54+
{PHOTOS.map(uri => (
55+
<View key={uri} style={styles.item}>
56+
<Image source={{ uri }} style={styles.photo} />
57+
</View>
58+
))}
59+
</NavigationAwareScrollView>
60+
);
61+
}
62+
63+
const styles = StyleSheet.create({
64+
content: {
65+
flexDirection: 'row',
66+
flexWrap: 'wrap',
67+
padding: 4,
68+
},
69+
item: {
70+
height: Dimensions.get('window').width / 2,
71+
width: '50%',
72+
padding: 4,
73+
},
74+
photo: {
75+
flex: 1,
76+
resizeMode: 'cover',
77+
},
78+
});

0 commit comments

Comments
 (0)