new login and start up screen

navigation/AppNavigation.js

@@ -4,14 +4,18 @@ import { createStackNavigator } from '@react-navigation/stack';
 import HomeScreen from '../screens/home/HomeScreen';
 import LibraryScreen from '../screens/library/LibraryScreen';
 import ProfileScreen from '../screens/Profile/ProfileScreen';
-
-
+import LoginScreen from '../screens/Login/LoginScreen';
+import StartScreen from '../screens/Login/StartScreen';
+import RegisterScreen from '../screens/Login/RegisterScreen';
 const Stack = createStackNavigator();
 
 function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator initialRouteName="Home" headerMode="none">
+      <Stack.Navigator initialRouteName="StartScreen" headerMode="none">
+      <Stack.Screen name="StartScreen" component={StartScreen} />
+      <Stack.Screen name="Login" component={LoginScreen} />
+      <Stack.Screen name="Register" component={RegisterScreen} />
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen name="Library" component={LibraryScreen} />
         <Stack.Screen name="Profile" component ={ProfileScreen} />

package.json

@@ -24,9 +24,11 @@
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
     "react-native-collapsible": "^1.5.3",
     "react-native-gesture-handler": "~1.8.0",
+    "react-native-paper": "^4.4.1", 
     "react-native-reanimated": "~1.13.0",
     "react-native-safe-area-context": "3.1.9",
     "react-native-screens": "^2.18.1",
+    "react-native-status-bar-height": "^2.6.0",
     "react-native-vector-icons": "^8.1.0",
     "react-native-web": "^0.15.7",
     "react-navigation": "^4.4.4",

screens/Login/BackButton.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TouchableOpacity, Image, StyleSheet } from 'react-native';
+import { getStatusBarHeight } from 'react-native-status-bar-height';
+
+export default function BackButton({ goBack }) {
+  return (
+    <TouchableOpacity onPress={goBack} style={styles.container}>
+      <Image
+        style={styles.image}
+        source={require('./arrow_back.png')}
+      />
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 10 + getStatusBarHeight(),
+    left: 4,
+  },
+  image: {
+    width: 24,
+    height: 24,
+  },
+})

screens/Login/Background.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ImageBackground, StyleSheet, KeyboardAvoidingView } from 'react-native';
+import { theme } from './Theme';
+
+export default function Background({ children }) {
+  return (
+    <ImageBackground
+      source={require('./background_dot.png')}
+      resizeMode="repeat"
+      style={styles.background}
+    >
+      <KeyboardAvoidingView style={styles.container} behavior="padding">
+        {children}
+      </KeyboardAvoidingView>
+    </ImageBackground>
+  )
+}
+
+const styles = StyleSheet.create({
+  background: {
+    flex: 1,
+    width: '100%',
+    backgroundColor: theme.colors.surface,
+  },
+  container: {
+    flex: 1,
+    padding: 20,
+    width: '100%',
+    maxWidth: 340,
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

screens/Login/Button.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Button as PaperButton } from 'react-native-paper';
+import { theme } from './Theme.js';
+
+export default function Button({ mode, style, ...props }) {
+  return (
+    <PaperButton
+      style={[
+        styles.button,
+        mode === 'outlined' && {
+          backgroundColor: theme.colors.surface,
+          borderColor: theme.colors.text,
+        },
+        style,
+      ]}
+      labelStyle={styles.text}
+      mode={mode}
+      {...props}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  button: {
+    width: '100%',
+    marginVertical: 10,
+    paddingVertical: 2,
+  },
+  text: {
+    fontWeight: 'bold',
+    fontSize: 15,
+    lineHeight: 26,
+  },
+})

screens/Login/Header.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Text } from 'react-native-paper';
+import { theme } from './Theme';
+
+export default function Header(props) {
+  return <Text style={styles.header} {...props} />
+}
+
+const styles = StyleSheet.create({
+  header: {
+    fontSize: 21,
+    color: theme.colors.primary,
+    fontWeight: 'bold',
+    paddingVertical: 12,
+  },
+})

screens/Login/LoginScreen.js

@@ -0,0 +1,96 @@
+import React, { useState } from 'react'
+import { TouchableOpacity, StyleSheet, View } from 'react-native'
+import { Text } from 'react-native-paper'
+import Background from './Background.js';
+import Logo from './Logo.js';
+import Header from './Header.js';
+import Button from './Button.js';
+import TextInput from './TextInput.js';
+import BackButton from './BackButton.js';
+import { theme } from './Theme.js';
+import { emailValidator } from './emailValidator.js';
+import { passwordValidator } from './passwordValidator.js';
+
+export default function LoginScreen({ navigation }) {
+  const [email, setEmail] = useState({ value: '', error: '' })
+  const [password, setPassword] = useState({ value: '', error: '' })
+
+  const onLoginPressed = () => {
+    const emailError = emailValidator(email.value)
+    const passwordError = passwordValidator(password.value)
+    if (emailError || passwordError) {
+      setEmail({ ...email, error: emailError })
+      setPassword({ ...password, error: passwordError })
+      return
+    }
+    navigation.reset({
+      index: 0,
+      routes: [{ name: 'Dashboard' }],
+    })
+  }
+
+  return (
+    <Background>
+      <BackButton goBack={navigation.goBack} />
+      <Logo />
+      <Header>Welcome back.</Header>
+      <TextInput
+        label="Email"
+        returnKeyType="next"
+        value={email.value}
+        onChangeText={(text) => setEmail({ value: text, error: '' })}
+        error={!!email.error}
+        errorText={email.error}
+        autoCapitalize="none"
+        autoCompleteType="email"
+        textContentType="emailAddress"
+        keyboardType="email-address"
+      />
+      <TextInput
+        label="Password"
+        returnKeyType="done"
+        value={password.value}
+        onChangeText={(text) => setPassword({ value: text, error: '' })}
+        error={!!password.error}
+        errorText={password.error}
+        secureTextEntry
+      />
+      <View style={styles.forgotPassword}>
+        <TouchableOpacity
+          onPress={() => navigation.navigate('ResetPasswordScreen')}
+        >
+          <Text style={styles.forgot}>Forgot your password?</Text>
+        </TouchableOpacity>
+      </View>
+      <Button mode="contained" onPress={onLoginPressed}>
+        Login
+      </Button>
+      <View style={styles.row}>
+        <Text>Don’t have an account? </Text>
+        <TouchableOpacity onPress={() => navigation.replace('RegisterScreen')}>
+          <Text style={styles.link}>Sign up</Text>
+        </TouchableOpacity>
+      </View>
+    </Background>
+  )
+}
+
+const styles = StyleSheet.create({
+  forgotPassword: {
+    width: '100%',
+    alignItems: 'flex-end',
+    marginBottom: 24,
+  },
+  row: {
+    flexDirection: 'row',
+    marginTop: 4,
+  },
+  forgot: {
+    fontSize: 13,
+    color: theme.colors.text,
+  },
+  link: {
+    fontWeight: 'bold',
+    color: theme.colors.primary,
+  },
+})

screens/Login/Logo.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+export default function Logo() {
+  return <Image source={require('./logo.png')} style={styles.image} />
+}
+
+const styles = StyleSheet.create({
+  image: {
+    width: 200,
+    height: 80,
+    marginBottom: 8,
+  },
+})

screens/Login/Paragraph.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Text } from 'react-native-paper';
+
+export default function Paragraph(props) {
+  return <Text style={styles.text} {...props} />
+}
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 15,
+    lineHeight: 21,
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+})