Feature/hu 06/register screen

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "@expo-google-fonts/poppins": "^0.2.3",
     "@pharmatech/sdk": "^0.1.0",
+    "date-fns": "^4.1.0",
     "expo": "~52.0.37",
     "expo-constants": "~17.0.7",
     "expo-font": "~13.0.4",

src/app/_layout.tsx

@@ -1,6 +1,11 @@
 // app/_layout.tsx
 import React, { useEffect } from 'react';
-import { View, ActivityIndicator, StyleSheet } from 'react-native';
+import {
+  View,
+  ActivityIndicator,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
 import * as SplashScreen from 'expo-splash-screen';
 import {
   useFonts,
@@ -9,6 +14,7 @@ import {
   Poppins_600SemiBold,
 } from '@expo-google-fonts/poppins';
 import { Stack } from 'expo-router/stack';
+import { ChevronLeftIcon } from 'react-native-heroicons/outline';
 
 SplashScreen.preventAutoHideAsync();
 
@@ -34,12 +40,27 @@ export default function RootLayout() {
   }
 
   return (
-    <Stack>
+    <Stack
+      screenOptions={({ navigation }) => ({
+        headerBackVisible: false,
+        headerLeft: () =>
+          navigation.canGoBack() ? (
+            <TouchableOpacity onPress={navigation.goBack}>
+              <ChevronLeftIcon width={24} height={24} color="#000" />
+            </TouchableOpacity>
+          ) : null,
+        headerBackTitleVisible: false,
+      })}
+    >
       <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
       <Stack.Screen
         name="login"
         options={{ headerTitle: '', headerTransparent: true }}
       />
+      <Stack.Screen
+        name="register"
+        options={{ headerTitle: '', headerTransparent: true }}
+      />
       <Stack.Screen
         name="success"
         options={{ headerTitle: '', headerTransparent: true }}

src/app/register.tsx

@@ -0,0 +1,3 @@
+// src/app/register.tsx
+import RegisterScreen from '../screens/RegisterScreen';
+export default RegisterScreen;

src/components/Calendar.tsx

@@ -68,13 +68,25 @@ interface MarkedDates {
 const CustomCalendar: React.FC<{
   onAccept?: (date: string) => void;
   onCancel?: () => void;
-}> = () => {
+}> = ({ onAccept, onCancel }) => {
   const [selectedDate, setSelectedDate] = useState<string>('');
   const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
   const [currentMonth, setCurrentMonth] = useState(new Date().getMonth() + 1);
   const [showYearPicker, setShowYearPicker] = useState(false);
   const [showMonthPicker, setShowMonthPicker] = useState(false);
 
+  const handleAccept = () => {
+    if (selectedDate) {
+      onAccept?.(selectedDate);
+      onCancel?.();
+    }
+  };
+
+  const handleCancel = () => {
+    setSelectedDate('');
+    onCancel?.();
+  };
+
   const startingYear = new Date().getFullYear();
   const years = useMemo(
     () =>
@@ -223,19 +235,14 @@ const CustomCalendar: React.FC<{
           mode="filled"
           size="medium"
           style={{ width: 136, height: 50 }}
-          onPress={() => {
-            console.log('Cancelado');
-            setSelectedDate('');
-          }}
+          onPress={handleCancel}
         />
         <Button
           title="Aceptar"
           variant="primary"
           mode="filled"
           size="medium"
-          onPress={() => {
-            console.log('Fecha aceptada:', selectedDate);
-          }}
+          onPress={handleAccept}
           style={{ marginLeft: 12, width: 136, height: 50 }}
         />
       </View>

src/components/DatePickerInput.tsx

@@ -0,0 +1,76 @@
+// src/components/DatePickerInput.tsx
+import React, { useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  Modal,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import Input from './Input';
+import CustomCalendar from './Calendar';
+import { CalendarDaysIcon } from 'react-native-heroicons/outline';
+import { Colors } from '../styles/theme';
+import { format } from 'date-fns';
+
+const DatePickerInput: React.FC<{
+  label?: string;
+  value?: string;
+  placeholder?: string;
+  getValue?: (date: string) => void;
+}> = ({ label, value, placeholder, getValue }) => {
+  const [showCalendar, setShowCalendar] = useState(false);
+  const [selectedDate, setSelectedDate] = useState(value || '');
+
+  const handleDateSelect = (date: string) => {
+    const formattedDate = format(new Date(date), 'dd/MM/yyyy');
+    setSelectedDate(formattedDate);
+    getValue?.(date);
+    setShowCalendar(false);
+  };
+
+  const handleCloseModal = () => {
+    setShowCalendar(false);
+  };
+
+  return (
+    <View>
+      <TouchableOpacity onPress={() => setShowCalendar(true)}>
+        <Input
+          label={label}
+          placeholder={placeholder}
+          value={selectedDate}
+          isEditable={false}
+          icon={<CalendarDaysIcon color={Colors.iconMainDefault} size={20} />}
+          backgroundColor={Colors.menuWhite}
+        />
+      </TouchableOpacity>
+
+      <Modal visible={showCalendar} transparent animationType="slide">
+        <TouchableWithoutFeedback onPress={handleCloseModal}>
+          <View style={styles.modalContainer}>
+            <TouchableWithoutFeedback>
+              <View>
+                <CustomCalendar
+                  onAccept={handleDateSelect}
+                  onCancel={handleCloseModal}
+                />
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    padding: 20,
+  },
+});
+
+export default DatePickerInput;

src/components/Input.tsx

@@ -22,6 +22,7 @@ interface InputProps {
   errorText?: string;
   useDefaultValidation?: boolean;
   showIcon?: boolean;
+  icon?: React.ReactNode;
   border?: BorderType;
   isEditable?: boolean;
   backgroundColor?: string;
@@ -38,6 +39,7 @@ const Input: React.FC<InputProps> = ({
   errorText,
   useDefaultValidation = true,
   showIcon = false,
+  icon,
   border = 'default',
   isEditable = true,
   backgroundColor,
@@ -50,6 +52,10 @@ const Input: React.FC<InputProps> = ({
   const [isValid, setIsValid] = useState(true);
   const [showPassword, setShowPassword] = useState(false);
 
+  useEffect(() => {
+    setIvalue(value);
+  }, [value]);
+
   const validateInput = (input: string) => {
     setIvalue(input);
     if (getValue) {
@@ -157,7 +163,9 @@ const Input: React.FC<InputProps> = ({
           style={{ flex: 1, height: 44 }}
         />
 
-        {showIcon ? (
+        {icon ? (
+          icon
+        ) : showIcon ? (
           !isValid && hasBlurred ? (
             <ExclamationCircleIcon
               color={
@@ -223,6 +231,7 @@ const styles = StyleSheet.create({
   label: {
     fontSize: FontSizes.label.size,
     marginBottom: 4,
+    color: Colors.textMain,
   },
   helperText: {
     fontSize: FontSizes.label.size,

src/components/RadioButton.tsx

@@ -1,13 +1,20 @@
 import React from 'react';
-import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 import PoppinsText from './PoppinsText';
-import { Colors } from '../styles/theme';
+import { Colors, FontSizes } from '../styles/theme';
 
 interface RadioButtonProps {
   label: string;
   value: string;
   selectedValue: string;
   onValueChange: (value: string) => void;
+  style?: StyleProp<ViewStyle>;
 }
 
 const RadioButton: React.FC<RadioButtonProps> = ({
@@ -29,7 +36,9 @@ const RadioButton: React.FC<RadioButtonProps> = ({
       >
         {selectedValue === value && <View style={styles.innerCircle} />}
       </View>
-      <PoppinsText style={styles.label}>{label}</PoppinsText>
+      <PoppinsText weight="regular" style={styles.label}>
+        {label}
+      </PoppinsText>
     </TouchableOpacity>
   );
 };
@@ -61,6 +70,8 @@ const styles = StyleSheet.create({
   label: {
     marginLeft: 8,
     color: Colors.textMain,
+    fontSize: FontSizes.label.size,
+    lineHeight: FontSizes.label.lineHeight,
   },
 });