Datos del usuario y logout

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