scrollview y pasar params del usuario

mobile-ui/App.js

@@ -24,18 +24,18 @@ function HomeTab({route}) {
 const [selected, setSelected] = useState(0);
 const user = route.params;
 
-console.log(user);
+// console.log(user);
 
   return (
-    <Tab.Navigator initialRouteName="Comunicados" > 
+    <Tab.Navigator params={user} initialRouteName="Comunicados" > 
-    <Tab.Screen  name="Comunicados" component={Home}  params={user} options={{headerStyle: {
+    <Tab.Screen  name="Comunicados" component={Home}  initialParams={user} options={{headerStyle: {
       backgroundColor: "#D7A86E"
     }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(0)}
      /> 
-    <Tab.Screen  name="Reservas" component={Reservas } params={user} options={{headerStyle: {
+    <Tab.Screen  name="Reservas" component={Reservas } initialParams={user} options={{headerStyle: {
       backgroundColor: "#D7A86E"
     }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)}  /> 
-    <Tab.Screen  name="Perfil" component={Profile} params={user} options={{headerStyle: {
+    <Tab.Screen  name="Perfil" component={Profile} initialParams={user} options={{headerStyle: {
       backgroundColor: "#D7A86E"
     }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(2)} /> 
   </Tab.Navigator>

mobile-ui/components/Home.js

@@ -6,6 +6,7 @@ import {
     Box,
 Pressable,
     Spacer, 
+    ScrollView
   } from "native-base";
   import { MaterialCommunityIcons } from '@expo/vector-icons'; 
 export default function Home(){
@@ -14,6 +15,12 @@ export default function Home(){
     return (
 
       <Box alignItems="center">
+
+<ScrollView width='100%' h='550' ml='1' _contentContainerStyle={{
+      px: "20px",
+      mb: "4",
+      minW: "72"
+    }}>
       <Pressable onPress={() => console.log("I'm Pressed")} rounded="8" overflow="hidden" borderWidth="1" borderColor="coolGray.300" maxW="96" shadow="3" bg="coolGray.100" p="5" marginTop="4">
         <Box>
           <HStack alignItems="center">
@@ -58,6 +65,7 @@ export default function Home(){
          
         </Box>
       </Pressable>
+      </ScrollView>
     </Box>
       //   <Center width={"100%"} marginTop={"auto"}>
            

mobile-ui/components/Profile.js

@@ -5,23 +5,31 @@ import {
     Heading, 
     VStack, 
     FormControl,  
-    Input, 
     Button,
-    Center
+    Center,
+    ScrollView
   } from "native-base";
 
+  import { View, TextInput, StyleSheet } from "react-native";
+
 export default function Profile({route, navigation}){
 
-  const user = route.params; 
+  const userData = JSON.parse(JSON.stringify(route.params));
 
-  console.log(user);
+  console.log(userData.user);
     return (
         <Center>
+
+          <ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
+      px: "20px",
+      mb: "4",
+      minW: "72"
+    }}>
              <Box safeArea p="2" w="90%" maxW="290" py="8">
         <Heading size="lg" color="coolGray.800" _dark={{
         color: "warmGray.50"
       }} fontWeight="semibold">
-          Katoikia
+          Bienvenido {userData.user.name}
         </Heading>
         <Heading mt="1" color="coolGray.600" _dark={{
         color: "warmGray.200"
@@ -29,21 +37,25 @@ export default function Profile({route, navigation}){
           Modifique sus datos
         </Heading>
         <VStack space={3} mt="5">
+        <FormControl>
+            <FormControl.Label>DNI</FormControl.Label>
+            <TextInput type="text" defaultValue={userData.user.dni} editable='false'/>
+          </FormControl>
           <FormControl>
             <FormControl.Label>Nombre</FormControl.Label>
-            <Input type="text"/>
+            <TextInput style={styles.input} type="text" defaultValue={userData.user.name}/>
           </FormControl>
           <FormControl>
-            <FormControl.Label>Correo Electrónico</FormControl.Label>
+            <FormControl.Label>Apellido</FormControl.Label>
-            <Input type="text" />
+            <TextInput style={styles.input} type="text"defaultValue={userData.user.last_name} />
           </FormControl>
           <FormControl>
-            <FormControl.Label>Teléfono</FormControl.Label>
+            <FormControl.Label>Correo electrónico</FormControl.Label>
-            <Input type="text" />
+            <TextInput style={styles.input} type="text" defaultValue={userData.user.email}/>
           </FormControl>
           <FormControl>
             <FormControl.Label>Contraseña actual</FormControl.Label>
-            <Input type="password" />
+            <TextInput style={styles.input} type="password" defaultValue=""/>
           </FormControl>
           
           <Button mt="2" backgroundColor="orange.300">
@@ -54,7 +66,29 @@ export default function Profile({route, navigation}){
           </Button>
         </VStack>
       </Box>
+
+      </ScrollView>
         </Center>
        
     )
+
+   
 }
+
+const styles = StyleSheet.create({
+  input: {
+    height: 10,
+    margin:3,
+    borderWidth: 0.5,
+    padding: 5,
+    flex: 1,
+    paddingTop: 9,
+    paddingRight: 19,
+    paddingBottom: 20,
+    paddingLeft: 0,
+    marginTop: 6, 
+    marginBottom:6, 
+    borderRadius: 4
+  }
+  })
+