Mobile App

React native

• Yoga convierte el ccs de la web a estilos nativos de mobile
• Por defecto todos los elementos tienen display flex(flexbox)
• Las imagenes se deben de usar en en @1x y @2x por la densidad de pixeles de los dispositivos móviles

Tener cuidado con las dependencias ya que si se cambian aveces se rompe la aplicación

Expo CLI

Problemas comunes en expo

# instalar CLI
$ yarn global add expo-cli

#Comprobar si expo esta instalado
$ expo --version
# si no reconoce el comando expo y estamos usando zsh agregemos el path de yarn al archivo .zshrc 
export PATH=$HOME/.yarn/bin:$PATH

# Crear un nuevo proyecto
$ expo init <nameProyect>
# te permite seleccionar un template en este caso usaremos black typescript

para resolver los warning que lanza expo unicamente ejecutar expo install y el nombre de los paquetes que te sugiere

Cuando se instala paquetes nuevos siempre reiniciar el server

Google fonts

Expo con google fonts

$ expo install expo-font @expo-google-fonts/ubuntu @expo-google-fonts/roboto

React navigation

react navigation react navigation stack

$ yarn add @react-navigation/native
$ expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
$ yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

#realizar navegacion mediante botones para regresar a una pagina anterior
$ yarn add @react-navigation/stack

Iconos

Por defecto expo tiene iconos en el paquete

import { Feather as Icon } from "@expo/vector-icons";

Mapas

$ expo install react-native-maps
$ expo install expo-constants

$ expo install expo-location

SVG

React native no entiende svg por ello se debe de instalar otra libreria

$ expo install react-native-svg

Axios

$ yarn add axios

Email

Expo mail composer

$ expo install expo-mail-composer