You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
14 Hrs
27 Min
47 Seg

Datos del usuario y logout

7/21
Resources

Contributions 6

Questions 0

Sort by:

Want to see more contributions, questions and answers from the community?

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,
  },
});
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: ![](https://static.platzi.com/media/user_upload/imagen-52494d02-d4bb-43d8-99b9-e3c637db2496.jpg)

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


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