React Native: Crea aplicaciones móviles reales iOS y Android

Vamos a instalar el gestor de dependencias para Windows llamado Chocolatey.

Instalaremos Android Studio para poder crear emuladores de Android y ejecutar nuestra app.

Añadiremos los PATH necesarios para poder levantar React Native en Android.

Vamos a crear un proyecto de React Native CLI.

Lanzaremos nuestra app de React Native en un emulador Android y revisamos que esté funcionando correctamente.

Abriremos un debugger para ver todo lo que esta pasando en nuestra app y tener disponible una consola.

Vamos a instalar la App de Xcode y a configurar una cuneta de desarollador.

Instalaremos Node en el equipo para poder crear apps de React Native.

Vamos a instalar Watchman una dependencia que necesitas React Native para funcionar.

Dependencia requerida para React Native.

Instalaremos el gestor de dependencias YARN.

Vamos a crear un proyecto de React Native CLI.

Ejecutaremos nuestra app en un emulador iOS para ver que funciona correctamente.

Veremos como podemos ejecutar una app de React Native en un dispositivo físico de Apple.

Abriremos un debugger para ver todo lo que esta pasando en nuestra app y tener disponible una consola.

Instalaremos React Devtools para poder ver en todo momento el estado de un componente, los props, hooks, etc...

Instalaremos Java JDK para poder hacer funcionar React Native en un sistema Android.

Instalaremos Android Studio para poder crear Moviles virtuales con Android.

Añadiremos los PATH necesarios para poder levantar React Native en Android.

Lanzaremos nuestra app de React Native en un emulador Android y revisamos que esté funcionando correctamente.

Ejecutaremos nuestra app de React Native en un dispositivo físico Android.

Una explicación de todo lo que vamos a ver en esta sección de Conceptos básicos sobre React JS.

Veremos que es el JSX de React y por que nos facilita mucho a la hora de programar.

Veremos los conceptos básicos que tiene React para entender mejor como funciona.

Crearemos nuestra primera app con el comando create-react-app.

Veremos toda la estructura de una aplicación de React JS.

Crearemos nuestro primer componente y veremos todas sus partes.

Veremos una explicación de que son los PROPS de React y como funcionan.

Pasaremos props básicos de una componente a otro para crear componentes reutilizables.

Pasaremos variables y objetos por los props de nuestros componentes.

Vamos a aprender como podemos pasar funciones completas entre componentes usando los props de React JS.

Veremos que es la asignación por destructuring y como no puede ayudar con el manejo de props.

Podemos definir en nuestros componentes props por defecto en el caso de que no le pasemos ninguno.

Veremos que el Template Strings y como nos puede ayudar a mostrar las variables en los componentes.

Veremos el uso del hook de estado useState de React.

Veremos el uso del hook de efecto useEffect de React.

Vamos a ver el resultado de la aplicación una vez finalizada esta sección.

Como obtener el código fuente del proyecto terminado.

Vamos a crear la app de React Native y a configurar lo necesarios para dejar el proyecto listo para empezar

Crearemos la estructura de como sera nuestro proyecto.

Vamos a crear variables globales de colores para reutilizarlas en nuestros componentes.

Vamos a actualizar el StatusBar para que se vea como lo necesitamos.

Vamos a ver la diferencia de un componente que se exporta de manera default o de manera normal

Creando el formulario de cotización.

Vamos a instalar un componente para poder utilizar un selector.

Vamos a darle un diseño más apropiado a Picker Select y los valores correctos.

Vamos a guarda los datos del formulario en estados de otro componente.

Vamos a crear un componente con un botón para poder ejecutar el cálculo de la cotización.

Vamos a escribir la logica para que nuestra función calcule la cotización.

Vamos a mostrar cuando el usuario cometa algún error el Feedback por pantalla.

Vamos a mostrar por pantalla el resumen de la cotización calculada.

Vamos hacer que nuestros datos cambien y calculen en tiempo real mientars el usuario esta escribiendo los datos.

Veremos el resultado que vamos a obtener cuando terminemos el proyecto.

Como obtener el código fuente del proyecto terminado.

Vamos a crear nuestra app de React Native.

Crearemos una nueva app de Firebase para conectarla a nuestra aplicación.

Conectaremos la app de Firebase con React Native.

Crearemos una function que se ocupe de comprobar si el usuario esta logeado o no se ha logeado.

Vamos a crear el componente que va a mostrar el formulario de login y de registro.

Vamos a crear un control de formularios para que el usuario pueda cmabiar de un formulario a otro con un simple click.

Crearemos la estructura del formulario para poder registrar nuevos usuarios.

Guardaremos los datos que el usuario escriba en el formulario en un estado.

Validaremos el formualrio de resgitro y mostraremos los inputs en rojo que tengan errores.

Vamos a conectar con Firebase y guardaremos el usuario registrado.

Creando el formulario para poder iniciar sesión.

Vamos guarda los datos del formulario en un solo estado de manera automática.

Vamos a validar el formulario para que no pueda mandar datos errores a Firebase.

Realizando login contra firebase.

Vamos a añadir la funcionalidad al los botones del action bar.

Vamos a añadir un formulario para poder crear cumpleaños.

Vamos a crear un DatePicket para que el usuario pueda seleccionar la fecha de nacimiento.

Vamos a obtener la fecha que el usuario ha seleccionado y la mostraremos dentro del View bien formateada.

Vamos a guardar todos los datos del formulario en nuestro estado.

Vamos a validar que el formulario de creación de nuevos cumpleaños este correcto.

Vamos a coger los datos que ha introducido el usuario y los daremos de alta en nuestra base de datos firestore.

Vamos a coger los datos que ha introducido el usuario y los daremos de alta en nuestra base de datos firestore.

Vamos a separar los datos guardados en firestore por usuarios, para que cada usuario tenga su propio espacio.

Vamos a obtener todos los cumpleaños que ha dado de alta el usuario.

Vamos a separar los cumpleaños próximos de los cumpleaños que ya han pasado.

Vamos a renderizar todos los cumpleaños obtenidos de Firebase.

Vamos a configurar el useEffect para que se vuelva a ejecutar y obtenga los nuevos datos cuando el usuario cree un nuevo cumpleaños.

Vamos a darle un poco de estilo a la lista de cumpleaños para que se vea mejor.

Vamos a mostrar los días que faltan para los cumpleaños de cada usuario.

Cuando el usuario realice click en algún cumpleaños le aparecer aun Alert donde tendrá que confirmar si está seguro de eliminar el cumpleaños o no.

Instalaremos React Navigation 5 en nuestro proyecto y lo dejaremos configurado creando el NavigationContainer.

Vamos a crear varias screen y aprendemos a navegar entre ellas.

Vamos a ver como podemos navegar de una screen a otra.

Creamos una navegación por tabs.

Vamos a combinar el TabNavigation con el StackNavigation.

Veremos como viajar a una Screen oculta que esté en otro stack diferente.

Vamos a crear nuestra DrawerNavigation.

Veremos el resultado que vamos a obtener cuando terminemos el proyecto.

Como obtener el código fuente del proyecto terminado.

Vamos a crearnos una cuenta en TheMovieDB para poder consumir todos los datos de películas.

Vamos a abrir el debugger para poder ver lo que pasa en nuestra app.

Vamos a instalar una librería de componentes.

Vamos a configurar los iconos para que funcionen tanto en iOS como en Android.

Vamos a instalar todos los que necesitamos para usar React Navigation 5.

Vamos a crear las screens y las añadiremos al DrawerNavigation usando el StackNavigation.

Vamos a añadir un botón en el header para poder abrir el Drawer.

Vamos a crear un componente y lo utilizaremos dentro del drawer.

Vamos a implementar el DarkTheme y el LigthTheme en nuestra app.

Crearemos un hook que se ocupe de devolvernos los datos del PreferencesContext.

Añadiremos un Switch en el DrawerNavigation para cambiar de tema.

Vamos a añadir el botón del buscador de películas al header de nuestra app.

Vamos a añadir el package react-native-snap-carousel para crear el crousel de peliculas.

Vamos a eliminar le warning del package.

Vamos a mostrar todas las películas con estilos en el carousel.

Vamos a crear una petición para obtener cada uno de los géneros que pertenecen a las películas.

Vamos a navegar a la screen de la película que el usuario realice un click.

Vamos a obtener todos los géneros de película que dispone TheMovieDB y los guardaremos en un estado.

Vamos a crear una lista horizontal con scroll de todos los generos disponibles.

Vamos a obtener todas las películas del género seleccionado por el usuario y cuando lo cambie volveremos a obtenerlas con el nuevo genero.

Vamos a renderizar un carousel con las películas obtenidas.

Vamos a pintar las películas que tenemos en el carousel.

Vamos a obtener todos los datos de una película usando su ID para poder mostrarla en la screen de móvil.

Vamos a mostrar en nuestra screen la carátula de la película ocupando todo el header.

Vamos a crear un modal donde añadiremos el tráiler de la película.

Vamos a solucionar el problema del video que no se ve en Android.

Vamos a añadir el título de la película y los géneros debajo de la imagen.

Añadiremos la puntuación y los votos que tiene la película.

Añadiremos una el overview de la peliculas y la fecha de publicación.

Crearemos una función que se ocupe de obtener toda las películas populares.

Vamos a mostrar una lista con todas las películas y añadiremos la imagen de cada una.

Vamos a añadir la información de cada una de las películas.

Añadiremos un botón para que el usuario pueda cargar las siguiente películas.

Evento de click para poder ir a la screen de la película.

Vamos a obtener las nuevas películas lanzadas y las renderizaremos en nuestra screen.

Vamos a darle estilos a las películas.

Añadiremos un botón para que el usuario pueda cargar las siguiente películas.

Función para buscar películas en TheMovieDB.

Vamos a crear el buscador y a conectarlo con la función de búsqueda.

Vamos a coger los resultados de cada búsqueda y los pintaremos en nuestras creen.

Veremos el resultado que vamos a obtener cuando terminemos el proyecto.

Como obtener el código fuente del proyecto terminado.

Configurando Firebase y Realtime Database.

Crearemos una app en nuestro proyecto de firebase y lo conectaremos a nuestra app de React Native.

Añadimos la biblioteca NativeBase a nuestra aplicación.

Crearemos el flujo que va a seguir nuestra aplicación

Vamos a crear la estructura de nuestra screen de login.

Vamos a obtener el nombre  que introduzca el usuario, lo guardaremos y le mostraremos el chat.

Vamos a crear un componente input para poder enviar mensajes en el chat.

Vamos a obtener el mensaje que el usuario quiere mandar y se lo pasaremos al componente padre para poder enviarlo a firebase.

Vamos a obtener el mensaje introducido por el usuario y lo mandaremos a nuestra base de datos.

Vamos a eliminar el Warning Setting a timer que aparece en Android.

Vamos a añadir el header del chat.

Vamos a obtener todos los mensajes de firebase para poder mostrarlos en el chat.

Vamos a pintar en pantalla todos los mensajes que hay en la base de datos y los que les vaya llegando.

Vamos a pintar la estructura cada mensaje.

Vamos a diferenciar cada uno de los mensajes y mostrarlo como toca.

Mostraremos la inicial del nombre del usuario en una bola.

Dependiendo la letra que se muestre vamos a mostrar un color u otro.

Vamos a hacer scroll automático cuando enviemos o recibamos un mensaje.

Veremos el resultado que vamos a obtener cuando terminemos el proyecto.

Como obtener el código fuente del proyecto terminado.

Vamos a crear un proyecto de Strapi para crear una API REST.

Vamos a crear el modelo New para crear nuevas noticias y un endpoint para poder obtenerlas.

Vamos a crear la estructura de como va a ser nuestra app.

Vamos a crear una función que se ocupe de obtener las últimas 100 noticias.

Vamos a solucionar el Warning Network request failed que genera el Android.

Vamos a usar el map de lodash para renderizar todas las noticias obtenidas.

Vamos a darle estilos a las noticias.

Abriremos el link en un navegador interno de la app.