From 7d18532bcbced0e87fcc881eae0b0d7dddf265fd Mon Sep 17 00:00:00 2001 From: Justin Shillingford Date: Thu, 25 Jun 2020 17:21:04 -0400 Subject: Added base app with background color for Sign In Everything's in App.tsx for now since we haven't discussed structure --- App.tsx | 89 +++++++++----------------------------------------------- ios/Podfile.lock | 6 ++++ package.json | 5 ++-- yarn.lock | 5 ++++ 4 files changed, 27 insertions(+), 78 deletions(-) diff --git a/App.tsx b/App.tsx index 6106df43..bb9d3c45 100644 --- a/App.tsx +++ b/App.tsx @@ -26,93 +26,30 @@ import { ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; +import LinearGradient from 'react-native-linear-gradient'; + 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', + container: { + flex: 1, + backgroundColor: 'transparent' }, + linearGradient: { + flex: 1, + } }); export default App; diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 9db48555..ae22deaf 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1,5 +1,7 @@ PODS: - boost-for-react-native (1.63.0) + - BVLinearGradient (2.5.6): + - React - CocoaAsyncSocket (7.6.4) - CocoaLibEvent (1.0.0) - DoubleConversion (1.1.6) @@ -297,6 +299,7 @@ PODS: - Yoga (~> 1.14) DEPENDENCIES: + - BVLinearGradient (from `../node_modules/react-native-linear-gradient`) - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`) - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) - FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`) @@ -361,6 +364,8 @@ SPEC REPOS: - YogaKit EXTERNAL SOURCES: + BVLinearGradient: + :path: "../node_modules/react-native-linear-gradient" DoubleConversion: :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" FBLazyVector: @@ -414,6 +419,7 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c + BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872 CocoaAsyncSocket: 694058e7c0ed05a9e217d1b3c7ded962f4180845 CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2 diff --git a/package.json b/package.json index 7bee86c4..613c3491 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "react": "16.11.0", - "react-native": "0.62.2" + "react-native": "0.62.2", + "react-native-linear-gradient": "^2.5.6" }, "devDependencies": { "@babel/core": "^7.6.2", @@ -26,8 +27,8 @@ "eslint": "^6.5.1", "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": { diff --git a/yarn.lock b/yarn.lock index 954302bb..0d78176e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4983,6 +4983,11 @@ react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-native-linear-gradient@^2.5.6: + version "2.5.6" + resolved "https://registry.yarnpkg.com/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz#96215cbc5ec7a01247a20890888aa75b834d44a0" + integrity sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg== + react-native@0.62.2: version "0.62.2" resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.62.2.tgz#d831e11a3178705449142df19a70ac2ca16bad10" -- cgit v1.2.3-70-g09d2 From d0bfa544dc8f72c048d742cc9357cab3c199a25f Mon Sep 17 00:00:00 2001 From: Justin Shillingford Date: Thu, 25 Jun 2020 18:08:08 -0400 Subject: Added Tagg logo to Sign In Page --- App.tsx | 7 ++++++- src/assets/sign_in_logo.png | Bin 0 -> 7298 bytes 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 src/assets/sign_in_logo.png diff --git a/App.tsx b/App.tsx index bb9d3c45..5ec3b5e8 100644 --- a/App.tsx +++ b/App.tsx @@ -16,6 +16,7 @@ import { View, Text, StatusBar, + Image, } from 'react-native'; import { @@ -35,7 +36,7 @@ const App = () => { <> - + @@ -49,6 +50,10 @@ const styles = StyleSheet.create({ }, linearGradient: { flex: 1, + alignItems: 'center', + }, + logo: { + top: 108, } }); diff --git a/src/assets/sign_in_logo.png b/src/assets/sign_in_logo.png new file mode 100644 index 00000000..8fa1aa5a Binary files /dev/null and b/src/assets/sign_in_logo.png differ -- cgit v1.2.3-70-g09d2 From c211d1938fd441e745d40437e81c724982440145 Mon Sep 17 00:00:00 2001 From: Justin Shillingford Date: Thu, 25 Jun 2020 19:27:49 -0400 Subject: Added the logo, text inputs, and buttons --- App.tsx | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 52 insertions(+), 2 deletions(-) diff --git a/App.tsx b/App.tsx index 5ec3b5e8..e58025b7 100644 --- a/App.tsx +++ b/App.tsx @@ -17,6 +17,9 @@ import { Text, StatusBar, Image, + TextInput, + Button, + Alert, } from 'react-native'; import { @@ -36,7 +39,36 @@ const App = () => { <> - + + + + +