Formulario de Login

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

Darío Condori Humerez

student•

Si no les funciona el placeholder simplemente es por que deben darle un color

            <TextInput
                style={styles.input}
                placeholder="username"
                placeholderTextColor={'#686a68'}
                autoCapitalize='none'

            />

Luis Alejandro Nieto Ruth

student•

Archivo LoginForm.js

import React from 'react'
import { View, Text, StyleSheet, TextInput, Button } from 'react-native'
import { log } from 'react-native-reanimated'

export default function LoginForm() {
  return (
    <View>
      <Text style={styles.title}>Iniciar Sesión</Text>
      <TextInput placeholder="Usuario"
        style={styles.input}
        autoCapitalize='none'
      />
      <TextInput placeholder="Contraseña"
        style={styles.input}
        secureTextEntry={true}
      />
      <Button title="Enviar" onPress={() => console.log('Enviar')} />
    </View>
  )
}

const styles = StyleSheet.create({
  title: {
    textAlign: 'center',
    fontSize: 28,
    fontWeight: 'bold',
    marginTop: 50,
    marginBottom: 20
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
    borderRadius: 10
  }

})

Añaqui Apolinar Morales

student•

Gracias por el aporte, es muy util

José Luis Caicedo Lara

student•

atributo secureTextEntry={true} para ocultar los caracteres al escribir la contraseña

David Rangel

student•

Les dejo mi repo con los avances de la clase:

Gustavo Pú

student•

como puedo agregarle estilos al componente Button ??

Daniel Rodriguez Davila

student•

¿Por qué le agrego estilos a los botones y no son aplicados?

Bulmaro Arellano Navarrete

student•

Hola,

123¿Agregaste esilos a los botones y estos estilos no se ven reflejados?

1.- Prueba revisando la sintaxis de tu codigo cs, revisa si estas usando los selectores indicados.

2.- Compártenos tu código fuente para revisar y hace pruebas de ser necesario.

3.- Revisa si tienes otro código CSS que esté sobreescribiendo a las otras reglas, quizás tengan un !important.

En fin, podríamos continuar divagando con esto, mejor compártenos tu código. Gracias

Manuel Marín

student•

Hola, es porque los botones de React Native no aceptan estilos directamente, lo que puedes hacer es cambiarle el color (con la propiedad "color") o meterlo dentro de un View y darle estilo al view, pero sería para posicionamiento más que nada. https://reactnative.dev/docs/button

Lo otro sería utilizar otros elementos como TouchableOpacity que si da mucha más libertad que el botón tradicional: https://reactnative.dev/docs/touchableopacity

Mario Torres Espinosa

student•

Que plugin usa para el acomodo del código?

Kevin Jeremy Salazar Jimenez

student•

¿Para formatear el codigo? El mas usado es Prettier

Jhunior Eduardo Guevara Lázaro

student•

Tienes que agregar Prettier
Luego configurar vscode en settings/preferences/
Buscar format on save
Y elegir prettier como uso por defecto

Federico Ivan Llano

student•

no podia visualizar el usuario y contraseña por los estilos, aveces se podia ver y aveces desaparecia, algo raro, despues de tanto buscar lo solucione al agregar al estilo del TextInput un height: 60.

Moises Abel Avila Garcia

student•

exelente curso

            <TextInput
                style={styles.input}
                placeholder="username"
                placeholderTextColor={'#686a68'}
                autoCapitalize='none'

            />

import React from 'react'
import { View, Text, StyleSheet, TextInput, Button } from 'react-native'
import { log } from 'react-native-reanimated'

export default function LoginForm() {
  return (
    <View>
      <Text style={styles.title}>Iniciar Sesión</Text>
      <TextInput placeholder="Usuario"
        style={styles.input}
        autoCapitalize='none'
      />
      <TextInput placeholder="Contraseña"
        style={styles.input}
        secureTextEntry={true}
      />
      <Button title="Enviar" onPress={() => console.log('Enviar')} />
    </View>
  )
}

const styles = StyleSheet.create({
  title: {
    textAlign: 'center',
    fontSize: 28,
    fontWeight: 'bold',
    marginTop: 50,
    marginBottom: 20
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
    borderRadius: 10
  }

})

Formulario de Login

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?