diff --git a/.circleci/config.yml b/.circleci/config.yml index 8335cd671..5e05d4bc4 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -32,19 +32,21 @@ jobs: - persist_to_workspace: root: . paths: . - lint: + lint-and-typecheck: <<: *defaults steps: - attach_workspace: at: ~/project - run: | - yarn run lint + yarn lint + yarn typescript unit-tests: <<: *defaults steps: - attach_workspace: at: ~/project - - run: yarn test --coverage + - run: | + yarn test --coverage - store_artifacts: path: coverage destination: coverage @@ -60,7 +62,7 @@ workflows: build-and-test: jobs: - install-dependencies - - lint: + - lint-and-typecheck: requires: - install-dependencies - unit-tests: diff --git a/.eslintignore b/.eslintignore index f41745234..cbf33d7a7 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,3 +1,4 @@ node_modules/ coverage/ lib/ +dist/ diff --git a/.eslintrc b/.eslintrc index af32e8586..ca6cad0ac 100644 --- a/.eslintrc +++ b/.eslintrc @@ -7,6 +7,7 @@ "react": { "version": "detect" }, + "import/core-modules": ["react-native-screens"], }, "env": { @@ -15,7 +16,7 @@ }, "rules": { - "import/no-unresolved": "off", + "import/named": "off", "react/sort-comp": "off", "jest/no-disabled-tests": "off", } diff --git a/example/App.js b/example/App.js index 80d4dee96..8ef213865 100644 --- a/example/App.js +++ b/example/App.js @@ -1,16 +1,25 @@ import * as React from 'react'; import { Asset } from 'expo-asset'; -import { FlatList, I18nManager } from 'react-native'; +import { + FlatList, + I18nManager, + StatusBar, + View, + TouchableOpacity, +} from 'react-native'; import { createAppContainer, SafeAreaView, ScrollView, -} from '@react-navigation/native'; + ThemeContext, + ThemeColors, +} from 'react-navigation'; import { Assets as StackAssets, createStackNavigator, } from 'react-navigation-stack'; import { List, Divider } from 'react-native-paper'; +import { MaterialCommunityIcons } from '@expo/vector-icons'; import FullScreen from './src/FullScreen'; import SimpleStack from './src/SimpleStack'; @@ -29,6 +38,7 @@ import { } from './src/HeaderBackgrounds'; // Comment the following two lines to stop using react-native-screens +// eslint-disable-next-line import/no-unresolved import { useScreens } from 'react-native-screens'; // Uncomment the following line to force RTL. Requires closing and re-opening @@ -87,6 +97,8 @@ const data = [ Asset.loadAsync(StackAssets); class Home extends React.Component { + static contextType = ThemeContext; + static navigationOptions = { title: 'Examples', }; @@ -95,6 +107,8 @@ class Home extends React.Component { this.props.navigation.navigate(item.routeName)} + style={{ backgroundColor: ThemeColors[this.context].bodyContent }} + titleStyle={{ color: ThemeColors[this.context].label }} /> ); @@ -102,14 +116,25 @@ class Home extends React.Component { render() { return ( - } - data={data} - style={{ backgroundColor: '#fff' }} - /> + <> + ( + + )} + renderItem={this._renderItem} + keyExtractor={this._keyExtractor} + renderScrollComponent={props => } + data={data} + style={{ backgroundColor: ThemeColors[this.context].body }} + /> + + ); } } @@ -146,7 +171,52 @@ const Root = createStackNavigator( ); useScreens(); -export default createAppContainer(Root); +let AppContainer = createAppContainer(Root); + +export default () => { + let [theme, setTheme] = React.useState('light'); + + return ( + + + + { + setTheme(theme === 'light' ? 'dark' : 'light'); + }} + > + + + + + + + ); +}; // Uncomment this to test immediate transitions // import ImmediateTransition from './src/ImmediateTransition'; diff --git a/example/metro.config.js b/example/metro.config.js index 00afc2158..67a7d10ed 100644 --- a/example/metro.config.js +++ b/example/metro.config.js @@ -29,6 +29,7 @@ module.exports = { providesModuleNodeModules: [ '@expo/vector-icons', '@babel/runtime', + 'react-navigation', ...projectDependencies, ], }, diff --git a/example/package.json b/example/package.json index 116aafbad..4ee9ec428 100644 --- a/example/package.json +++ b/example/package.json @@ -9,19 +9,22 @@ "ios": "expo start --ios" }, "dependencies": { - "@react-navigation/core": "3.4.1", - "@react-navigation/native": "^3.4.1", - "expo": "^33.0.0", + "@expo/vector-icons": "10.0.5", + "react-navigation": "^4.0.1", + "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", - "react-navigation-drawer": "^1.2.1", - "react-navigation-tabs": "*" + "react-navigation-drawer": "^1.3.0-alpha.0", + "react-navigation-tabs": "1.2.0-alpha.0" }, "devDependencies": { "babel-plugin-module-resolver": "^3.2.0" + }, + "resolutions": { + "**/react-native-screens": "1.0.0-alpha.22" } } diff --git a/example/src/HeaderBackgrounds.js b/example/src/HeaderBackgrounds.js index f77e06e67..571960620 100644 --- a/example/src/HeaderBackgrounds.js +++ b/example/src/HeaderBackgrounds.js @@ -1,6 +1,7 @@ import * as React from 'react'; -import { StyleSheet, View, Text } from 'react-native'; +import { StatusBar, StyleSheet, View } from 'react-native'; import { createStackNavigator } from 'react-navigation-stack'; +import { Themed } from 'react-navigation'; function createHeaderBackgroundExample(options = {}) { return createStackNavigator( @@ -8,12 +9,13 @@ function createHeaderBackgroundExample(options = {}) { Login: { screen: ({ navigation }) => ( - navigation.navigate('Games')} > Login Screen - + + ), navigationOptions: { @@ -27,12 +29,13 @@ function createHeaderBackgroundExample(options = {}) { Games: { screen: ({ navigation }) => ( - navigation.navigate('Main')} > Games Screen - + + ), navigationOptions: { @@ -46,9 +49,13 @@ function createHeaderBackgroundExample(options = {}) { Main: { screen: ({ navigation }) => ( - navigation.navigate('My')}> + navigation.navigate('My')} + > Main Screen - + + ), navigationOptions: { @@ -58,12 +65,13 @@ function createHeaderBackgroundExample(options = {}) { My: { screen: ({ navigation }) => ( - navigation.navigate('News')} > My Screen - + + ), navigationOptions: { @@ -73,9 +81,10 @@ function createHeaderBackgroundExample(options = {}) { News: { screen: () => ( - {}}> + {}}> News Screen - + + ), navigationOptions: { @@ -100,7 +109,6 @@ export const HeaderBackgroundFade = createHeaderBackgroundExample({ const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: '#F5FCFF', justifyContent: 'center', alignItems: 'center', }, diff --git a/example/src/HeaderPreset.js b/example/src/HeaderPreset.js index 4884993ba..78315c70e 100644 --- a/example/src/HeaderPreset.js +++ b/example/src/HeaderPreset.js @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Button, StatusBar } from 'react-native'; -import { SafeAreaView } from '@react-navigation/native'; +import { Button } from 'react-native'; +import { SafeAreaView, Themed } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; class HomeScreen extends React.Component { @@ -20,7 +20,7 @@ class HomeScreen extends React.Component { title="Push screen with no header" />