From 1cf4c7b160d1639a9b14fae60a01d02584f923a8 Mon Sep 17 00:00:00 2001 From: Jaksa Malisic Date: Sat, 12 Mar 2022 20:53:55 +0100 Subject: [PATCH 1/2] refactor(navigation): configure navigators --- rn-app/navigation/AppNavigator.tsx | 59 ++++++++++++++ rn-app/navigation/AuthNavigator.tsx | 20 +++++ rn-app/navigation/RootNavigator.tsx | 25 ++++++ rn-app/navigation/index.tsx | 119 +++++----------------------- rn-app/navigation/utils.tsx | 11 +++ rn-app/screens/LoginScreen.tsx | 12 +++ 6 files changed, 145 insertions(+), 101 deletions(-) create mode 100644 rn-app/navigation/AppNavigator.tsx create mode 100644 rn-app/navigation/AuthNavigator.tsx create mode 100644 rn-app/navigation/RootNavigator.tsx create mode 100644 rn-app/navigation/utils.tsx create mode 100644 rn-app/screens/LoginScreen.tsx diff --git a/rn-app/navigation/AppNavigator.tsx b/rn-app/navigation/AppNavigator.tsx new file mode 100644 index 0000000..3f9c9e1 --- /dev/null +++ b/rn-app/navigation/AppNavigator.tsx @@ -0,0 +1,59 @@ +import { FontAwesome } from '@expo/vector-icons' +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' +import * as React from 'react' +import { Pressable } from 'react-native' +import Colors from '../constants/Colors' +import useColorScheme from '../hooks/useColorScheme' +import TabOneScreen from '../screens/TabOneScreen' +import TabTwoScreen from '../screens/TabTwoScreen' +import { RootTabParamList, RootTabScreenProps } from '../types' +import TabBarIcon from './utils' + +const BottomTab = createBottomTabNavigator() + +function AppNavigator() { + const colorScheme = useColorScheme() + + return ( + + ) => ({ + title: 'Tab One', + tabBarIcon: ({ color }) => , + headerRight: () => ( + navigation.navigate('Modal')} + style={({ pressed }) => ({ + opacity: pressed ? 0.5 : 1, + })} + > + + + ), + })} + /> + , + }} + /> + + ) +} + +export default AppNavigator diff --git a/rn-app/navigation/AuthNavigator.tsx b/rn-app/navigation/AuthNavigator.tsx new file mode 100644 index 0000000..ab1dd23 --- /dev/null +++ b/rn-app/navigation/AuthNavigator.tsx @@ -0,0 +1,20 @@ +import { createNativeStackNavigator } from '@react-navigation/native-stack' +import * as React from 'react' +import LoginScreen from '../screens/LoginScreen' + +const AuthStack = createNativeStackNavigator() + +function AuthNavigator() { + return ( + + + {/* Other auth related screens go here */} + + ) +} + +export default AuthNavigator diff --git a/rn-app/navigation/RootNavigator.tsx b/rn-app/navigation/RootNavigator.tsx new file mode 100644 index 0000000..d8b3b47 --- /dev/null +++ b/rn-app/navigation/RootNavigator.tsx @@ -0,0 +1,25 @@ +import { createNativeStackNavigator } from '@react-navigation/native-stack' +import * as React from 'react' +import AppNavigator from './AppNavigator' +import AuthNavigator from './AuthNavigator' + +const RootStack = createNativeStackNavigator() + +function RootNavigator() { + const isAuthenticated = false + return ( + + {isAuthenticated ? ( + + ) : ( + + )} + + ) +} + +export default RootNavigator diff --git a/rn-app/navigation/index.tsx b/rn-app/navigation/index.tsx index 21cea97..15eb5ef 100644 --- a/rn-app/navigation/index.tsx +++ b/rn-app/navigation/index.tsx @@ -1,107 +1,24 @@ -/** - * If you are not familiar with React Navigation, refer to the "Fundamentals" guide: - * https://reactnavigation.org/docs/getting-started - * - */ -import { FontAwesome } from '@expo/vector-icons'; -import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native'; -import { createNativeStackNavigator } from '@react-navigation/native-stack'; -import * as React from 'react'; -import { ColorSchemeName, Pressable } from 'react-native'; - -import Colors from '../constants/Colors'; -import useColorScheme from '../hooks/useColorScheme'; -import ModalScreen from '../screens/ModalScreen'; -import NotFoundScreen from '../screens/NotFoundScreen'; -import TabOneScreen from '../screens/TabOneScreen'; -import TabTwoScreen from '../screens/TabTwoScreen'; -import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types'; -import LinkingConfiguration from './LinkingConfiguration'; - -export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) { +import { + DarkTheme, + DefaultTheme, + NavigationContainer, +} from '@react-navigation/native' +import * as React from 'react' +import { ColorSchemeName } from 'react-native' +import LinkingConfiguration from './LinkingConfiguration' +import RootNavigator from './RootNavigator' + +export default function Navigation({ + colorScheme, +}: { + colorScheme: ColorSchemeName +}) { return ( + theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme} + > - ); -} - -/** - * A root stack navigator is often used for displaying modals on top of all other content. - * https://reactnavigation.org/docs/modal - */ -const Stack = createNativeStackNavigator(); - -function RootNavigator() { - return ( - - - - - - - - ); -} - -/** - * A bottom tab navigator displays tab buttons on the bottom of the display to switch screens. - * https://reactnavigation.org/docs/bottom-tab-navigator - */ -const BottomTab = createBottomTabNavigator(); - -function BottomTabNavigator() { - const colorScheme = useColorScheme(); - - return ( - - ) => ({ - title: 'Tab One', - tabBarIcon: ({ color }) => , - headerRight: () => ( - navigation.navigate('Modal')} - style={({ pressed }) => ({ - opacity: pressed ? 0.5 : 1, - })}> - - - ), - })} - /> - , - }} - /> - - ); -} - -/** - * You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/ - */ -function TabBarIcon(props: { - name: React.ComponentProps['name']; - color: string; -}) { - return ; + ) } diff --git a/rn-app/navigation/utils.tsx b/rn-app/navigation/utils.tsx new file mode 100644 index 0000000..dff7d61 --- /dev/null +++ b/rn-app/navigation/utils.tsx @@ -0,0 +1,11 @@ +import { FontAwesome } from '@expo/vector-icons' +import * as React from 'react' + +function TabBarIcon(props: { + name: React.ComponentProps['name'] + color: string +}) { + return +} + +export default TabBarIcon diff --git a/rn-app/screens/LoginScreen.tsx b/rn-app/screens/LoginScreen.tsx new file mode 100644 index 0000000..08ae4f1 --- /dev/null +++ b/rn-app/screens/LoginScreen.tsx @@ -0,0 +1,12 @@ +import { Layout, Text } from '@ui-kitten/components' +import React from 'react' + +const LoginScreen = () => { + return ( + + Login + + ) +} + +export default LoginScreen From a54e1dd668fe331fe1dbbfadb0a1f4016d815b6f Mon Sep 17 00:00:00 2001 From: Jaksa Malisic Date: Sat, 12 Mar 2022 21:44:55 +0100 Subject: [PATCH 2/2] feat(auth): implement login page ui --- rn-app/App.tsx | 14 ++-- rn-app/assets/lottie/trash.json | 1 + rn-app/components/Logo.tsx | 30 ++++++++ rn-app/components/ScreenLayout.tsx | 30 ++++++++ .../components/animations/TrashAnimation.tsx | 31 +++++++++ rn-app/go-collect-theme.ts | 3 + rn-app/screens/LoginScreen.tsx | 68 +++++++++++++++++-- 7 files changed, 166 insertions(+), 11 deletions(-) create mode 100644 rn-app/assets/lottie/trash.json create mode 100644 rn-app/components/Logo.tsx create mode 100644 rn-app/components/ScreenLayout.tsx create mode 100644 rn-app/components/animations/TrashAnimation.tsx diff --git a/rn-app/App.tsx b/rn-app/App.tsx index 058d1b8..3769f1d 100644 --- a/rn-app/App.tsx +++ b/rn-app/App.tsx @@ -23,15 +23,15 @@ export default function App() { <> - - + + - - + + ) diff --git a/rn-app/assets/lottie/trash.json b/rn-app/assets/lottie/trash.json new file mode 100644 index 0000000..e8a9d46 --- /dev/null +++ b/rn-app/assets/lottie/trash.json @@ -0,0 +1 @@ +{"v":"5.5.7","meta":{"g":"LottieFiles AE 0.1.9","a":"","k":"","d":"","tc":""},"fr":29.9700012207031,"ip":0,"op":59.0000024031193,"w":800,"h":800,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Dustbin Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":5,"s":[4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":18,"s":[4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":28,"s":[17]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":32,"s":[-15]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":34,"s":[-10]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":36,"s":[-0.133]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":38,"s":[3.903]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":41,"s":[-2.544]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":43,"s":[6.092]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":46,"s":[1.046]},{"t":49.0000019958109,"s":[4]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[401,317,0],"to":[0,4.167,0],"ti":[0,9.167,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":18,"s":[401,342,0],"to":[0,-9.167,0],"ti":[0,16,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":24,"s":[401,262,0],"to":[0,-16,0],"ti":[0,-0.333,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":28,"s":[401,246,0],"to":[0,0.333,0],"ti":[0,-11.833,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":34,"s":[401,264,0],"to":[0,1.892,0],"ti":[0,-2.76,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":36,"s":[401,290.067,0],"to":[0,1.477,0],"ti":[0,-1.293,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":38,"s":[401,313.215,0],"to":[0,1.023,0],"ti":[0,-0.643,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":41,"s":[401,299.697,0],"to":[0,1.529,0],"ti":[0,-1.37,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":43,"s":[401,314.025,0],"to":[0,2.322,0],"ti":[0,0.406,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":46,"s":[401,309.406,0],"to":[0,-0.377,0],"ti":[0,-2.237,0]},{"t":49.0000019958109,"s":[401,317,0]}],"ix":2},"a":{"a":0,"k":[201.676,144.693,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":5,"s":[195,195,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":18,"s":[195,195,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":41,"s":[195,196,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":43,"s":[195,199.75,100]},{"t":49.0000019958109,"s":[195,195,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[-0.024,-0.42],[0,0],[-0.422,0.025],[0,0],[0.033,0.419],[0,0],[0.429,-0.029]],"o":[[0,0],[0,0],[0,0],[0,0],[-0.419,0.029],[0,0],[0.03,0.418],[0,0],[0.42,-0.029],[0,0],[-0.025,-0.418],[0,0]],"v":[[10.142,0.779],[9.253,-8.87],[-10.901,-7.044],[-10.061,2.126],[-37.766,3.967],[-38.482,4.782],[-38.253,8.133],[-37.436,8.846],[37.764,3.838],[38.474,3.015],[38.243,-0.335],[37.426,-1.046]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2549019607843137,0.8509803921568627,0.5333333333333333,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[201.368,140.49],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":59.0000024031193,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Dustbin Outlines","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[200,200,0],"ix":2},"a":{"a":0,"k":[200,200,0],"ix":1},"s":{"a":0,"k":[99.398,99.398,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[1.197,0],[0,0],[0,1.069],[0,0],[-1.196,0],[0,0],[0,-1.069]],"o":[[0,1.069],[0,0],[-1.196,0],[0,0],[0,-1.069],[0,0],[1.197,0],[0,0]],"v":[[17.567,30.003],[15.389,31.949],[14.698,31.949],[12.53,30.003],[12.53,-31.128],[14.698,-33.068],[15.389,-33.068],[17.567,-31.128]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[1.196,0],[0,0],[0,1.069],[0,0],[-1.204,0],[0,0],[0,-1.07]],"o":[[0,1.069],[0,0],[-1.204,0],[0,0],[0,-1.07],[0,0],[1.196,0],[0,0]],"v":[[2.457,30.219],[0.296,32.158],[-0.395,32.158],[-2.564,30.219],[-2.564,-30.911],[-0.395,-32.861],[0.296,-32.861],[2.457,-30.911]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,0],[1.195,0],[0,0],[0,1.069],[0,0],[-1.185,0],[0,0],[0,-1.068]],"o":[[0,1.069],[0,0],[-1.185,0],[0,0],[0,-1.068],[0,0],[1.195,0],[0,0]],"v":[[-12.636,30.426],[-14.813,32.368],[-15.506,32.368],[-17.673,30.426],[-17.673,-30.706],[-15.506,-32.643],[-14.813,-32.643],[-12.636,-30.706]],"c":true},"ix":2},"nm":"Path 3","mn":"ADBE Vector Shape - Group","hd":false},{"ind":3,"ty":"sh","ix":4,"ks":{"a":0,"k":{"i":[[1.682,0],[0,0],[-0.123,-1.683],[0,0],[-1.681,-0.017],[0,0],[-0.117,1.674],[0,0]],"o":[[0,0],[-1.698,0],[0,0],[0.123,1.682],[0,0],[1.689,0.017],[0,0],[0.116,-1.683]],"v":[[32.23,-46.814],[-32.218,-46.814],[-35.289,-43.747],[-28.916,43.174],[-25.85,46.236],[26.271,46.798],[29.33,43.734],[35.296,-43.747]],"c":true},"ix":2},"nm":"Path 4","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2549019607843137,0.8509803921568627,0.5333333333333333,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[200.894,198.909],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":6,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":59.0000024031193,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":3,"nm":"Dustbin Outlines 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":5,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":18,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":28,"s":[-8]},{"i":{"x":[0.667],"y":[0.82]},"o":{"x":[0.333],"y":[0]},"t":32,"s":[4]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[-0.478]},"t":35,"s":[-2.408]},{"t":38.0000015477717,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[399,395,0],"to":[0,2.5,0],"ti":[0,3.333,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":18,"s":[399,410,0],"to":[0,-3.333,0],"ti":[0,4.667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":24,"s":[399,375,0],"to":[0,-4.667,0],"ti":[0,-3.333,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":29,"s":[399,382,0],"to":[0,3.333,0],"ti":[0,-2.167,0]},{"t":38.0000015477717,"s":[399,395,0]}],"ix":2},"a":{"a":0,"k":[200,200,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":5,"s":[166,166,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":18,"s":[166,136,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":24,"s":[166,168,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":29,"s":[166,166,100]},{"t":38.0000015477717,"s":[166,166,100]}],"ix":6}},"ao":0,"ip":0,"op":59.0000024031193,"st":0,"bm":0}],"markers":[]} \ No newline at end of file diff --git a/rn-app/components/Logo.tsx b/rn-app/components/Logo.tsx new file mode 100644 index 0000000..232b317 --- /dev/null +++ b/rn-app/components/Logo.tsx @@ -0,0 +1,30 @@ +import { Text } from '@ui-kitten/components' +import { StyleSheet, View, ViewStyle } from 'react-native' +import { goCollectTheme } from '../go-collect-theme' + +type LogoProps = { + style?: ViewStyle +} + +const Logo = ({ style }: LogoProps) => { + return ( + + + Go + + Collect + + ) +} + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + }, + go: { + color: goCollectTheme['color-primary-400'], + }, + collect: {}, +}) + +export default Logo diff --git a/rn-app/components/ScreenLayout.tsx b/rn-app/components/ScreenLayout.tsx new file mode 100644 index 0000000..fd739d3 --- /dev/null +++ b/rn-app/components/ScreenLayout.tsx @@ -0,0 +1,30 @@ +import { Layout } from '@ui-kitten/components' +import { ViewStyle } from 'react-native' +import { useSafeAreaInsets } from 'react-native-safe-area-context' + +type ScreenLayoutProps = { + children: JSX.Element + style?: ViewStyle +} + +const PADDING_X = 24 + +const ScreenLayout = ({ children, style }: ScreenLayoutProps) => { + const { top, bottom, left, right } = useSafeAreaInsets() + return ( + + {children} + + ) +} + +export default ScreenLayout diff --git a/rn-app/components/animations/TrashAnimation.tsx b/rn-app/components/animations/TrashAnimation.tsx new file mode 100644 index 0000000..4343dd6 --- /dev/null +++ b/rn-app/components/animations/TrashAnimation.tsx @@ -0,0 +1,31 @@ +import LottieView from 'lottie-react-native' +import React from 'react' +import { StyleSheet, View } from 'react-native' + +const TrashAnimation = () => { + return ( + + + + ) +} + +const styles = StyleSheet.create({ + animationContainer: { + alignItems: 'center', + justifyContent: 'center', + width: 50, + height: 150, + overflow: 'hidden', + }, +}) + +export default TrashAnimation diff --git a/rn-app/go-collect-theme.ts b/rn-app/go-collect-theme.ts index f3fcb56..c1a591f 100644 --- a/rn-app/go-collect-theme.ts +++ b/rn-app/go-collect-theme.ts @@ -3,6 +3,9 @@ import eva from '@eva-design/eva' export const goCollectTheme = { ...eva, + googleRed: '#DB4437', + facebookBlue: '#4267B2', + 'color-primary-100': '#CEFBD7', 'color-primary-200': '#9EF7BA', 'color-primary-300': '#6BE89E', diff --git a/rn-app/screens/LoginScreen.tsx b/rn-app/screens/LoginScreen.tsx index 08ae4f1..f36eaf2 100644 --- a/rn-app/screens/LoginScreen.tsx +++ b/rn-app/screens/LoginScreen.tsx @@ -1,12 +1,72 @@ -import { Layout, Text } from '@ui-kitten/components' +import { Button, Divider, Input, Text } from '@ui-kitten/components' import React from 'react' +import { KeyboardAvoidingView, StyleSheet, View } from 'react-native' +import TrashAnimation from '../components/animations/TrashAnimation' +import Logo from '../components/Logo' +import ScreenLayout from '../components/ScreenLayout' +import { goCollectTheme } from '../go-collect-theme' const LoginScreen = () => { return ( - - Login - + + + + + + Please login to continue + + + + + + + + + + + + + + + ) } +const styles = StyleSheet.create({ + container: { + alignItems: 'stretch', + }, + logoContainer: { + alignSelf: 'center', + alignItems: 'center', + }, + form: { + marginTop: 48, + }, +}) + export default LoginScreen