From 8d49ee27717ad8c7fb56c14fa0acbad2ae16e981 Mon Sep 17 00:00:00 2001 From: Brent Vatne Date: Thu, 22 Aug 2019 17:46:03 -0700 Subject: [PATCH] feat: add theme support --- packages/core/.eslintignore | 1 + packages/core/example/App.js | 84 +- packages/core/example/app.json | 2 +- packages/core/example/package.json | 20 +- packages/core/example/src/EventsStack.js | 18 +- packages/core/example/src/SimpleStack.js | 23 +- packages/core/example/src/SimpleTabs.js | 18 +- packages/core/example/yarn.lock | 3544 ++++++++--------- packages/core/package.json | 5 +- packages/core/src/ThemeColors.ts | 18 + packages/core/src/index.js | 18 +- .../core/src/navigators/createNavigator.js | 38 +- .../core/src/routers/createConfigGetter.js | 5 +- packages/core/src/useTheme.ts | 4 + .../utils/getActiveChildNavigationOptions.js | 8 +- packages/core/src/views/NavigationConsumer.js | 5 - packages/core/src/views/NavigationContext.js | 6 - packages/core/src/views/NavigationContext.ts | 4 + packages/core/src/views/NavigationProvider.js | 5 - packages/core/src/views/ThemeContext.ts | 5 + packages/core/yarn.lock | 44 +- 21 files changed, 1889 insertions(+), 1986 deletions(-) create mode 100644 packages/core/src/ThemeColors.ts create mode 100644 packages/core/src/useTheme.ts delete mode 100644 packages/core/src/views/NavigationConsumer.js delete mode 100644 packages/core/src/views/NavigationContext.js create mode 100644 packages/core/src/views/NavigationContext.ts delete mode 100644 packages/core/src/views/NavigationProvider.js create mode 100644 packages/core/src/views/ThemeContext.ts diff --git a/packages/core/.eslintignore b/packages/core/.eslintignore index 7a73c50c..eb24ac1e 100644 --- a/packages/core/.eslintignore +++ b/packages/core/.eslintignore @@ -1,3 +1,4 @@ node_modules/ lib/ +dist/ coverage/ diff --git a/packages/core/example/App.js b/packages/core/example/App.js index 59aa9f36..21ef836e 100644 --- a/packages/core/example/App.js +++ b/packages/core/example/App.js @@ -1,7 +1,10 @@ import React from 'react'; -import { Asset, registerRootComponent } from 'expo'; -import { FlatList, I18nManager } from 'react-native'; -import { createAppContainer } from '@react-navigation/native'; +import { registerRootComponent } from 'expo'; +import { Asset } from 'expo-asset'; +import { TouchableOpacity, View, FlatList, I18nManager } from 'react-native'; +import { Themed, createAppContainer } from '@react-navigation/native'; +import { ThemeContext, ThemeColors } from '@react-navigation/core'; +import { MaterialCommunityIcons } from '@expo/vector-icons'; import { Assets as StackAssets, @@ -42,6 +45,7 @@ const data = [ Asset.loadAsync(StackAssets); class Home extends React.Component { + static contextType = ThemeContext; static navigationOptions = { title: 'Examples', }; @@ -50,6 +54,8 @@ class Home extends React.Component { this.props.navigation.navigate(item.routeName)} + style={{ backgroundColor: ThemeColors[this.context].bodyContent }} + titleStyle={{ color: ThemeColors[this.context].label }} /> ); @@ -57,13 +63,22 @@ class Home extends React.Component { render() { return ( - + <> + ( + + )} + renderItem={this._renderItem} + keyExtractor={this._keyExtractor} + data={data} + style={{ backgroundColor: ThemeColors[this.context].body }} + /> + + ); } } @@ -91,6 +106,51 @@ const Root = createStackNavigator( } ); -const App = createAppContainer(Root); -export default App; +const Navigation = createAppContainer(Root); + +const App = () => { + let [theme, setTheme] = React.useState('light'); + + return ( + + + + { + setTheme(theme === 'light' ? 'dark' : 'light'); + }} + > + + + + + + + ); +}; + registerRootComponent(App); diff --git a/packages/core/example/app.json b/packages/core/example/app.json index bf9a8fe4..4c98aa7a 100644 --- a/packages/core/example/app.json +++ b/packages/core/example/app.json @@ -3,7 +3,7 @@ "name": "React Navigation Core Example", "description": "Useful for experimenting with core and native together", "slug": "react-navigation-core-demo", - "sdkVersion": "32.0.0", + "sdkVersion": "33.0.0", "version": "1.0.0", "primaryColor": "#2196f3", "packagerOpts": { diff --git a/packages/core/example/package.json b/packages/core/example/package.json index 663d2abc..8db57bd7 100644 --- a/packages/core/example/package.json +++ b/packages/core/example/package.json @@ -10,24 +10,28 @@ "postinstall": "rm -rf node_modules/@react-navigation/core/{.git,node_modules,example}" }, "dependencies": { - "@react-navigation/native": "^3.4.1", - "expo": "~32.0.0", + "@expo/vector-icons": "10.0.5", + "@react-navigation/core": "3.5.0-alpha.7", + "@react-navigation/native": "^3.6.0-alpha.5", + "expo": "^33.0.7", + "expo-asset": "^5.0.1", + "expo-constants": "~5.0.1", "hoist-non-react-statics": "^3.3.0", + "react": "16.8.3", + "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz", + "react-native-paper": "^2.15.2", "path-to-regexp": "^3.0.0", "prop-types": "^15.7.2", "query-string": "^6.4.2", - "react": "16.5.0", "react-is": "^16.8.6", - "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.3.0", - "react-navigation-tabs": "^1.0.2" + "react-navigation-stack": "1.4.0-alpha.0", + "react-navigation-tabs": "1.2.0-alpha.0" }, "devDependencies": { "babel-preset-expo": "^5.1.1" }, "resolutions": { - "**/react": "16.5.0", + "**/react": "16.8.3", "**/hoist-non-react-statics": "3.3.0" } } diff --git a/packages/core/example/src/EventsStack.js b/packages/core/example/src/EventsStack.js index 0c141842..39769b6c 100644 --- a/packages/core/example/src/EventsStack.js +++ b/packages/core/example/src/EventsStack.js @@ -1,6 +1,7 @@ import React from 'react'; import { Button, ScrollView, View, Text } from 'react-native'; import { withNavigation } from '@react-navigation/core'; +import { Themed } from '@react-navigation/native'; import { createStackNavigator } from 'react-navigation-stack'; const getColorOfEvent = evt => { @@ -83,20 +84,17 @@ class SampleScreen extends React.Component { ref={view => { this.scrollView = view; }} - style={{ - flex: 1, - backgroundColor: '#fff', - }} + style={{ flex: 1 }} > - { this.props.navigation.push('PageTwo'); }} > Push - - + { const { push, goBack } = this.props.navigation; push('PageTwo'); @@ -106,14 +104,14 @@ class SampleScreen extends React.Component { }} > Push and Pop Quickly - - + { this.props.navigation.navigate('Home'); }} > Back to Examples - + ); } diff --git a/packages/core/example/src/SimpleStack.js b/packages/core/example/src/SimpleStack.js index e09703a0..d9c2d4f3 100644 --- a/packages/core/example/src/SimpleStack.js +++ b/packages/core/example/src/SimpleStack.js @@ -1,7 +1,9 @@ import React from 'react'; -import { Button, ScrollView, TouchableOpacity, View, Text } from 'react-native'; +import { Button, ScrollView, TouchableOpacity, View } from 'react-native'; import { MaterialIcons } from 'react-native-vector-icons'; import { createStackNavigator } from 'react-navigation-stack'; +import { Themed } from '@react-navigation/native'; +import { ThemeContext } from '@react-navigation/core'; const LOREM_PAGE_ONE = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in lacus malesuada tellus bibendum fringilla. Integer suscipit suscipit erat, sed molestie eros. Nullam fermentum odio vel mauris pulvinar accumsan. Duis blandit id nulla ac euismod. Nunc nec convallis mauris. Proin sit amet malesuada orci. Aliquam blandit mattis nisi ut eleifend. Morbi blandit ante neque, eu tincidunt est interdum in. Mauris pellentesque euismod nulla. Mauris posuere egestas nulla, sit amet eleifend quam egestas at. Maecenas odio erat, auctor eu consectetur eu, vulputate nec arcu. Praesent in felis massa. Nunc fermentum, massa vitae ultricies dictum, est mi posuere eros, sit amet posuere mi ante ac nulla. Etiam odio libero, tempor sit amet sagittis sed, fermentum ac lorem. Donec dignissim fermentum velit, ac ultrices nulla tristique vel. Suspendisse auctor elit vitae elementum auctor. Vestibulum gravida auctor facilisis. Vivamus rhoncus ornare magna, non pharetra diam porta ac. Aliquam et justo vitae neque congue dignissim. Etiam et dui euismod, cursus mauris in, aliquam nunc. Mauris elit nulla, rutrum non aliquam a, imperdiet a erat. Nullam molestie elit risus, in posuere dui maximus ut. Integer ac sapien molestie, vestibulum ligula ultricies, pellentesque nisl. Duis elementum, ante ac tincidunt cursus, odio leo lacinia purus, at posuere mauris diam suscipit lorem. In hac habitasse platea dictumst. Pellentesque sagittis nunc non ipsum porttitor pellentesque. Phasellus dapibus accumsan aliquam. Etiam feugiat vitae magna condimentum tincidunt. @@ -16,11 +18,12 @@ Nulla eu eros mi. Sed non lobortis risus. Donec fermentum augue ut scelerisque s Donec eget mi a justo congue faucibus eu sed odio. Morbi condimentum, nulla non iaculis lobortis, mauris diam facilisis nisi, in tincidunt ex nulla bibendum ipsum. Nam interdum turpis eget leo convallis, lobortis sollicitudin elit posuere. Aliquam erat volutpat. Suspendisse in nibh interdum nibh porttitor accumsan. Nullam blandit, neque sed lacinia dapibus, nisl lacus egestas odio, sit amet molestie libero nibh ac massa. Quisque tempor placerat elit, non volutpat elit pellentesque quis. Etiam sit amet nisi at ex ornare commodo non vel tortor. Mauris ac dictum sem. Donec feugiat id augue at tempus. Nunc non aliquam odio, quis luctus augue. Maecenas vulputate urna aliquet ultricies tincidunt.`; class LoremScreen extends React.Component { - static navigationOptions = ({ navigation }) => ({ + static navigationOptions = ({ navigation, theme }) => ({ title: 'Lorem Ipsum', headerRight: navigation.getParam('nextPage') ? (