Skip to content

Commit

Permalink
chore: upgrade react navigation to v5 (#1417)
Browse files Browse the repository at this point in the history
  • Loading branch information
@satya164 @Trancever
satya164 authored and Trancever committed Oct 23, 2019
1 parent 99d091b commit 6234c9a
Show file tree
Hide file tree
Showing 12 changed files with 622 additions and 1,209 deletions.
5 changes: 1 addition & 4 deletions example/App.web.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
import * as React from 'react';
import { render } from 'react-dom';
import App from './src/index';
import './assets/styles/fonts.css';

render(<App />, document.getElementById('root'));
export { default } from './src/index';
25 changes: 15 additions & 10 deletions example/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,32 @@
"start": "expo start",
"android": "expo android",
"ios": "expo ios",
"web": "webpack-dev-server --open"
"web": "expo start:web"
},
"main": "node_modules/expo/AppEntry.js",
"dependencies": {
"@callstack/react-theme-provider": "^3.0.2",
"@reach/router": "^1.2.1",
"@react-native-community/masked-view": "^0.1.1",
"@react-navigation/core": "^5.0.0-alpha.17",
"@react-navigation/drawer": "^5.0.0-alpha.16",
"@react-navigation/native": "^5.0.0-alpha.13",
"@react-navigation/stack": "^5.0.0-alpha.29",
"expo": "^35.0.0",
"expo-font": "~7.0.0",
"expo-keep-awake": "~7.0.0",
"file-loader": "^4.0.0",
"react": "16.8.3",
"react-art": "^16.7.0",
"react-dom": "16.8.3",
"react-lifecycles-compat": "^3.0.4",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"react-native-gesture-handler": "~1.3.0",
"react-native-reanimated": "~1.2.0",
"react-native-safe-area-context": "~0.3.6",
"react-native-safe-area-view": "^0.12.0",
"react-native-screens": "~1.0.0-alpha.23",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.7",
"react-navigation": "^2.18.2",
"typeface-roboto": "^0.0.54"
},
"devDependencies": {
Expand All @@ -33,15 +44,9 @@
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.3.3",
"@types/react-navigation": "^2.13.10",
"babel-loader": "^8.0.5",
"babel-plugin-module-resolver": "^3.1.1",
"babel-preset-expo": "^7.0.0",
"css-loader": "^3.0.0",
"expo-cli": "^3.2.3",
"style-loader": "^0.23.1",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
"expo-cli": "^3.4.1"
},
"resolutions": {
"**/color": "3.1.2",
Expand Down
4 changes: 0 additions & 4 deletions example/src/ExampleList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,10 +74,6 @@ export const examples: { [key: string]: any } = {
const data = Object.keys(examples).map(id => ({ id, data: examples[id] }));

class ExampleList extends React.Component<Props> {
static navigationOptions = {
title: 'Examples',
};

_renderItem = ({ item }: any) => (
<List.Item
title={item.data.title}
Expand Down
221 changes: 70 additions & 151 deletions example/src/Examples/AppbarExample.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,173 +1,94 @@
import * as React from 'react';
import { View, Platform, StyleSheet } from 'react-native';
import { StackNavigationProp } from '@react-navigation/stack';
import {
Colors,
Appbar,
FAB,
Switch,
Paragraph,
withTheme,
Theme,
useTheme,
} from 'react-native-paper';

type Props = {
navigation: any;
theme: Theme;
};

const initialParams = {
showLeftIcon: true,
showSubtitle: true,
showSearchIcon: true,
showMoreIcon: true,
showExactTheme: false,
navigation: StackNavigationProp<{}>;
};

const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';

class AppbarExample extends React.Component<Props> {
static title = 'Appbar';
static navigationOptions = ({ navigation }: any) => {
const params = { ...initialParams, ...navigation.state.params };

return {
header: (
<Appbar.Header
style={params.showCustomColor ? { backgroundColor: '#ffff00' } : null}
theme={{
mode: params.showExactTheme ? 'exact' : 'adaptive',
}}
>
{params.showLeftIcon && (
<Appbar.BackAction onPress={() => navigation.goBack()} />
)}
<Appbar.Content
title="Title"
subtitle={params.showSubtitle ? 'Subtitle' : null}
/>
{params.showSearchIcon && (
<Appbar.Action icon="magnify" onPress={() => {}} />
)}
{params.showMoreIcon && (
<Appbar.Action icon={MORE_ICON} onPress={() => {}} />
)}
</Appbar.Header>
),
};
};
export default function AppbarExample({ navigation }: Props) {
const { colors } = useTheme();

render() {
const {
navigation,
theme: {
colors: { background },
},
} = this.props;
const params = { ...initialParams, ...navigation.state.params };
const [showLeftIcon, setShowLeftIcon] = React.useState(true);
const [showSubtitle, setShowSubtitle] = React.useState(true);
const [showSearchIcon, setShowSearchIcon] = React.useState(true);
const [showMoreIcon, setShowMoreIcon] = React.useState(true);
const [showCustomColor, setShowCustomColor] = React.useState(false);
const [showExactTheme, setShowExactTheme] = React.useState(false);

return (
<View
style={[
styles.container,
{
backgroundColor: background,
},
]}
navigation.setOptions({
header: () => (
<Appbar.Header
style={showCustomColor ? { backgroundColor: '#ffff00' } : null}
theme={{
mode: showExactTheme ? 'exact' : 'adaptive',
}}
>
<View style={styles.row}>
<Paragraph>Left icon</Paragraph>
<Switch
value={params.showLeftIcon}
onValueChange={value =>
navigation.setParams({
showLeftIcon: value,
})
}
/>
</View>
<View style={styles.row}>
<Paragraph>Subtitle</Paragraph>
<Switch
value={params.showSubtitle}
onValueChange={value =>
navigation.setParams({
showSubtitle: value,
})
}
/>
</View>
<View style={styles.row}>
<Paragraph>Search icon</Paragraph>
<Switch
value={params.showSearchIcon}
onValueChange={value =>
navigation.setParams({
showSearchIcon: value,
})
}
/>
</View>
<View style={styles.row}>
<Paragraph>More icon</Paragraph>
<Switch
value={params.showMoreIcon}
onValueChange={value =>
navigation.setParams({
showMoreIcon: value,
})
}
/>
</View>
<View style={styles.row}>
<Paragraph>Custom Color</Paragraph>
<Switch
value={params.showCustomColor}
onValueChange={value =>
navigation.setParams({
showCustomColor: value,
})
}
/>
</View>
<View style={styles.row}>
<Paragraph>Adaptive Dark Theme</Paragraph>
<Switch
value={!params.showExactTheme}
onValueChange={value =>
navigation.setParams({
showExactTheme: !value,
})
}
/>
</View>
<View style={styles.row}>
<Paragraph>Exact Dark Theme</Paragraph>
<Switch
value={params.showExactTheme}
onValueChange={value =>
navigation.setParams({
showExactTheme: value,
})
}
/>
</View>
<Appbar
style={[styles.bottom]}
theme={{
mode: params.showExactTheme ? 'exact' : 'adaptive',
}}
>
<Appbar.Action icon="archive" onPress={() => {}} />
<Appbar.Action icon="email" onPress={() => {}} />
<Appbar.Action icon="label" onPress={() => {}} />
<Appbar.Action icon="delete" onPress={() => {}} />
</Appbar>
<FAB icon="reply" onPress={() => {}} style={styles.fab} />
{showLeftIcon && (
<Appbar.BackAction onPress={() => navigation.goBack()} />
)}
<Appbar.Content
title="Title"
subtitle={showSubtitle ? 'Subtitle' : null}
/>
{showSearchIcon && <Appbar.Action icon="magnify" onPress={() => {}} />}
{showMoreIcon && <Appbar.Action icon={MORE_ICON} onPress={() => {}} />}
</Appbar.Header>
),
});

return (
<View style={[styles.container, { backgroundColor: colors.background }]}>
<View style={styles.row}>
<Paragraph>Left icon</Paragraph>
<Switch value={showLeftIcon} onValueChange={setShowLeftIcon} />
</View>
<View style={styles.row}>
<Paragraph>Subtitle</Paragraph>
<Switch value={showSubtitle} onValueChange={setShowSubtitle} />
</View>
<View style={styles.row}>
<Paragraph>Search icon</Paragraph>
<Switch value={showSearchIcon} onValueChange={setShowSearchIcon} />
</View>
);
}
<View style={styles.row}>
<Paragraph>More icon</Paragraph>
<Switch value={showMoreIcon} onValueChange={setShowMoreIcon} />
</View>
<View style={styles.row}>
<Paragraph>Custom Color</Paragraph>
<Switch value={showCustomColor} onValueChange={setShowCustomColor} />
</View>
<View style={styles.row}>
<Paragraph>Exact Dark Theme</Paragraph>
<Switch value={showExactTheme} onValueChange={setShowExactTheme} />
</View>
<Appbar
style={[styles.bottom]}
theme={{ mode: showExactTheme ? 'exact' : 'adaptive' }}
>
<Appbar.Action icon="archive" onPress={() => {}} />
<Appbar.Action icon="email" onPress={() => {}} />
<Appbar.Action icon="label" onPress={() => {}} />
<Appbar.Action icon="delete" onPress={() => {}} />
</Appbar>
<FAB icon="reply" onPress={() => {}} style={styles.fab} />
</View>
);
}

AppbarExample.title = 'Appbar';

const styles = StyleSheet.create({
container: {
flex: 1,
Expand All @@ -193,5 +114,3 @@ const styles = StyleSheet.create({
bottom: 28,
},
});

export default withTheme(AppbarExample);
11 changes: 6 additions & 5 deletions example/src/Examples/MenuExample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
Platform,
GestureResponderEvent,
} from 'react-native';
import { StackNavigationProp } from '@react-navigation/stack';
import {
Menu,
Appbar,
Expand All @@ -25,16 +26,12 @@ type State = {

type Props = {
theme: Theme;
navigation: any;
navigation: StackNavigationProp<{}>;
};

const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';

class MenuExample extends React.Component<Props, State> {
static navigationOptions = {
header: null,
};

state = {
visible1: false,
visible2: false,
Expand Down Expand Up @@ -75,6 +72,10 @@ class MenuExample extends React.Component<Props, State> {

const { visible1, visible2, visible3, contextualMenuCoord } = this.state;

navigation.setOptions({
headerShown: false,
});

return (
<View style={styles.screen}>
<Appbar.Header>
Expand Down

0 comments on commit 6234c9a

Please sign in to comment.