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:

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

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,
  },
});

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",
    }
})

Datos del usuario y logout

Sistema de formularios

Descarga el código base del proyecto

Pantalla de Mi cuenta

Formulario de Login

Sistema de formularios avanzados

Implementando Formik y Yup

Iniciando sesión

useAuth: manejo de sesiones con Custom Hooks y React Context

Datos del usuario y logout

Sistema de favoritos

Botón de añadir a favoritos

Almacenando un Pokémon favorito con AsyncStorage

Almacenando varios Pokémon favoritos

Pantalla de favoritos

Toggle en el botón de favoritos

Eliminar Pokémon de favoritos

Lista de Pokémon favoritos

Navegación hacia atrás en favoritos

Logout

Sincronizando información entre pantallas

Pre deploy

Configuración básica antes del BUILD

Cómo generar el APK y AAB para Android

Cómo generar la app para iOS

¿Quieres cursos más avanzados de React Native?