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?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 4
Preguntas 0
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.
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,
},
});
De verdad que esta serie ha sido de mucho provecho. Vamos al grano y nos dan los conocimientos para luego poder escalarlo nosotros mismos.
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",
}
})
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.