Skip to content

Commit

Permalink
Release 3.12.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@brentvatne
brentvatne committed Aug 26, 2019
1 parent c636f5a commit 3009429
Show file tree
Hide file tree
Showing 18 changed files with 1,812 additions and 2,154 deletions.
89 changes: 76 additions & 13 deletions examples/NavigationPlayground/App.tsx
View file
Expand Up @@ -5,6 +5,7 @@ import {
Platform,
StatusBar,
StyleSheet,
TouchableOpacity,
Text,
View,
} from 'react-native';
Expand All @@ -13,10 +14,15 @@ import {
RectButton,
} from 'react-native-gesture-handler';
import {
SupportedThemes,
ThemeColors,
ThemeContext,
Themed,
createAppContainer,
createStackNavigator,
SafeAreaView,
} from 'react-navigation';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import CustomTabs from './src/CustomTabs';
import CustomTabUI from './src/CustomTabUI';
import Drawer from './src/Drawer';
Expand Down Expand Up @@ -173,6 +179,9 @@ interface State {
}

class MainScreen extends React.Component<any, State> {
static contextType = ThemeContext;
context!: React.ContextType<typeof ThemeContext>;

state = {
scrollY: new Animated.Value(0),
};
Expand Down Expand Up @@ -218,7 +227,7 @@ class MainScreen extends React.Component<any, State> {
<View style={{ flex: 1 }}>
<NativeViewGestureHandler>
<Animated.ScrollView
style={{ flex: 1, backgroundColor: '#eee' }}
style={{ flex: 1, backgroundColor: ThemeColors[this.context].body }}
scrollEventThrottle={1}
onScroll={Animated.event(
[
Expand Down Expand Up @@ -263,7 +272,11 @@ class MainScreen extends React.Component<any, State> {
forceInset={{ top: 'never', bottom: 'always' }}
style={{ backgroundColor: '#eee' }}
>
<View style={{ backgroundColor: '#fff' }}>
<View
style={{
backgroundColor: ThemeColors[this.context].bodyContent,
}}
>
{Object.keys(ExampleRoutes).map((routeName: string) => (
<RectButton
key={routeName}
Expand All @@ -283,10 +296,17 @@ class MainScreen extends React.Component<any, State> {
}
}}
>
<View style={styles.item}>
<Text style={styles.title}>
<View
style={[
styles.item,
this.context === 'dark'
? styles.itemDark
: styles.itemLight,
]}
>
<Themed.Text style={styles.title}>
{ExampleInfo[routeName].name}
</Text>
</Themed.Text>
<Text style={styles.description}>
{ExampleInfo[routeName].description}
</Text>
Expand All @@ -306,7 +326,7 @@ class MainScreen extends React.Component<any, State> {
}
}

const AppNavigator = createAppContainer(
const Navigation = createAppContainer(
createStackNavigator(
{
...ExampleRoutes,
Expand All @@ -327,11 +347,50 @@ const AppNavigator = createAppContainer(
)
);

export default class App extends React.Component {
render() {
return <AppNavigator /* persistenceKey="if-you-want-it" */ />;
}
}
export default () => {
let [theme, setTheme] = React.useState<SupportedThemes>('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>
);
};

const styles = StyleSheet.create({
backgroundUnderlay: {
Expand Down Expand Up @@ -377,11 +436,16 @@ const styles = StyleSheet.create({
width: 120,
},
item: {
borderBottomColor: '#ddd',
borderBottomWidth: StyleSheet.hairlineWidth,
paddingHorizontal: 16,
paddingVertical: 12,
},
itemLight: {
borderBottomColor: ThemeColors.light.bodyBorder,
},
itemDark: {
borderBottomColor: ThemeColors.dark.bodyBorder,
},
statusBarUnderlay: {
backgroundColor: '#673ab7',
height: 20,
Expand All @@ -391,7 +455,6 @@ const styles = StyleSheet.create({
top: 0,
},
title: {
color: '#444',
fontSize: 16,
fontWeight: 'bold',
},
Expand Down
5 changes: 3 additions & 2 deletions examples/NavigationPlayground/app.json
View file
Expand Up @@ -4,7 +4,7 @@
"description": "Explore various patterns for navigation",
"slug": "NavigationPlayground",
"privacy": "public",
"sdkVersion": "32.0.0",
"sdkVersion": "33.0.0",
"platforms": [
"ios",
"android"
Expand All @@ -24,7 +24,8 @@
"**/*"
],
"ios": {
"supportsTablet": true
"supportsTablet": true,
"bundleIdentifier": "org.reactnavigation.playground"
}
}
}
8 changes: 4 additions & 4 deletions examples/NavigationPlayground/package.json
View file
Expand Up @@ -14,12 +14,12 @@
"release": "release-it"
},
"dependencies": {
"expo": "^32.0.0",
"expo": "^33.0.7",
"expo-blur": "~5.0.1",
"patch-package": "^6.0.5",
"postinstall-postinstall": "^2.0.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-blur": "^3.2.2",
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-gesture-handler": "^1.1.0",
"react-native-iphone-x-helper": "^1.2.0",
"react-native-vector-icons": "^6.1.0",
Expand Down
59 changes: 0 additions & 59 deletions examples/NavigationPlayground/patches/react-native-gesture-handler+1.1.0.patch
View file

This file was deleted.

20 changes: 15 additions & 5 deletions examples/NavigationPlayground/src/CustomTabUI.tsx
View file
Expand Up @@ -11,7 +11,9 @@ import {
import Ionicons from 'react-native-vector-icons/Ionicons';
import {
MaterialTopTabBar,
Themed,
createMaterialTopTabNavigator,
ThemeContext,
NavigationScreenProp,
NavigationState,
SafeAreaView,
Expand Down Expand Up @@ -45,7 +47,7 @@ class MyHomeScreen extends React.Component<Props> {
const { navigation } = this.props;
return (
<SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
<Text>Home Screen</Text>
<Themed.Text>Home Screen</Themed.Text>
<Button
onPress={() => navigation.navigate('Home')}
title="Go to home tab"
Expand Down Expand Up @@ -79,7 +81,7 @@ class StarredScreen extends React.Component<Props> {
const { navigation } = this.props;
return (
<SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
<Text>Starred Screen</Text>
<Themed.Text>Starred Screen</Themed.Text>
<Button
onPress={() => navigation.navigate('Home')}
title="Go to home tab"
Expand Down Expand Up @@ -132,7 +134,7 @@ class FeaturedScreen extends React.Component<Props> {
const { navigation } = this.props;
return (
<SafeAreaView forceInset={{ horizontal: 'always', top: 'always' }}>
<Text>Featured Screen</Text>
<Themed.Text>Featured Screen</Themed.Text>
<Button
onPress={() => navigation.navigate('Home')}
title="Go to home tab"
Expand Down Expand Up @@ -160,6 +162,8 @@ const SimpleTabs = createMaterialTopTabNavigator(
);

class TabNavigator extends React.Component<Props> {
static contextType = ThemeContext;

static router = SimpleTabs.router;
componentWillUpdate() {
LayoutAnimation.easeInEaseOut();
Expand All @@ -175,7 +179,7 @@ class TabNavigator extends React.Component<Props> {
style={{
height: 50,
borderTopWidth: StyleSheet.hairlineWidth,
backgroundColor: '#000',
backgroundColor: this.context === 'light' ? '#000' : '#fff',
alignItems: 'center',
justifyContent: 'center',
}}
Expand All @@ -186,7 +190,13 @@ class TabNavigator extends React.Component<Props> {
//
}}
>
<Text style={{ fontSize: 20, color: '#fff', fontWeight: 'bold' }}>
<Text
style={{
fontSize: 20,
color: this.context === 'light' ? '#fff' : '#000',
fontWeight: 'bold',
}}
>
Check out
</Text>
</TouchableOpacity>
Expand Down
19 changes: 13 additions & 6 deletions examples/NavigationPlayground/src/CustomTabs.tsx
View file
Expand Up @@ -6,9 +6,12 @@ import {
NavigationState,
SafeAreaView,
TabRouter,
Themed,
useTheme,
createAppContainer,
NavigationScreenProp,
} from 'react-navigation';
import { createAppContainer } from 'react-navigation';
import { NavigationScreenProp } from 'react-navigation';

import { Button } from './commonComponents/ButtonWithMargin';
import SampleText from './SampleText';

Expand All @@ -29,7 +32,7 @@ const MyNavScreen = ({
title="Go back"
/>
</SafeAreaView>
<StatusBar barStyle="default" />
<Themed.StatusBar />
</ScrollView>
);

Expand Down Expand Up @@ -65,13 +68,12 @@ const CustomTabBar = ({
style={styles.tab}
key={route.routeName}
>
<Text>{route.routeName}</Text>
<Themed.Text>{route.routeName}</Themed.Text>
</BorderlessButton>
))}
</SafeAreaView>
);
};

// @todo - how does the type definition for a custom navigator work?
class CustomTabView extends React.Component<any> {
render() {
Expand Down Expand Up @@ -129,4 +131,9 @@ const styles = StyleSheet.create({
},
});

export default CustomTabs;
export default () => {
// Need to thread the theme through to detached nested navigator
let theme = useTheme();

return <CustomTabs detached theme={theme} />;
};

0 comments on commit 3009429

Please sign in to comment.