Notas de la Ruta Desarrollo de Apps Multiplataforma - React Native

Platzi: Ruta Desarrollo de Apps Multiplataforma

• Curso Práctico de React Native: Manejo de Listas y Consumo de APIs
• Curso Práctico de React Native: Formularios, Almacenamiento y Deploy

Publish app

• Build setup expo
• Build for app stores
• Build APKs for Android Emulators and devices
• Configuring a profile to build APKs

npm install -g eas-cli
eas login
eas build:configure

generar .aab: eas build -p android

generar .apk: eas build -p android --profile preview se debe editar el archivo eas.json

{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "production": {}
  }
}

Docs

• React navigation

Depencias

yarn add @react-navigation/native

expo install react-native-screens react-native-safe-area-context
npx expo install react-native-gesture-handler

yarn add @react-navigation/native-stack
yarn add @react-navigation/stack

yarn add @react-navigation/bottom-tabs
yarn add react-native-vector-icons

yarn add lodash

safeAreaView

npm install react-native-safe-area-context

Run dev

yarn start

Styles platform

using: import { Platform } from "react-native";

Platform permite saber el OS del dispositivo

const styles = StyleSheet.create({
  flatListContentContainer: {
    paddingHorizontal: 5,
    marginTop: Platform.OS === "android" ? 30 : 0,
  },
  spinner: {
    marginTop: 20,
    marginBottom: Platform.OS === "android" ? 90 : 60,
  },
});

Apis & docs

• Pokemon API

Curso Práctico de React Native: Formularios, Almacenamiento y Deploy

Dependencias

• Formik
• Yup
• async-storage

yarn add formik yup
yarn add @react-native-async-storage/async-storage