Merge pull request #5 from BOBpossible/feat/#3/Login

Feat/#3/login

App.tsx

@@ -1,11 +1,15 @@
 import React, {useEffect, useState} from 'react';
 import {StyleSheet, SafeAreaView} from 'react-native';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {createStackNavigator} from '@react-navigation/stack';
 import Splash from './src/screens/Splash';
 import {NavigationContainer} from '@react-navigation/native';
 import {MainNavigator} from './src/nav';
 import {AuthNavigator} from './src/nav';
+import 'react-native-gesture-handler';
+import {enableScreens} from 'react-native-screens';
 
+enableScreens();
 export default function App() {
   const Stack = createStackNavigator();
 
@@ -21,7 +25,7 @@ export default function App() {
   }, []);
 
   return (
-    <SafeAreaView style={[styles.SafeAreaView]}>
+    <SafeAreaProvider>
       <NavigationContainer>
         <Stack.Navigator screenOptions={{headerShown: false, gestureEnabled: false}}>
           {loading ? (
@@ -33,7 +37,7 @@ export default function App() {
           )}
         </Stack.Navigator>
       </NavigationContainer>
-    </SafeAreaView>
+    </SafeAreaProvider>
   );
 }
 

package.json

@@ -13,7 +13,9 @@
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/bottom-tabs": "^6.3.1",
     "@react-navigation/native": "^6.0.10",
+    "@react-navigation/native-stack": "^6.6.2",
     "@react-navigation/stack": "^6.2.1",
+    "@types/react": "^18.0.10",
     "moment": "^2.29.3",
     "moment-with-locales-es6": "^1.0.1",
     "react": "17.0.2",
@@ -31,7 +33,7 @@
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "^2.0.0",
     "@types/jest": "^26.0.23",
-    "@types/react-native": "^0.67.3",
+    "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "@types/react-test-renderer": "^17.0.1",
     "@typescript-eslint/eslint-plugin": "^5.17.0",

src/components/AnimatedHeader.tsx

@@ -8,13 +8,14 @@ import {CircleBar} from './CircleBar';
 const HEADER_HEIGHT = 250;
 type AnimatedHeaderProps = {
   animatedValue: Animated.Value;
+  paddingTop: number;
 };
 
-export const AnimatedHeader: FC<AnimatedHeaderProps> = ({animatedValue}) => {
+export const AnimatedHeader: FC<AnimatedHeaderProps> = ({animatedValue, paddingTop}) => {
   const heightAnimStyle = useStyle({
     height: animatedValue.interpolate({
       inputRange: [0, HEADER_HEIGHT],
-      outputRange: [HEADER_HEIGHT, 120],
+      outputRange: [HEADER_HEIGHT, 120 + paddingTop],
       extrapolate: 'clamp',
     }),
   });
@@ -46,6 +47,7 @@ export const AnimatedHeader: FC<AnimatedHeaderProps> = ({animatedValue}) => {
 
   const styles = StyleSheet.create({
     headerWrap: {
+      paddingTop,
       position: 'absolute',
       top: 0,
       left: 0,

src/components/CheckBox.tsx

@@ -0,0 +1,60 @@
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import type {FC} from 'react';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+type CheckBoxProps = {
+  onPress: () => void;
+  title: string;
+  isChecked: boolean;
+  isCheckAll?: boolean;
+};
+let scale = 1;
+
+export const CheckBox: FC<CheckBoxProps> = ({onPress, title, isChecked, isCheckAll}) => {
+  isCheckAll ? (scale = 1.2) : (scale = 1);
+  return (
+    <View style={styles.container}>
+      <Pressable onPress={onPress}>
+        <View style={isChecked ? styles.markedCircle : styles.unmarkedCircle}>
+          <Icon
+            name="check"
+            size={18 * scale}
+            color="#FFFFFF"
+            style={isChecked ? styles.markedCheck : styles.unmarkedCheck}
+          />
+        </View>
+      </Pressable>
+      <Text style={[styles.title, {fontWeight: isCheckAll ? '600' : '400'}]}>{title}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    flexDirection: 'row',
+    width: '100%',
+    marginTop: 24,
+  },
+  title: {
+    fontSize: 16 * scale,
+    color: '#000',
+    marginLeft: 16,
+  },
+  markedCircle: {
+    backgroundColor: '#6C69FF',
+    borderRadius: 18,
+    borderColor: '#DFDFDF',
+    borderWidth: 2,
+  },
+  unmarkedCircle: {
+    backgroundColor: 'transparent',
+    borderRadius: 18,
+    borderColor: '#DFDFDF',
+    borderWidth: 2,
+  },
+  markedCheck: {opacity: 1},
+  unmarkedCheck: {opacity: 0},
+});

src/components/RegisterHeader.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import type {FC} from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+
+export type RegisterHeaderProps = {
+  goBack: () => void;
+  pageNum: number;
+};
+
+export const RegisterHeader: FC<RegisterHeaderProps> = ({goBack, pageNum}) => {
+  return (
+    <View style={[styles.headerWrap]}>
+      <TouchableOpacity onPress={goBack}>
+        <View style={[styles.backButton]}>
+          <Icon name="arrow-left" size={24} color="black" />
+        </View>
+      </TouchableOpacity>
+      {pageNum === 0 && <View />}
+      {pageNum === 1 && (
+        <View>
+          <Text style={[styles.progressText]}>1/2</Text>
+        </View>
+      )}
+      {pageNum === 2 && (
+        <View>
+          <Text style={[styles.progressText]}>2/2</Text>
+        </View>
+      )}
+      <View style={[styles.backButton, styles.disable]}>
+        <Icon name="arrow-left" size={24} color="black" />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerWrap: {flexDirection: 'row', justifyContent: 'space-between', margin: 12},
+  backButton: {
+    zIndex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  disable: {opacity: 0},
+  progressText: {
+    color: '#949494',
+    fontSize: 16,
+  },
+});