Merge branch 'master' into issue/3258

* master: Expo example (#3287) Update README.md (#3275) # Conflicts: # examples/expo/components/DrawerContent.js # examples/expo/navigation/AppNavigator.js # examples/expo/package.json # examples/expo/screens/HomeScreen.js # examples/expo/yarn.lock
aksonov · Sep 21, 2018 · 4e3d11b · 4e3d11b
2 parents 63d703d + 47d54c7
commit 4e3d11b
Show file tree

Hide file tree

Showing 9 changed files with 812 additions and 973 deletions.
diff --git a/README.md b/README.md
@@ -32,7 +32,7 @@ const App = () => (
 );
 ```
 
-...and navigate from scene to scene with a simple, powerful API
+...and navigate from one scene to another scene with a simple and powerful API.
 
 ```js
 // Login.js
@@ -60,16 +60,18 @@ For a full listing of the API, [view the API docs](https://github.com/aksonov/re
 git clone https://github.com/aksonov/react-native-router-flux.git
 cd react-native-router-flux/Example
 
-# Install dependencies
+# Installing dependencies
 yarn
+or
+npm i
 
 # Run it
 react-native run-ios
 ```
 
 ## v4 Features
 * Based on latest [React Navigation](https://reactnavigation.org) API
-* Separate navigation logic from presentation. You may change now navigation state directly from your business logic code - stores/reducers/etc. navigationStore
+* Separate navigation logic from presentation. You may now change navigation state directly from your business logic code - stores/reducers/etc. navigationStore
 * Built-in state machine (v3 `Switch` replacement)
   * Each `Scene` with `component` defined can have `onEnter`/`onExit`/`on` handlers.
   * `onEnter`/`on` handler can be async.
@@ -78,10 +80,10 @@ react-native run-ios
   * in case of handler's failure, `failure` prop (if defined) will be run.
   * Combining `onEnter`, `onExit`, `success`, and `failure` makes patterns like authentication, data validation, and conditional transitions simple and intuitive.
 * [MobX](https://mobx.js.org/)-friendly: all scenes are wrapped with `observer`. You may subscribe to `navigationStore` (`Actions` in v3) and observe current navigation state. Not applicable to Redux.
-* Flexible nav bar customization not currently allowed by React Navigation:
+* Flexible Nav bar customization, currently not allowed by React Navigation:
 https://github.com/react-community/react-navigation/issues/779
 * Drawer support (provided by React Navigation)
-* Inheritance of scene attributes allow you to avoid any code/attribute duplications. Adding `rightTitle` to a scene will apply to all child scenes. See example app.
+* Inheritance of scene attributes allow you to avoid any code/attribute duplications. Adding `rightTitle` to a scene will apply to all child scenes simultaneously. See example app.
 * Access to your app navigations state as simple as `Actions.state`.
 * Use `Actions.currentScene` to get name of current scene.
 

diff --git a/examples/expo/components/DrawerContent.js b/examples/expo/components/DrawerContent.js
@@ -29,28 +29,10 @@ class DrawerContent extends React.Component {
   render() {
     return (
       <View style={styles.container}>
-        {/* <Text>Drawer Content</Text>
-        <Button onPress={Actions.closeDrawer}>Back</Button> */}
-        <Text>Title: {this.props.title}</Text>
-        {this.props.name === 'tab_1_1' && (
-          <Button onPress={Actions.tab_1_2}>next screen for tab1_1</Button>
-        )}
-        {this.props.name === 'tab_2_1' && (
-          <Button onPress={Actions.tab_2_2}>next screen for tab2_1</Button>
-        )}
         <Button onPress={Actions.pop}>Back</Button>
-        <Button onPress={Actions.tab_1}>Switch to tab1</Button>
-        <Button onPress={Actions.tab_2}>Switch to tab2</Button>
-        <Button onPress={Actions.tab_3}>Switch to tab3</Button>
-        <Button onPress={Actions.tab_4_1}>Switch to tab4</Button>
-        <Button
-          onPress={() => {
-            Actions.___tab_5({ data: 'test!' });
-          }}>
-          Switch to tab5 with data
-        </Button>
-        <Button onPress={Actions.echo}>Push Clone Scene (EchoView)</Button>
-        <Button onPress={Actions.launch}>Reset back to launch</Button>
+        <Button onPress={Actions.main_home}>Switch to Home</Button>
+        <Button onPress={Actions.main_links}>Switch to Links</Button>
+        <Button onPress={Actions.main_settings}>Switch to Settings</Button>
       </View>
     );
   }

diff --git a/examples/expo/navigation/AppNavigator.js b/examples/expo/navigation/AppNavigator.js
@@ -14,7 +14,12 @@ import {
   Stack,
   Lightbox,
 } from 'react-native-router-flux';
-import MainTabNavigator from './MainTabNavigator';
+import TabBarIcon from '../components/TabBarIcon';
+import MenuIcon from '../components/MenuIcon';
+import DrawerContent from '../components/DrawerContent';
+import HomeScreen from '../screens/HomeScreen';
+import LinksScreen from '../screens/LinksScreen';
+import SettingsScreen from '../screens/SettingsScreen';
 
 const styles = StyleSheet.create({
   container: {
@@ -54,7 +59,7 @@ const prefix = Platform.OS === 'android' ? 'mychat://mychat/' : 'mychat://';
 
 const transitionConfig = () => ({
   screenInterpolator:
-    StackViewStyleInterpolator.CardStackStyleInterpolator.forFadeFromBottomAndroid,
+    StackViewStyleInterpolator.forFadeFromBottomAndroid,
 });
 
 const AppNavigator = () => (
@@ -66,7 +71,56 @@ const AppNavigator = () => (
     <Overlay key="overlay">
       <Modal key="modal" hideNavBar transitionConfig={transitionConfig}>
         <Lightbox key="lightbox">
-          <MainTabNavigator />
+          <Stack key="root" hideNavBar titleStyle={{ alignSelf: 'center' }}>
+
+            <Drawer
+              hideNavBar
+              key="drawer"
+              onExit={() => {
+                console.log('Drawer closed');
+              }}
+              onEnter={() => {
+                console.log('Drawer opened');
+              }}
+              contentComponent={DrawerContent}
+              drawerIcon={MenuIcon}
+              drawerWidth={300}>
+              <Scene hideNavBar>
+                <Tabs
+                  key="tabbar"
+                  backToInitial
+                  onTabOnPress={() => {
+                    console.log('Back to initial and also print this');
+                  }}
+                  swipeEnabled
+                  tabBarStyle={styles.tabBarStyle}
+                  activeBackgroundColor="white"
+                  inactiveBackgroundColor="rgba(255, 0, 0, 0.5)">
+                  <Scene
+                    key="main_home"
+                    component={HomeScreen}
+                    title="Home"
+                    tabBarLabel="Home"
+                    icon={TabBarIcon}
+                  />
+                  <Scene
+                    key="main_links"
+                    component={LinksScreen}
+                    title="Links"
+                    tabBarLabel="Links"
+                    icon={TabBarIcon}
+                  />
+                  <Scene
+                    key="main_settings"
+                    component={SettingsScreen}
+                    title="Settings"
+                    tabBarLabel="Settings"
+                    icon={TabBarIcon}
+                  />
+                </Tabs>
+              </Scene>
+            </Drawer>
+          </Stack>
         </Lightbox>
       </Modal>
     </Overlay>

diff --git a/examples/expo/package.json b/examples/expo/package.json
@@ -15,27 +15,38 @@
   "jest": {
     "preset": "jest-expo"
   },
+  "resolutions": {
+    "*/@babel/cli": "7.0.0",
+    "*/@babel/code-frame": "7.0.0",
+    "*/@babel/core": "7.1.0",
+    "*/@babel/generator": "7.0.0",
+    "*/@babel/helper-split-export-declaration": "7.0.0",
+    "*/@babel/template": "7.0.0"
+  },
   "dependencies": {
     "@expo/samples": "2.1.1",
-    "expo": "30.0.0",
+    "expo": "^30.0.1",
     "react": "16.3.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
     "react-native-button": "^2.3.0",
     "react-native-router-flux": "file:../..",
     "react-native-router-flux-cli": "file:../../packages/react-native-router-flux-cli",
-    "react-navigation": "^2.9.3",
+    "react-navigation": "^2.14.2",
     "react-navigation-stack": "^0.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.1",
+    "@babel/core": "7.1.0",
     "babel-core": "^7.0.0-0",
-    "eslint": "^4.4.1",
-    "eslint-config-universe": "^1.0.7",
-    "jest-expo": "29.0.0",
+    "eslint": "^5.6.0",
+    "eslint-config-universe": "^2.0.0-alpha.0",
+    "jest-expo": "^30.0.0",
     "prettier": "^1.14.2",
-    "react-devtools": "^3.3.4"
+    "react-native-debugger-open": "^0.3.17"
   },
   "eslintConfig": {
-    "extends": "universe/native"
+    "extends": [
+      "universe/node",
+      "universe/native"
+    ]
   }
 }
diff --git a/examples/expo/screens/HomeScreen.js b/examples/expo/screens/HomeScreen.js
@@ -16,7 +16,6 @@ import { MonoText } from '../components/StyledText';
 
 export default class HomeScreen extends React.Component {
   static navigationOptions = {
-    header: null,
   };
 
   _maybeRenderDevelopmentModeWarning() {