Formulario de Login

Curso de React Native: Formularios, Almacenamiento y Deploy

Contenido del curso

Sistema de formularios

Sistema de formularios avanzados

Sistema de favoritos

Pre deploy

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:07

Formulario de Login

Curso de React Native: Formularios, Almacenamiento y Deploy

Clase 3 de 21

Clase 3 / 21

Comentarios (9)9 comentarios

Darío Condori Humerez

Hace 4 años

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

Hace 5 años

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

Gracias por el aporte, es muy util

José Luis Caicedo Lara

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

David Rangel

Hace un año

Les dejo mi repo con los avances de la clase:

Gustavo Pú

como puedo agregarle estilos al componente Button ??

Daniel Rodriguez Davila

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

Bulmaro Arellano Navarrete

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

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

Que plugin usa para el acomodo del código?

Kevin Jeremy Salazar Jimenez

¿Para formatear el codigo? El mas usado es Prettier

Jhunior Eduardo Guevara Lázaro

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

Federico Ivan Llano

Hace 2 años

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

exelente curso

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?

Formulario de Login

Progreso del curso

Sistema de formularios

Sistema de formularios avanzados

Sistema de favoritos

Pre deploy

Recursos

Recursos