Plantilla login
import React, { useState, useEffect } from “react”; import { SafeAreaView, View, Text, TextInput, ScrollView, TouchableOpacity, Image, Alert } from ‘react-native’; import * as Constantes from ‘../Constantes/Servidor’ import AsyncStorage from ‘@react-native-async-storage/async-storage’; import MaterialIcons from ‘react-native-vector-icons/MaterialIcons’; import Ionicons from ‘react-native-vector-icons/Ionicons’; import CustomButton from ‘../components/CustomButton’; const LoginScreen = ({navigation}) => { const [email, setEmail] = useState(”); const […]
Plantilla de registro de usuario, estilizada y con validaciones
import React, {useState} from ‘react’; import { SafeAreaView, ScrollView, View, Text, TextInput, TouchableOpacity, Image, Alert } from ‘react-native’; import AsyncStorage from ‘@react-native-async-storage/async-storage’; import BouncyCheckbox from “react-native-bouncy-checkbox”; import DatePicker from ‘react-native-date-picker’; import CheckBox from ‘@react-native-community/checkbox’; import InputField from ‘../components/InputField’; import MaterialIcons from ‘react-native-vector-icons/MaterialIcons’; import Ionicons from ‘react-native-vector-icons/Ionicons’; import CustomButton from ‘../components/CustomButton’; import * as Constantes from […]
Comprobar si es un correo
import * as React from ‘react’; import { View, TextInput } from ‘react-native’; export default function App() { const validate = (text) => { const reg = /^w+([.-]?w+)*@w+([.-]?w+)*(.ww+)+$/; console.log(text, reg.test(text)); }; return ( ); }
Crear componente de botón
Para importar un componente hecho por nosostros usamos import CustomButton from ‘../components/CustomButton’; Ahora creamos el componente import {Text, TouchableOpacity} from ‘react-native’; import React from ‘react’; export default function CustomButton({label, onPress}) { return ( {label} ); } Luego de importado en la vista donde lo queremos usar lo usamos de la siguiente forma. <CustomButton label={‘Registrar’} onPress={() […]
UI Login
import React, {useState} from ‘react’; import { SafeAreaView, ScrollView, View, Text, TextInput, TouchableOpacity, Image } from ‘react-native’; import MaterialIcons from ‘react-native-vector-icons/MaterialIcons’; import Ionicons from ‘react-native-vector-icons/Ionicons’; const RegisterScreen = ({navigation}) => { const [email, setEmail] = useState(”); const [clave, setClave] = useState(”); return ( Login Ingresa todos los datos setEmail(text) } /> setClave(text) } /> Ya […]
Crear proyecto especificando version
react-native init –version=”react-native@0.67.4″ MyNewApp
Filtrar arreglo de objetos
let array = responseJson.data.data.filter(animales => { return animales.animal.user.id === id; }); setMisVentas(array)
Detener un setinterval
useEffect(() => { const interval = setInterval(() => { console.log(‘This will be called every 2 seconds’); }, 2000); return () => clearInterval(interval); }, []);
Actualizar elemento de un array
const osArray = [ {id: 0, name: “Windows”}, {id: 1, name: “Linux”}, {id: 2, name: “MacOS”}, ]; const updatedOSArray = osArray.map(p => p.id === 1 ? { …p, name: ‘Ubuntu’ } : p ); console.log(“After update: “, updatedOSArray);
Reordenar un array y eliminar repetidos
//reordeno el array de mayor a menor datos.sort((a,b) => (a.Cantidad < b.Cantidad) ? 1 : ((b.Cantidad < a.Cantidad) ? -1 : 0)) //Elimino los repetidos let hash = {}; let array = datos.filter(o => hash[o.id] ? false : hash[o.id] = true); //alert(JSON.stringify(array)) setDatosProcesados(array)