Configuración básica antes del BUILD

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

Clase anteriorSiguiente clase

Gustavo Pú

student•

Queremos más cursos así 💚🚀

Carlos Hernandez

student•

Me encantó la Splash Screen😍

Wilson Fabian Pérez Sucuzhañay

student•

Y si deseas hacer una pantalla custodia de SplashScreen como se hace, donde? Se puede poner animación?

Agustín Navarro Galdon

teacher•

Para eso tendrías que usar esta dependencia. https://yarnpkg.com/package/react-native-splash-screen

Andres Roberto Coello Goyes

student•

Si no quieres usar dependencias puedes envolver tu app en un context que te diga si esta en splash o no, la primero pantalla de tus rutas seria el splash por defecto y despues de X segudos cambias el estado de splash a false por ejemplo con eso se renderizara a la prixima ruta que podria ser tu home.

CONTEXT JS

import React, {createContext, useState, useEffect, Alert} from 'react';

export const UserContext = createContext();

const UserProvider = ({children}) => {
  const [isSplash, setIsSplash] = useState(false);

  useEffect(() => {
    if (!isSplash) {
      setTimeout(() => {
        setIsSplash(true);
      }, 11000);
    }
  }, [isSplash]);

  return (
    <UserContext.Provider value={{ isSplash }}>
      {children}
    </UserContext.Provider>
  );
};

export default UserProvider;

NAVIGATION APP

<Stack.Navigator
      initialRouteName="SplashScrenn"
      screenOptions={({navigation}) => ({
        headerStyle: {backgroundColor: colors.primary},
        headerTitleAlign: 'center',
        headerTintColor: 'white',
        headerShown: false,
        headerLeft: () => (
          <Icon
            size={27}
            style={{marginLeft: 10}}
            name="arrowleft"
            color="#fff"
            onPress={() => navigation.goBack()}
          />
        ),
      })}>
      {!isSplash && <Stack.Screen name="SplashScrenn" component={SplashView} />}

      {!user && isSplash ? (
        <>
          <Stack.Screen name="Login" component={LoginView} />
          <Stack.Screen
            name="SignUp"
            options={{headerTitle: 'Registro'}}
            component={SignUpView}
          />
          <Stack.Screen name="ForgotPass" component={ForgotPasswordView} />
          <Stack.Screen name="Terminos" component={TerminosView} />
          <Stack.Screen name="Privacidad" component={PrivacidadView} />
        </>
<Stack.Navigator />

Espero te ayude

Cayo Legal

student•

Entonces para tener un splash screen sin dependencias, solamente hay que agregar una imagen llamada splash en la carpeta assets?

Mariano Monje

student•

No se si se han fijado que la pokedex no sigue el orden correcto.

es decir despues de venusaur salta a charmander con el numero 5. y no el 4 que es el verdadero orden.

para solucionar eso.

modifique el codigo de pokedex.js

import React, { useState, useEffect } from "react";

import { SafeAreaView } from "react-native";

import { getPokemonsApi, getPokemonDetailsByUrlApi } from "../api/pokemon";

import PokemonList from "../components/PokemonList";

export default function Pokedex() {

const [pokemons, setPokemons] = useState([]);

const [nextUrl, setNextUrl] = useState(

"https://pokeapi.co/api/v2/pokemon?limit=20"

);

const [currentOffset, setCurrentOffset] = useState(0); // Nuevo estado para el offset

useEffect(() => {

(async () => {

await loadPokemons();

})();

}, []);

const loadPokemons = async () => {

try {

const response = await getPokemonsApi(nextUrl);

setNextUrl(response.next);

setCurrentOffset(currentOffset + response.results.length); // Actualizar el offset

const pokemonsArray = [];

for await (const [index, pokemon] of response.results.entries()) {

const pokemonDetails = await getPokemonDetailsByUrlApi(pokemon.url);

pokemonsArray.push({

id: pokemonDetails.id,

name: pokemonDetails.name,

type: pokemonDetails.types[0].type.name,

order: currentOffset + index + 1, // Calcular el orden global

image: pokemonDetails.sprites.other["official-artwork"].front_default,

});

}

setPokemons([...pokemons, ...pokemonsArray]);

} catch (error) {

console.error(error);

}

};

return (

<PokemonList

pokemons={pokemons}

loadPokemons={loadPokemons}

isNext={nextUrl}

</SafeAreaView>

);

}

de esta manera si los pokemon se cargaran segun el orden verdadero de la pokedex original.

espero que les halla funcionado

Mariano Monje

student•

Hola compañero estoy tomando este curso y viendo el codigo encontre un pequeño error en la pokedex. como ven en la imagen va del 1 bulbasaur, 2 Ivysur 3 Venusaur y salta al 5 charmander. que es incorrecto.

para arreglarlo solo hagan lo siguiente.

en pokedex.js

import React, { useState, useEffect } from "react";

import { SafeAreaView } from "react-native";

import { getPokemonsApi, getPokemonDetailsByUrlApi } from "../api/pokemon";

import PokemonList from "../components/PokemonList";

export default function Pokedex() {

const [pokemons, setPokemons] = useState([]);

const [nextUrl, setNextUrl] = useState(

"https://pokeapi.co/api/v2/pokemon?limit=20"

);

useEffect(() => {

(async () => {

await loadPokemons();

})();

}, []);

const loadPokemons = async () => {

try {

const response = await getPokemonsApi(nextUrl);

setNextUrl(response.next);

const pokemonsArray = [];

for await (const [index, pokemon] of response.results.entries()) {

const pokemonDetails = await getPokemonDetailsByUrlApi(pokemon.url);

pokemonsArray.push({

id: pokemonDetails.id,

name: pokemonDetails.name,

type: pokemonDetails.types[0].type.name,

order: index + 1, // Corregido: Usar el índice + 1 como número de Pokédex

image: pokemonDetails.sprites.other["official-artwork"].front_default,

});

}

setPokemons([...pokemons, ...pokemonsArray]);

} catch (error) {

console.error(error);

}

};

return (

<PokemonList

pokemons={pokemons}

loadPokemons={loadPokemons}

isNext={nextUrl}

</SafeAreaView>

);

}

de esta manera podran mostrar correctamente el orden de la pokedex y los pokemon.

Dario Echazu

student•

Gracias por enseñar tan bien. Saludos desde Salta Argentina 2/abirl/2023

Andrés Felipe Daza

student•

En caso de que necesitase cambiar el nombre de la aplicación, como seria ideal hacerlo?

Agustín Navarro Galdon

teacher•

El nombre lo cambias en el fichero app.json que tienes en la raíz del proyecto.

Andres Roberto Coello Goyes

student•

Hola, Si estas en Android puedes cambiar el nombres en archivo string.xml de la carpeta android/app/src/main/res/value.

Pero si estas en ios puedes hacerlo en el archivo info.plist de la carpeta** ios/tu-proyecto/**

Configuración básica antes del BUILD

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?