From bc8184b1a402af0c3e54edb79b38ed8e09a6798d Mon Sep 17 00:00:00 2001 From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com> Date: Thu, 25 Jun 2020 16:28:00 -0700 Subject: cleanup file structure, add react-navigation & basic routes --- App.tsx | 118 ------------------------------ __tests__/App-test.tsx | 14 ---- app.json | 4 +- index.js | 3 +- ios/Podfile.lock | 30 ++++++++ package.json | 20 +++++- src/App.tsx | 23 ++++++ src/__tests__/App-test.tsx | 16 +++++ src/index.ts | 1 + src/routes/Routes.tsx | 24 +++++++ src/routes/index.ts | 2 + src/screens/Login.tsx | 27 +++++++ src/screens/Registration.tsx | 14 ++++ src/screens/index.ts | 2 + yarn.lock | 166 +++++++++++++++++++++++++++++++++++++++++-- 15 files changed, 322 insertions(+), 142 deletions(-) delete mode 100644 App.tsx delete mode 100644 __tests__/App-test.tsx create mode 100644 src/App.tsx create mode 100644 src/__tests__/App-test.tsx create mode 100644 src/index.ts create mode 100644 src/routes/Routes.tsx create mode 100644 src/routes/index.ts create mode 100644 src/screens/Login.tsx create mode 100644 src/screens/Registration.tsx create mode 100644 src/screens/index.ts diff --git a/App.tsx b/App.tsx deleted file mode 100644 index 6106df43..00000000 --- a/App.tsx +++ /dev/null @@ -1,118 +0,0 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * - * Generated with the TypeScript template - * https://github.com/react-native-community/react-native-template-typescript - * - * @format - */ - -import React from 'react'; -import { - SafeAreaView, - StyleSheet, - ScrollView, - View, - Text, - StatusBar, -} from 'react-native'; - -import { - Header, - LearnMoreLinks, - Colors, - DebugInstructions, - ReloadInstructions, -} from 'react-native/Libraries/NewAppScreen'; - -declare const global: {HermesInternal: null | {}}; - -const App = () => { - return ( - <> - - - -
- {global.HermesInternal == null ? null : ( - - Engine: Hermes - - )} - - - Step One - - Edit App.tsx in order to change - this screen and then come back to see your edits. - - - - See Your Changes - - - - - - Debug - - - - - - Learn More - - Read the docs to discover what to do next: - - - - - - - - ); -}; - -const styles = StyleSheet.create({ - scrollView: { - backgroundColor: Colors.lighter, - }, - engine: { - position: 'absolute', - right: 0, - }, - body: { - backgroundColor: Colors.white, - }, - sectionContainer: { - marginTop: 32, - paddingHorizontal: 24, - }, - sectionTitle: { - fontSize: 24, - fontWeight: '600', - color: Colors.black, - }, - sectionDescription: { - marginTop: 8, - fontSize: 18, - fontWeight: '400', - color: Colors.dark, - }, - highlight: { - fontWeight: '700', - }, - footer: { - color: Colors.dark, - fontSize: 12, - fontWeight: '600', - padding: 4, - paddingRight: 12, - textAlign: 'right', - }, -}); - -export default App; diff --git a/__tests__/App-test.tsx b/__tests__/App-test.tsx deleted file mode 100644 index 17847669..00000000 --- a/__tests__/App-test.tsx +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @format - */ - -import 'react-native'; -import React from 'react'; -import App from '../App'; - -// Note: test renderer must be required after react-native. -import renderer from 'react-test-renderer'; - -it('renders correctly', () => { - renderer.create(); -}); diff --git a/app.json b/app.json index 662ac2d1..cc4bd77c 100644 --- a/app.json +++ b/app.json @@ -1,4 +1,4 @@ { "name": "Frontend", - "displayName": "Frontend" -} \ No newline at end of file + "displayName": "Tagg" +} diff --git a/index.js b/index.js index a850d031..4117260f 100644 --- a/index.js +++ b/index.js @@ -2,8 +2,9 @@ * @format */ +import 'react-native-gesture-handler'; import {AppRegistry} from 'react-native'; -import App from './App'; +import App from './src'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 9db48555..693e204c 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -233,6 +233,8 @@ PODS: - React-cxxreact (= 0.62.2) - React-jsi (= 0.62.2) - React-jsinspector (0.62.2) + - react-native-safe-area-context (3.0.6): + - React - React-RCTActionSheet (0.62.2): - React-Core/RCTActionSheetHeaders (= 0.62.2) - React-RCTAnimation (0.62.2): @@ -292,6 +294,14 @@ PODS: - React-cxxreact (= 0.62.2) - React-jsi (= 0.62.2) - ReactCommon/callinvoker (= 0.62.2) + - RNCMaskedView (0.1.10): + - React + - RNGestureHandler (1.6.1): + - React + - RNReanimated (1.9.0): + - React + - RNScreens (2.9.0): + - React - Yoga (1.14.0) - YogaKit (1.18.1): - Yoga (~> 1.14) @@ -332,6 +342,7 @@ DEPENDENCIES: - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`) - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) + - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) @@ -343,6 +354,10 @@ DEPENDENCIES: - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) - ReactCommon/callinvoker (from `../node_modules/react-native/ReactCommon`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) + - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)" + - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) + - RNReanimated (from `../node_modules/react-native-reanimated`) + - RNScreens (from `../node_modules/react-native-screens`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) SPEC REPOS: @@ -389,6 +404,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/jsiexecutor" React-jsinspector: :path: "../node_modules/react-native/ReactCommon/jsinspector" + react-native-safe-area-context: + :path: "../node_modules/react-native-safe-area-context" React-RCTActionSheet: :path: "../node_modules/react-native/Libraries/ActionSheetIOS" React-RCTAnimation: @@ -409,6 +426,14 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/Libraries/Vibration" ReactCommon: :path: "../node_modules/react-native/ReactCommon" + RNCMaskedView: + :path: "../node_modules/@react-native-community/masked-view" + RNGestureHandler: + :path: "../node_modules/react-native-gesture-handler" + RNReanimated: + :path: "../node_modules/react-native-reanimated" + RNScreens: + :path: "../node_modules/react-native-screens" Yoga: :path: "../node_modules/react-native/ReactCommon/yoga" @@ -438,6 +463,7 @@ SPEC CHECKSUMS: React-jsi: b6dc94a6a12ff98e8877287a0b7620d365201161 React-jsiexecutor: 1540d1c01bb493ae3124ed83351b1b6a155db7da React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493 + react-native-safe-area-context: e22a8ca00f758273d2408953965cb8db67da7925 React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c React-RCTAnimation: 49ab98b1c1ff4445148b72a3d61554138565bad0 React-RCTBlob: a332773f0ebc413a0ce85942a55b064471587a71 @@ -448,6 +474,10 @@ SPEC CHECKSUMS: React-RCTText: fae545b10cfdb3d247c36c56f61a94cfd6dba41d React-RCTVibration: 4356114dbcba4ce66991096e51a66e61eda51256 ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3 + RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f + RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38 + RNReanimated: b5ccb50650ba06f6e749c7c329a1bc3ae0c88b43 + RNScreens: c526239bbe0e957b988dacc8d75ac94ec9cb19da Yoga: 3ebccbdd559724312790e7742142d062476b698e YogaKit: f782866e155069a2cca2517aafea43200b01fd5a diff --git a/package.json b/package.json index 7bee86c4..d3ad6c4d 100644 --- a/package.json +++ b/package.json @@ -7,11 +7,18 @@ "ios": "react-native run-ios", "start": "react-native start", "test": "jest", - "lint": "eslint . --ext .js,.jsx,.ts,.tsx" + "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix" }, "dependencies": { + "@react-native-community/masked-view": "^0.1.10", + "@react-navigation/native": "^5.6.1", + "@react-navigation/stack": "^5.6.2", "react": "16.11.0", - "react-native": "0.62.2" + "react-native": "0.62.2", + "react-native-gesture-handler": "^1.6.1", + "react-native-reanimated": "^1.9.0", + "react-native-safe-area-context": "^3.0.6", + "react-native-screens": "^2.9.0" }, "devDependencies": { "@babel/core": "^7.6.2", @@ -24,10 +31,11 @@ "@typescript-eslint/parser": "^2.27.0", "babel-jest": "^24.9.0", "eslint": "^6.5.1", + "identity-obj-proxy": "^3.0.0", "jest": "^24.9.0", "metro-react-native-babel-preset": "^0.58.0", - "react-test-renderer": "16.11.0", "prettier": "^2.0.4", + "react-test-renderer": "16.11.0", "typescript": "^3.8.3" }, "jest": { @@ -39,6 +47,12 @@ "jsx", "json", "node" + ], + "moduleNameMapper": { + ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy" + }, + "setupFiles": [ + "./node_modules/react-native-gesture-handler/jestSetup.js" ] } } diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 00000000..6c247f7c --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,23 @@ +/** + * Sample React Native App + * https://github.com/facebook/react-native + * + * Generated with the TypeScript template + * https://github.com/react-native-community/react-native-template-typescript + * + * @format + */ + +import React from 'react'; +import Routes from './routes'; +import {NavigationContainer} from '@react-navigation/native'; + +const App = () => { + return ( + + + + ); +}; + +export default App; diff --git a/src/__tests__/App-test.tsx b/src/__tests__/App-test.tsx new file mode 100644 index 00000000..e362fb52 --- /dev/null +++ b/src/__tests__/App-test.tsx @@ -0,0 +1,16 @@ +/** + * @format + */ + +import 'react-native'; +import React from 'react'; +import App from '../App'; + +// Note: test renderer must be required after react-native. +import renderer from 'react-test-renderer'; + +jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper'); + +it('renders correctly', () => { + renderer.create(); +}); diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 00000000..ab7fd11d --- /dev/null +++ b/src/index.ts @@ -0,0 +1 @@ +export {default} from './App'; diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx new file mode 100644 index 00000000..9c2efada --- /dev/null +++ b/src/routes/Routes.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import {createStackNavigator} from '@react-navigation/stack'; + +import {Login, Registration} from '../screens'; + +export type RootStackParams = { + Login: undefined; + Registration: undefined; +}; + +const RootStack = createStackNavigator(); + +interface RoutesProps {} + +const Routes: React.FC = ({}) => { + return ( + + + + + ); +}; + +export default Routes; diff --git a/src/routes/index.ts b/src/routes/index.ts new file mode 100644 index 00000000..cfa05fcb --- /dev/null +++ b/src/routes/index.ts @@ -0,0 +1,2 @@ +export {default} from './Routes'; +export * from './Routes'; diff --git a/src/screens/Login.tsx b/src/screens/Login.tsx new file mode 100644 index 00000000..0305b907 --- /dev/null +++ b/src/screens/Login.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import {RouteProp} from '@react-navigation/native'; +import {StackNavigationProp} from '@react-navigation/stack'; +import {View, Text, Button} from 'react-native'; + +import {RootStackParams} from '../routes'; + +type LoginScreenRouteProp = RouteProp; +type LoginScreenNavigationProp = StackNavigationProp; + +interface LoginProps { + route: LoginScreenRouteProp; + navigation: LoginScreenNavigationProp; +} +const Login = ({navigation}: LoginProps) => { + return ( + + Welcome to Tagg! Login page goes here. +