Feat/#3/login

ios/Podfile.lock

@@ -355,6 +355,8 @@ PODS:
     - React-perflogger (= 0.68.2)
   - RNCMaskedView (0.1.11):
     - React
+  - RNDateTimePicker (6.1.3):
+    - React-Core
   - RNGestureHandler (2.4.2):
     - React-Core
   - RNReanimated (2.8.0):
@@ -451,6 +453,7 @@ DEPENDENCIES:
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
+  - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
@@ -540,6 +543,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
+  RNDateTimePicker:
+    :path: "../node_modules/@react-native-community/datetimepicker"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
@@ -597,6 +602,7 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: b960b687d2dfef0d3761fbb187e01812ebab8b23
   ReactCommon: 095366164a276d91ea704ce53cb03825c487a3f2
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
+  RNDateTimePicker: 04b805a3cb4d386e5e6aff54b47ace7bad706fda
   RNGestureHandler: 61628a2c859172551aa2100d3e73d1e57878392f
   RNReanimated: 64573e25e078ae6bec03b891586d50b9ec284393
   RNScreens: 40a2cb40a02a609938137a1e0acfbf8fc9eebf19

package.json

@@ -10,6 +10,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
+    "@react-native-community/datetimepicker": "^6.1.3",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/bottom-tabs": "^6.3.1",
     "@react-navigation/native": "^6.0.10",
@@ -22,11 +23,13 @@
     "react-native": "0.68.2",
     "react-native-gesture-handler": "^2.4.2",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-modal-datetime-picker": "^13.1.2",
     "react-native-paper": "^4.12.1",
     "react-native-reanimated": "^2.8.0",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-screens": "^3.13.1",
-    "react-native-vector-icons": "^9.1.0"
+    "react-native-vector-icons": "^9.1.0",
+    "recoil": "^0.7.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

src/components/CategoryItem.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type {FC} from 'react';
+import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
+import {Colors} from 'react-native-paper';
+
+export type CategoryItemProps = {
+  onPress: () => void;
+  title: string;
+  isSelected: boolean;
+};
+
+export const CategoryItem: FC<CategoryItemProps> = ({onPress, title, isSelected}) => {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <View style={[styles.categoryItems, isSelected ? styles.selected : styles.notSelected]}>
+        <Text style={[isSelected && styles.selectedText, styles.categoryText]}>{title}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  categoryItems: {
+    width: 105,
+    height: 56,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 10,
+  },
+  selected: {borderColor: '#6C69FF', backgroundColor: '#F6F6FE'},
+  selectedText: {color: '#6C69FF'},
+  categoryText: {fontSize: 16},
+  notSelected: {borderColor: '#DFDFDF'},
+});

src/components/index.ts

@@ -4,3 +4,4 @@ export * from './CircleBar';
 export * from './RegisterNextButton';
 export * from './RegisterHeader';
 export * from './CheckBox';
+export * from './CategoryItem';

src/data/RegisterInterface.ts

@@ -16,5 +16,5 @@ export type RegisterInterface = {
   gender: gender;
   birthDate: Date | null;
   address: string;
-  category: number[];
+  category: {};
 };