From efe65e70d7f8a4f30e4c780c5fdb56f3c81f377e Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Tue, 7 Jun 2022 18:56:31 -0500 Subject: [PATCH] Add basic react-navigator usage --- README.md | 4 +- __tests__/App-test.tsx | 6 ++- index.js | 2 +- ios/Podfile.lock | 17 +++++++ package.json | 9 +++- App.tsx => src/App.tsx | 36 ++++++++++++++- yarn.lock | 102 +++++++++++++++++++++++++++++++++++++++-- 7 files changed, 165 insertions(+), 11 deletions(-) rename App.tsx => src/App.tsx (71%) diff --git a/README.md b/README.md index 5d4cbe67..b69f6b0d 100644 --- a/README.md +++ b/README.md @@ -7,13 +7,15 @@ Uses: - [React Native](https://reactnative.dev) - (blocked) [React Native for Web](https://necolas.github.io/react-native-web/) - Needs [0.18 preview release #2248](https://github.com/necolas/react-native-web/pull/2248) to merge -- (todo) [React Navigation](https://reactnative.dev/docs/navigation#react-navigation) +- [React Navigation](https://reactnative.dev/docs/navigation#react-navigation) - (todo) [MobX](https://mobx.js.org/README.html) and [MobX State Tree](https://mobx-state-tree.js.org/) - (todo) [Async Storage](https://github.com/react-native-async-storage/async-storage) ## Build instructions - Setup your environment [using the react native instructions](https://reactnative.dev/docs/environment-setup). +- After initial setup: + - `cd ios ; pod install` Installs the React Navigation deps ([info](https://reactnative.dev/docs/navigation#installation-and-setup)). - To run the iOS simulator: `yarn ios` - To run the Android simulator: `yarn android` - Tips diff --git a/__tests__/App-test.tsx b/__tests__/App-test.tsx index 17847669..dab45f32 100644 --- a/__tests__/App-test.tsx +++ b/__tests__/App-test.tsx @@ -4,11 +4,13 @@ import 'react-native'; import React from 'react'; -import App from '../App'; +import App from '../src/App'; // Note: test renderer must be required after react-native. import renderer from 'react-test-renderer'; it('renders correctly', () => { - renderer.create(); + renderer.act(() => { + renderer.create(); + }); }); diff --git a/index.js b/index.js index a850d031..69303b34 100644 --- a/index.js +++ b/index.js @@ -3,7 +3,7 @@ */ import {AppRegistry} from 'react-native'; -import App from './App'; +import App from './src/App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); diff --git a/ios/Podfile.lock b/ios/Podfile.lock index da1855dd..4d7b0097 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -282,6 +282,12 @@ PODS: - React-jsinspector (0.68.2) - React-logger (0.68.2): - glog + - react-native-safe-area-context (4.3.1): + - RCT-Folly + - RCTRequired + - RCTTypeSafety + - React + - ReactCommon/turbomodule/core - React-perflogger (0.68.2) - React-RCTActionSheet (0.68.2): - React-Core/RCTActionSheetHeaders (= 0.68.2) @@ -347,6 +353,9 @@ PODS: - React-jsi (= 0.68.2) - React-logger (= 0.68.2) - React-perflogger (= 0.68.2) + - RNScreens (3.13.1): + - React-Core + - React-RCTImage - SocketRocket (0.6.0) - Yoga (1.14.0) - YogaKit (1.18.1): @@ -395,6 +404,7 @@ DEPENDENCIES: - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) - React-logger (from `../node_modules/react-native/ReactCommon/logger`) + - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`) - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) @@ -407,6 +417,7 @@ DEPENDENCIES: - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) + - RNScreens (from `../node_modules/react-native-screens`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) SPEC REPOS: @@ -464,6 +475,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/jsinspector" React-logger: :path: "../node_modules/react-native/ReactCommon/logger" + react-native-safe-area-context: + :path: "../node_modules/react-native-safe-area-context" React-perflogger: :path: "../node_modules/react-native/ReactCommon/reactperflogger" React-RCTActionSheet: @@ -488,6 +501,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/runtimeexecutor" ReactCommon: :path: "../node_modules/react-native/ReactCommon" + RNScreens: + :path: "../node_modules/react-native-screens" Yoga: :path: "../node_modules/react-native/ReactCommon/yoga" @@ -523,6 +538,7 @@ SPEC CHECKSUMS: React-jsiexecutor: b7b553412f2ec768fe6c8f27cd6bafdb9d8719e6 React-jsinspector: c5989c77cb89ae6a69561095a61cce56a44ae8e8 React-logger: a0833912d93b36b791b7a521672d8ee89107aff1 + react-native-safe-area-context: 6c12e3859b6f27b25de4fee8201cfb858432d8de React-perflogger: a18b4f0bd933b8b24ecf9f3c54f9bf65180f3fe6 React-RCTActionSheet: 547fe42fdb4b6089598d79f8e1d855d7c23e2162 React-RCTAnimation: bc9440a1c37b06ae9ebbb532d244f607805c6034 @@ -535,6 +551,7 @@ SPEC CHECKSUMS: React-RCTVibration: 79040b92bfa9c3c2d2cb4f57e981164ec7ab9374 React-runtimeexecutor: b960b687d2dfef0d3761fbb187e01812ebab8b23 ReactCommon: 095366164a276d91ea704ce53cb03825c487a3f2 + RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19 SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608 Yoga: 99652481fcd320aefa4a7ef90095b95acd181952 YogaKit: f782866e155069a2cca2517aafea43200b01fd5a diff --git a/package.json b/package.json index 811c9921..f4108e2f 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,12 @@ "lint": "eslint . --ext .js,.jsx,.ts,.tsx" }, "dependencies": { + "@react-navigation/native": "^6.0.10", + "@react-navigation/native-stack": "^6.6.2", "react": "17.0.2", - "react-native": "0.68.2" + "react-native": "0.68.2", + "react-native-safe-area-context": "^4.3.1", + "react-native-screens": "^3.13.1" }, "devDependencies": { "@babel/core": "^7.12.9", @@ -41,6 +45,9 @@ "jsx", "json", "node" + ], + "transformIgnorePatterns": [ + "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|rollbar-react-native|@fortawesome|@react-native|@react-navigation)" ] } } diff --git a/App.tsx b/src/App.tsx similarity index 71% rename from App.tsx rename to src/App.tsx index e2cc13b3..3927851b 100644 --- a/App.tsx +++ b/src/App.tsx @@ -15,9 +15,12 @@ import { StatusBar, StyleSheet, Text, + Button, useColorScheme, View, } from 'react-native'; +import { NavigationContainer } from '@react-navigation/native'; +import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack'; import { Colors, @@ -27,6 +30,12 @@ import { ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; +type RootStackParamList = { + Home: undefined; + Profile: { name: string }; +}; +const Stack = createNativeStackNavigator(); + const Section: React.FC<{ title: string; }> = ({children, title}) => { @@ -55,13 +64,12 @@ const Section: React.FC<{ ); }; -const App = () => { +const HomeScreen = ({ navigation }: NativeStackScreenProps) => { const isDarkMode = useColorScheme() === 'dark'; const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; - return ( @@ -76,6 +84,10 @@ const App = () => {
Edit App.tsx to change this screen and then come back to see your edits. +
@@ -90,6 +102,26 @@ const App = () => { + ) +} + +const ProfileScreen = ({ navigation, route }: NativeStackScreenProps) => { + return This is {route.params.name}'s profile; +}; + +const App = () => { + + return ( + + + + + + ); }; diff --git a/yarn.lock b/yarn.lock index 163aaa73..eac64aa6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1279,6 +1279,47 @@ resolved "https://registry.yarnpkg.com/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa" integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ== +"@react-navigation/core@^6.2.1": + version "6.2.1" + resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.2.1.tgz#90459f9afd25b71a9471b0706ebea2cdd2534fc4" + integrity sha512-3mjS6ujwGnPA/BC11DN9c2c42gFld6B6dQBgDedxP2djceXESpY2kVTTwISDHuqFnF7WjvRjsrDu3cKBX+JosA== + dependencies: + "@react-navigation/routers" "^6.1.0" + escape-string-regexp "^4.0.0" + nanoid "^3.1.23" + query-string "^7.0.0" + react-is "^16.13.0" + +"@react-navigation/elements@^1.3.3": + version "1.3.3" + resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.3.tgz#9f56b650a9a1a8263a271628be7342c8121d1788" + integrity sha512-Lv2lR7si5gNME8dRsqz57d54m4FJtrwHRjNQLOyQO546ZxO+g864cSvoLC6hQedQU0+IJnPTsZiEI2hHqfpEpw== + +"@react-navigation/native-stack@^6.6.2": + version "6.6.2" + resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.6.2.tgz#09e696ad72299872f4c5c1e5b1ad309869853628" + integrity sha512-pFMuzhxbPml5MBvJVAzHWoaUkQaefAOKpuUnAs/AxNQuHQwwnxRmDit1PQLuIPo7g7DlfwFXagDHE1R0tbnS8Q== + dependencies: + "@react-navigation/elements" "^1.3.3" + warn-once "^0.1.0" + +"@react-navigation/native@^6.0.10": + version "6.0.10" + resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.0.10.tgz#c58aa176eb0e63f3641c83a65c509faf253e4385" + integrity sha512-H6QhLeiieGxNcAJismIDXIPZgf1myr7Og8v116tezIGmincJTOcWavTd7lPHGnMMXaZg94LlVtbaBRIx9cexqw== + dependencies: + "@react-navigation/core" "^6.2.1" + escape-string-regexp "^4.0.0" + fast-deep-equal "^3.1.3" + nanoid "^3.1.23" + +"@react-navigation/routers@^6.1.0": + version "6.1.0" + resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-6.1.0.tgz#d5682be88f1eb7809527c48f9cd3dedf4f344e40" + integrity sha512-8xJL+djIzpFdRW/sGlKojQ06fWgFk1c5jER9501HYJ12LF5DIJFr/tqBI2TJ6bk+y+QFu0nbNyeRC80OjRlmkA== + dependencies: + nanoid "^3.1.23" + "@sideway/address@^4.1.3": version "4.1.4" resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0" @@ -2659,9 +2700,9 @@ ee-first@1.1.1: integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow== electron-to-chromium@^1.4.147: - version "1.4.147" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.147.tgz#1ecf318737b21ba1e5b53319eb1edf8143892270" - integrity sha512-czclPqxLMPqPMkahKcske4TaS5lcznsc26ByBlEFDU8grTBVK9C5W6K9I6oEEhm4Ai4jTihGnys90xY1yjXcRg== + version "1.4.148" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.148.tgz#437430e03c58ccd1d05701f66980afe54d2253ec" + integrity sha512-8MJk1bcQUAYkuvCyWZxaldiwoDG0E0AMzBGA6cv3WfuvJySiPgfidEPBFCRRH3cZm6SVZwo/oRlK1ehi1QNEIQ== emittery@^0.7.1: version "0.7.2" @@ -3170,6 +3211,11 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" +filter-obj@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b" + integrity sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ== + finalhandler@1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d" @@ -5110,6 +5156,11 @@ ms@2.1.3: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== +nanoid@^3.1.23: + version "3.3.4" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab" + integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== + nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119" @@ -5672,6 +5723,16 @@ punycode@^2.1.0, punycode@^2.1.1: resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec" integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A== +query-string@^7.0.0: + version "7.1.1" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.1.1.tgz#754620669db978625a90f635f12617c271a088e1" + integrity sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w== + dependencies: + decode-uri-component "^0.2.0" + filter-obj "^1.1.0" + split-on-first "^1.0.0" + strict-uri-encode "^2.0.0" + queue-microtask@^1.2.2: version "1.2.3" resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" @@ -5690,6 +5751,11 @@ react-devtools-core@^4.23.0: shell-quote "^1.6.1" ws "^7" +react-freeze@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.0.tgz#b21c65fe1783743007c8c9a2952b1c8879a77354" + integrity sha512-yQaiOqDmoKqks56LN9MTgY06O0qQHgV4FUrikH357DydArSZHQhl0BJFqGKIZoTqi8JizF9Dxhuk1FIZD6qCaw== + "react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" @@ -5700,7 +5766,7 @@ react-devtools-core@^4.23.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg== -react-is@^16.13.1: +react-is@^16.13.0, react-is@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -5720,6 +5786,19 @@ react-native-gradle-plugin@^0.0.6: resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz#b61a9234ad2f61430937911003cddd7e15c72b45" integrity sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg== +react-native-safe-area-context@^4.3.1: + version "4.3.1" + resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.3.1.tgz#5cf97b25b395e0d09bc1f828920cd7da0d792ade" + integrity sha512-cEr7fknJCToTrSyDCVNg0GRdRMhyLeQa2NZwVCuzEQcWedOw/59ExomjmzCE4rxrKXs6OJbyfNtFRNyewDaHuA== + +react-native-screens@^3.13.1: + version "3.13.1" + resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.13.1.tgz#b3b1c5788dca25a71668909f66d87fb35c5c5241" + integrity sha512-xcrnuUs0qUrGpc2gOTDY4VgHHADQwp80mwR1prU/Q0JqbZN5W3koLhuOsT6FkSRKjR5t40l+4LcjhHdpqRB2HA== + dependencies: + react-freeze "^1.0.0" + warn-once "^0.1.0" + react-native@0.68.2: version "0.68.2" resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.68.2.tgz#07547cd31bb9335a7fa4135cfbdc24e067142585" @@ -6391,6 +6470,11 @@ spdx-license-ids@^3.0.0: resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz#50c0d8c40a14ec1bf449bae69a0ea4685a9d9f95" integrity sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g== +split-on-first@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f" + integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw== + split-string@^3.0.1, split-string@^3.0.2: version "3.1.0" resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2" @@ -6445,6 +6529,11 @@ stream-buffers@2.2.x: resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4" integrity sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ= +strict-uri-encode@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546" + integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY= + string-length@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a" @@ -6954,6 +7043,11 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.12" +warn-once@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/warn-once/-/warn-once-0.1.0.tgz#4f58d89b84f968d0389176aa99e0cf0f14ffd4c8" + integrity sha512-recZTSvuaH/On5ZU5ywq66y99lImWqzP93+AiUo9LUwG8gXHW+LJjhOd6REJHm7qb0niYqrEQJvbHSQfuJtTqA== + wcwidth@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"