Datos del usuario y logout

Clase 7 de 21 • Curso de React Native: Formularios, Almacenamiento y Deploy

Manuel Marín

student•

Hola, Recordar que los botones de React Native no aceptan la propiedad “style”, así que para agregarle el padding se debe meter el Button dentro de un View y darle el padding al View.

Si no, la otra alternativa es utilizar otros elementos como Pressable o TouchableOpacity.

Carlos Hernandez

student•

Gracias por esto, con razón no me funcionaban😅

Sabino Fernández

student•

Gracias, ya decía yo por qué no funcionaba 😭💕

Gustavo Pú

student•

import React from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import useAuth from "../../hooks/useAuth";

export default function UserData() {
  const { auth, logout } = useAuth();

  return (
    <View style={styles.content}>
      <View style={styles.titleBlock}>
        <Text style={styles.title}>Bienvenido,</Text>
        <Text style={styles.title}>{`${auth.firstName} ${auth.lastName}`}</Text>
      </View>

      <View style={styles.dataContent}>
        <ItemMenu title="Nombre" text={`${auth.firstName} ${auth.lastName}`} />
        <ItemMenu title="Username" text={auth.username} />
        <ItemMenu title="Email" text={auth.email} />
        <ItemMenu title="Total Favoritos" text={`0 pokemons`} />
      </View>

      <Button title="Desconectarse" onPress={logout} style={styles.btnLogoun} />
    </View>
  );
}

function ItemMenu(props) {
  const { title, text } = props;

  return (
    <View style={styles.itemMenu}>
      <Text style={styles.itemMenuTitle}>{title}:</Text>
      <Text>{text}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  content: {
    marginHorizontal: 20,
    marginTop: 20,
  },
  titleBlock: {
    marginBottom: 30,
  },
  title: {
    fontWeight: "bold",
    fontSize: 22,
  },
  dataContent: {
    marginBottom: 20,
  },
  itemMenu: {
    flexDirection: "row",
    paddingVertical: 20,
    borderBottomWidth: 1,
    borderColor: "#CFCFCF",
  },
  itemMenuTitle: {
    fontWeight: "bold",
    paddingRight: 10,
    width: 120,
  },
  btnLogoun: {
    paddingTop: 20,
  },
});

David Rangel

student•

Les comparto el repo del proyecto a Agosto de 2025, con Typescript, React Form y Zustand:

https://github.com/dr1602/poke-native/tree/feat/RN3/class7

Karen Velásquez

student•

No me funcionaba bien el espaciado entre el title y el text, lo que hice en si fue separar los ItemMenu por un view para lo que identifique como grupo, asi lo hice:

Alejandro Chavez

student•

De verdad que esta serie ha sido de mucho provecho. Vamos al grano y nos dan los conocimientos para luego poder escalarlo nosotros mismos.

Hugo Alexander Hernandez Serrano

student•

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'

export default function CustomButton({ title, handleOnPress}) {
    return (
        <View style={ styles.buttonContainer }>
            <TouchableOpacity
                style={styles.customBtnBG}
                onPress={ handleOnPress}
            >
                <Text style={styles.customBtnText}>{ title }</Text>
            </TouchableOpacity>
        </View>
    )
}

const styles = StyleSheet.create({
    buttonContainer: {
        marginVertical: 20,
        height: 60
    },
    customBtnBG: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: "#007aff",
        paddingHorizontal: 30,
        paddingVertical: 5,
        borderRadius: 30,
        height: "100%",
        width: "100%"
    },
     customBtnText: {
        fontSize: 20,
        fontWeight: '400',
        color: "#fff",
    }
})

Karen Velásquez

student•

No me esta funcionando bien el espaciado entre el title y el text :c