Browse Source

125 - Added Expo's Navigation to go from Hello to World pages

Elisa Cutrin 1 year ago
parent
commit
a9f0124a0a
5 changed files with 167 additions and 11 deletions
  1. 10 4
      App.js
  2. 10 0
      Router.js
  3. 144 6
      package-lock.json
  4. 1 0
      package.json
  5. 2 1
      screens/hello.js

+ 10 - 4
App.js

@@ -1,15 +1,21 @@
1 1
 import React from 'react';
2 2
 import { StyleSheet, Text, View } from 'react-native';
3
-import { Hello } from './screens/hello';
4
-import { World } from './screens/world';
3
+import {
4
+  NavigationProvider,
5
+  StackNavigation,
6
+} from '@expo/ex-navigation';
7
+import Router from './Router';
8
+
5 9
 
6 10
 export default class App extends React.Component {
7 11
   render() {
8 12
     return (
9
-      <Hello />
13
+      <NavigationProvider router={Router}>
14
+        <StackNavigation initialRoute={Router.getRoute('hello')} />
15
+      </NavigationProvider>
10 16
     );
11 17
   }
12
-}
18
+};
13 19
 
14 20
 const styles = StyleSheet.create({
15 21
   container: {

+ 10 - 0
Router.js

@@ -0,0 +1,10 @@
1
+import {Hello} from "./screens/hello";
2
+import {createRouter} from "@expo/ex-navigation/src/ExNavigation";
3
+import {World} from "./screens/world";
4
+
5
+const Router = createRouter(() => ({
6
+  hello: () => Hello,
7
+  world: () => World
8
+}));
9
+
10
+export default Router;

+ 144 - 6
package-lock.json

@@ -590,6 +590,44 @@
590 590
         "safe-json-stringify": "1.1.0"
591 591
       }
592 592
     },
593
+    "@expo/ex-navigation": {
594
+      "version": "4.2.0",
595
+      "resolved": "https://registry.npmjs.org/@expo/ex-navigation/-/ex-navigation-4.2.0.tgz",
596
+      "integrity": "sha512-L7BmpdWcQUiZodyoWQjsT5N8yBgAmr6qOoyDMuyWL0OwQuP82N/+vdkLKUjrxRztOnewgAgoWBllaZpdZzTW/A==",
597
+      "requires": {
598
+        "@expo/react-native-touchable-native-feedback-safe": "1.1.2",
599
+        "clamp": "1.0.1",
600
+        "core-decorators": "0.12.3",
601
+        "fbemitter": "2.1.1",
602
+        "fbjs": "0.8.16",
603
+        "hoist-non-react-statics": "1.2.0",
604
+        "invariant": "2.2.4",
605
+        "lodash": "4.17.5",
606
+        "mirror-creator": "1.1.0",
607
+        "prop-types": "15.6.1",
608
+        "react-addons-pure-render-mixin": "15.6.2",
609
+        "react-addons-shallow-compare": "15.5.2",
610
+        "react-clone-referenced-element": "1.0.1",
611
+        "react-mixin": "3.1.1",
612
+        "react-native-drawer-layout-polyfill": "1.3.2",
613
+        "react-native-tab-view": "0.0.65",
614
+        "react-redux": "5.0.7",
615
+        "react-static-container": "1.0.2",
616
+        "react-timer-mixin": "0.13.3",
617
+        "redux": "3.7.2",
618
+        "redux-batched-actions": "0.1.6",
619
+        "reselect": "2.5.4",
620
+        "uuid-js": "0.7.5",
621
+        "warning": "2.1.0"
622
+      },
623
+      "dependencies": {
624
+        "hoist-non-react-statics": {
625
+          "version": "1.2.0",
626
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
627
+          "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
628
+        }
629
+      }
630
+    },
593 631
     "@expo/json-file": {
594 632
       "version": "5.3.0",
595 633
       "resolved": "https://registry.npmjs.org/@expo/json-file/-/json-file-5.3.0.tgz",
@@ -722,6 +760,11 @@
722 760
         "exec-async": "2.2.0"
723 761
       }
724 762
     },
763
+    "@expo/react-native-touchable-native-feedback-safe": {
764
+      "version": "1.1.2",
765
+      "resolved": "https://registry.npmjs.org/@expo/react-native-touchable-native-feedback-safe/-/react-native-touchable-native-feedback-safe-1.1.2.tgz",
766
+      "integrity": "sha1-fvUB1dMhQO7WV/dfDeFF1KliRNg="
767
+    },
725 768
     "@expo/schemer": {
726 769
       "version": "1.1.0",
727 770
       "resolved": "https://registry.npmjs.org/@expo/schemer/-/schemer-1.1.0.tgz",
@@ -2670,6 +2713,11 @@
2670 2713
       "integrity": "sha512-SK/846h/Rcy8q9Z9CAwGBLfCJ6EkjJWdpelWDufQpqVDYq2Wnnv8zlSO6AMQap02jvhVruKKpEtQOufo3pFhLg==",
2671 2714
       "dev": true
2672 2715
     },
2716
+    "clamp": {
2717
+      "version": "1.0.1",
2718
+      "resolved": "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz",
2719
+      "integrity": "sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ="
2720
+    },
2673 2721
     "class-utils": {
2674 2722
       "version": "0.3.6",
2675 2723
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@@ -2993,6 +3041,11 @@
2993 3041
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
2994 3042
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
2995 3043
     },
3044
+    "core-decorators": {
3045
+      "version": "0.12.3",
3046
+      "resolved": "https://registry.npmjs.org/core-decorators/-/core-decorators-0.12.3.tgz",
3047
+      "integrity": "sha1-az+DN45oDUiwwI2kSJiZt1Mty0M="
3048
+    },
2996 3049
     "core-js": {
2997 3050
       "version": "2.5.5",
2998 3051
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
@@ -7005,8 +7058,7 @@
7005 7058
     "lodash-es": {
7006 7059
       "version": "4.17.8",
7007 7060
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.8.tgz",
7008
-      "integrity": "sha512-I9mjAxengFAleSThFhhAhvba6fsO0hunb9/0sQ6qQihSZsJRBofv2rYH58WXaOb/O++eUmYpCLywSQ22GfU+sA==",
7009
-      "dev": true
7061
+      "integrity": "sha512-I9mjAxengFAleSThFhhAhvba6fsO0hunb9/0sQ6qQihSZsJRBofv2rYH58WXaOb/O++eUmYpCLywSQ22GfU+sA=="
7010 7062
     },
7011 7063
     "lodash._basecopy": {
7012 7064
       "version": "3.0.1",
@@ -7714,6 +7766,11 @@
7714 7766
         "minipass": "2.2.4"
7715 7767
       }
7716 7768
     },
7769
+    "mirror-creator": {
7770
+      "version": "1.1.0",
7771
+      "resolved": "https://registry.npmjs.org/mirror-creator/-/mirror-creator-1.1.0.tgz",
7772
+      "integrity": "sha1-FwzHTQ/yRESRdyBHFsu+VV1o1po="
7773
+    },
7717 7774
     "mixin-deep": {
7718 7775
       "version": "1.3.1",
7719 7776
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
@@ -8674,6 +8731,24 @@
8674 8731
         "prop-types": "15.6.1"
8675 8732
       }
8676 8733
     },
8734
+    "react-addons-pure-render-mixin": {
8735
+      "version": "15.6.2",
8736
+      "resolved": "https://registry.npmjs.org/react-addons-pure-render-mixin/-/react-addons-pure-render-mixin-15.6.2.tgz",
8737
+      "integrity": "sha1-a4P0C2s27kBzXL1hJes/E84c3ck=",
8738
+      "requires": {
8739
+        "fbjs": "0.8.16",
8740
+        "object-assign": "4.1.1"
8741
+      }
8742
+    },
8743
+    "react-addons-shallow-compare": {
8744
+      "version": "15.5.2",
8745
+      "resolved": "https://registry.npmjs.org/react-addons-shallow-compare/-/react-addons-shallow-compare-15.5.2.tgz",
8746
+      "integrity": "sha1-fLDuesyNfJP8wgLfC/R7qRanva0=",
8747
+      "requires": {
8748
+        "fbjs": "0.8.16",
8749
+        "object-assign": "4.1.1"
8750
+      }
8751
+    },
8677 8752
     "react-clone-referenced-element": {
8678 8753
       "version": "1.0.1",
8679 8754
       "resolved": "https://registry.npmjs.org/react-clone-referenced-element/-/react-clone-referenced-element-1.0.1.tgz",
@@ -8720,6 +8795,15 @@
8720 8795
       "integrity": "sha512-ybEM7YOr4yBgFd6w8dJqwxegqZGJNBZl6U27HnGKuTZmDvVrD5quWOK/wAnMywiZzW+Qsk+l4X2c70+thp/A8Q==",
8721 8796
       "dev": true
8722 8797
     },
8798
+    "react-mixin": {
8799
+      "version": "3.1.1",
8800
+      "resolved": "https://registry.npmjs.org/react-mixin/-/react-mixin-3.1.1.tgz",
8801
+      "integrity": "sha512-z9fZ0aCRDjlgxLdMeWkJ9TwhmVLhQ09r8RFpin/cEPA2T6jsb7YHNWcIe0Oii+hhJNyMymdy91CSya5mRkuCkg==",
8802
+      "requires": {
8803
+        "object-assign": "4.1.1",
8804
+        "smart-mixin": "2.0.0"
8805
+      }
8806
+    },
8723 8807
     "react-native": {
8724 8808
       "version": "0.54.0",
8725 8809
       "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.54.0.tgz",
@@ -8929,6 +9013,27 @@
8929 9013
       "resolved": "https://registry.npmjs.org/react-native-branch/-/react-native-branch-2.0.0-beta.3.tgz",
8930 9014
       "integrity": "sha1-IWevhrvJ+WS9Rb1fN2hOW1SWXjI="
8931 9015
     },
9016
+    "react-native-dismiss-keyboard": {
9017
+      "version": "1.0.0",
9018
+      "resolved": "https://registry.npmjs.org/react-native-dismiss-keyboard/-/react-native-dismiss-keyboard-1.0.0.tgz",
9019
+      "integrity": "sha1-MohiQrPyMX4SHzrrmwpYXiuHm0k="
9020
+    },
9021
+    "react-native-drawer-layout": {
9022
+      "version": "1.3.2",
9023
+      "resolved": "https://registry.npmjs.org/react-native-drawer-layout/-/react-native-drawer-layout-1.3.2.tgz",
9024
+      "integrity": "sha512-fjO0scqbJUfNu2wuEpvywL7DYLXuCXJ2W/zYhWz986rdLytidbys1QGVvkaszHrb4Y7OqO96mTkgpOcP8KWevw==",
9025
+      "requires": {
9026
+        "react-native-dismiss-keyboard": "1.0.0"
9027
+      }
9028
+    },
9029
+    "react-native-drawer-layout-polyfill": {
9030
+      "version": "1.3.2",
9031
+      "resolved": "https://registry.npmjs.org/react-native-drawer-layout-polyfill/-/react-native-drawer-layout-polyfill-1.3.2.tgz",
9032
+      "integrity": "sha512-XzPhfLDJrYHru+e8+dFwhf0FtTeAp7JXPpFYezYV6P1nTeA1Tia/kDpFT+O2DWTrBKBEI8FGhZnThrroZmHIxg==",
9033
+      "requires": {
9034
+        "react-native-drawer-layout": "1.3.2"
9035
+      }
9036
+    },
8932 9037
     "react-native-gesture-handler": {
8933 9038
       "version": "1.0.0-alpha.41",
8934 9039
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.0.0-alpha.41.tgz",
@@ -9034,6 +9139,14 @@
9034 9139
         "pegjs": "0.10.0"
9035 9140
       }
9036 9141
     },
9142
+    "react-native-tab-view": {
9143
+      "version": "0.0.65",
9144
+      "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-0.0.65.tgz",
9145
+      "integrity": "sha1-toXqMIH/fJZIbNmXNhAmxAcwLFk=",
9146
+      "requires": {
9147
+        "prop-types": "15.6.1"
9148
+      }
9149
+    },
9037 9150
     "react-native-vector-icons": {
9038 9151
       "version": "4.5.0",
9039 9152
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-4.5.0.tgz",
@@ -9057,7 +9170,6 @@
9057 9170
       "version": "5.0.7",
9058 9171
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz",
9059 9172
       "integrity": "sha512-5VI8EV5hdgNgyjfmWzBbdrqUkrVRKlyTKk1sGH3jzM2M2Mhj/seQgPXaz6gVAj2lz/nz688AdTqMO18Lr24Zhg==",
9060
-      "dev": true,
9061 9173
       "requires": {
9062 9174
         "hoist-non-react-statics": "2.5.0",
9063 9175
         "invariant": "2.2.4",
@@ -9067,6 +9179,11 @@
9067 9179
         "prop-types": "15.6.1"
9068 9180
       }
9069 9181
     },
9182
+    "react-static-container": {
9183
+      "version": "1.0.2",
9184
+      "resolved": "https://registry.npmjs.org/react-static-container/-/react-static-container-1.0.2.tgz",
9185
+      "integrity": "sha512-rxlZtZk5t6Y3gqqpaZ1lxY3RqlQcBU5uGsSoZj/hbF3ZweDqPbFHDkczT4emAxeaw37OD96RAAoayFGFQZCdWg=="
9186
+    },
9070 9187
     "react-test-renderer": {
9071 9188
       "version": "16.3.0-alpha.1",
9072 9189
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.3.0-alpha.1.tgz",
@@ -9148,7 +9265,6 @@
9148 9265
       "version": "3.7.2",
9149 9266
       "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz",
9150 9267
       "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==",
9151
-      "dev": true,
9152 9268
       "requires": {
9153 9269
         "lodash": "4.17.5",
9154 9270
         "lodash-es": "4.17.8",
@@ -9159,11 +9275,15 @@
9159 9275
         "symbol-observable": {
9160 9276
           "version": "1.2.0",
9161 9277
           "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
9162
-          "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
9163
-          "dev": true
9278
+          "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
9164 9279
         }
9165 9280
       }
9166 9281
     },
9282
+    "redux-batched-actions": {
9283
+      "version": "0.1.6",
9284
+      "resolved": "https://registry.npmjs.org/redux-batched-actions/-/redux-batched-actions-0.1.6.tgz",
9285
+      "integrity": "sha512-Idh1WFMnYel2hNb7v6RL5tgq8DpMTb3RZRWwzhOtDjWzvq4liCj1JIdLdvsmmVfsIf1oCH3eRFhHpal7IQJUhg=="
9286
+    },
9167 9287
     "redux-logger": {
9168 9288
       "version": "2.10.2",
9169 9289
       "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-2.10.2.tgz",
@@ -9348,6 +9468,11 @@
9348 9468
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
9349 9469
       "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
9350 9470
     },
9471
+    "reselect": {
9472
+      "version": "2.5.4",
9473
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-2.5.4.tgz",
9474
+      "integrity": "sha1-t9I/3wC4P6etAnlUb427vXZccEc="
9475
+    },
9351 9476
     "resolve": {
9352 9477
       "version": "1.7.1",
9353 9478
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.1.tgz",
@@ -9985,6 +10110,11 @@
9985 10110
       "integrity": "sha1-fxFLW2X6s+KjWqd1uxLw0cZJvxY=",
9986 10111
       "dev": true
9987 10112
     },
10113
+    "smart-mixin": {
10114
+      "version": "2.0.0",
10115
+      "resolved": "https://registry.npmjs.org/smart-mixin/-/smart-mixin-2.0.0.tgz",
10116
+      "integrity": "sha1-o0oQVeMqdbMNK048oyPcmctT9Dc="
10117
+    },
9988 10118
     "snake-case": {
9989 10119
       "version": "1.1.2",
9990 10120
       "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-1.1.2.tgz",
@@ -11335,6 +11465,14 @@
11335 11465
         "makeerror": "1.0.11"
11336 11466
       }
11337 11467
     },
11468
+    "warning": {
11469
+      "version": "2.1.0",
11470
+      "resolved": "https://registry.npmjs.org/warning/-/warning-2.1.0.tgz",
11471
+      "integrity": "sha1-ISINnGOvx3qMkhEeARr3Bc4MaQE=",
11472
+      "requires": {
11473
+        "loose-envify": "1.3.1"
11474
+      }
11475
+    },
11338 11476
     "watch": {
11339 11477
       "version": "0.18.0",
11340 11478
       "resolved": "https://registry.npmjs.org/watch/-/watch-0.18.0.tgz",

+ 1 - 0
package.json

@@ -19,6 +19,7 @@
19 19
     "preset": "jest-expo"
20 20
   },
21 21
   "dependencies": {
22
+    "@expo/ex-navigation": "^4.2.0",
22 23
     "expo": "^26.0.0",
23 24
     "react": "16.3.0-alpha.1",
24 25
     "react-native": "0.54.0"

+ 2 - 1
screens/hello.js

@@ -1,10 +1,11 @@
1 1
 import React from 'react';
2 2
 import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
3
+import Router from '../Router';
3 4
 
4 5
 export class Hello extends React.Component {
5 6
 
6 7
   onPressButton = () => {
7
-    console.log('pressed :D')
8
+    this.props.navigator.push(Router.getRoute('world'));
8 9
   };
9 10
 
10 11
   render() {