Cómo crear una aplicación con Gatsby Expo y React Native

Introducción

En este tutorial, vemos cómo configurar su aplicación Universal Expo y usar Gatsby cuando apunta a la web.

Gatsby es un marco de sitio web moderno y de código abierto que integra el rendimiento en cada sitio al aprovechar las últimas tecnologías web como React y GraphQL.

GraphQL es una tecnología popular y muy poderosa. Sirve para administrar datos en toda su aplicación y, si bien puede usar Gatsby sin GraphQL, realmente hace que el desarrollo de aplicaciones sea más declarativo e intuitivo.

Con Gatsby también puede pre-renderizar la parte web de la aplicación.

En este tutorial veremos:

Cómo crear una aplicación universal para Web, Android e iOS.
Cómo crear una compilación para Android e iOS.
Cómo crear un proyecto solo web.

Cómo crear una aplicación universal para la web de Android e iOS

Veamos cómo crear una aplicación básica con Gatsby, React y Expo con unos simples pasos.

Instale o actualice la interfaz de línea de comandos de Expo expo-cli:

npm i -g expo-cli

Crea un nuevo proyecto de Expo:

expo init

Instale el complemento Gatsby con el yarn o con npm:

yarn add gatsby gatsby-plugin-react-native-web

npm install --save gatsby gatsby-plugin-react-native-web

Cree un archivo llamado gatsby-config.js dentro del proyecto recién creado:

 module.exports = {
 plugins: [
 `gatsby-plugin-react-native-web`,
 /*... */],
 }

Abra el .gitignore dentro del proyecto y agregue los siguientes directorios al final del archivo:

# Gatsby
 /.cache
 /public

Ahora cree el siguiente directorio en su proyecto Gatsby con el comando mkdir:

mkdir -p src/pages

Cree la primera página de su proyecto ejecutando este comando:

cp App.js src/pages/index.js

Ahora puede ejecutar la aplicación y probarla:

yarn gatsby develop

Abra su navegador y conéctese a su dirección IP: http://INDIRIZZO_IP:8000/ para ver su proyecto.

Debería ver una pantalla como la siguiente:

Para abrir la interfaz web de la Expo, escriba el siguiente comando:

expo start

Cree una compilación de Android e iOS

Vimos cómo crear una aplicación de ejemplo universal simple. Ahora veamos algunos pasos simples sobre cómo crear una compilación para Android e iOS con la configuración predeterminada.

Navegue a la carpeta del proyecto recién creada y abra el archivo app.json

Agregue las siguientes líneas de código para Android e iOS:

...
 "ios": {
 "bundleIdentifier": "com.yourcompany.yourappname",
 "buildNumber": "1.0.0"
 },
 "android": {
 "package": "com.yourcompany.yourappname",
 "versionCode": 1
 }...

Entonces, el resultado final de nuestro app.json será el siguiente:

{
 "expo": {
 "name": "new-gatsby-app",
 "slug": "new-gatsby-app",
 "platforms": [
 "ios",
 "android",
 "web"
 ],
 "version": "1.0.0",
 "orientation": "portrait",
 "icon": "./assets/icon.png",
 "splash": {
 "image": "./assets/splash.png",
 "resizeMode": "contain",
 "backgroundColor": "#ffffff"
 },
 "updates": {
 "fallbackToCacheTimeout": 0
 },
 "assetBundlePatterns": [
 "**/*"
 ],
 "ios": {
 "supportsTablet": true
 },
 "android": {
 "package": "com.yourcompany.yourappname",
 "versionCode": 1
 }
 }
 }

Para crear una compilación para Android, escriba el siguiente comando desde la terminal:

expo build:android

Para crear una compilación para iOS, desde la terminal, escriba el siguiente comando:

expo build:ios

Solución de problemas

Si comenzó su proyecto sin la interfaz de línea de comandos de Expo, es posible que también deba leer estos pasos:

Instale React Native para Web: yarn add react-native-web.
Instale el ajuste preestablecido de babel para React Native web con yarn o con npm:

yarn add --dev babel-preset-expo

npm install --save-dev babel-preset-expo

Cree un babel.config.js y use el presente de Babel:

module.exports = function(api) {
 api.cache(true);
 return {
 presets: ['babel-preset-expo'],
 };
 };

Cómo crear un proyecto solo web

Veamos cómo crear un proyecto con Gatsby y Expo solo para la web.

Asegúrate de tener instalado gatsby-cli

npm install -g gatsby-cli

Crea un nuevo proyecto de Gatsby con el siguiente comando:

gatsby new gatsby-site

Instale el gatsby-plugin-react-native-web usando yarn (recomendado) o npm:

yarn add react-native-web gatsby-plugin-react-native-web

npm install --save react-native-web gatsby-plugin-react-native-web

Abra el gatsby-config.js y agregue la siguiente línea gatsby-plugin-react.native-web en los plugins:[..]:

module.exports = {
 plugins: [
 `gatsby-plugin-react-native-web`,
 /*... */],
 };

Guarde y cierre el archivo.

Instale el preajuste de babel usando yarn (recomendado) o npm::

yarn add -D babel-preset-expo

npm install --save-dev babel-preset-expo

Cree el babel.config.js y agregue las siguientes líneas de código:

module.exports = {
 presets: ['babel-preset-expo'],
 };

Guarde y cierre el archivo.

Abra el .gitignore /.expo y /web-build al final del archivo así:

/.expo
 /web-build

Ahora puede iniciar el proyecto con el siguiente comando:

yarn gatsby develop

(Opcional) Puede instalar otros módulos Expo:

Paquetes principales: yarn add expo
Gesto: yarn add react-native-gesture-handler
Ganchos: yarn add react-native-web-hooks

Estructura de archivo

Aquí está la estructura de archivo recomendada para un proyecto de Expo con soporte de Gatsby:

Expo Gatsby
 ├── src
 │ └── pages -> Routes
 │ └── index.tsx -> Entry Point for Gatsby
 ├──.cache -> Generated Gatsby files (should be ignored)
 ├── public -> Generated Gatsby files (should be ignored)
 ├── assets -> All static assets for your project
 ├── App.tsx -> Entry Point for Mobile apps
 ├── app.json -> Expo config file
 ├── gatsby-config.js -> Gatsby config file
 └── babel.config.js -> Babel config (should be using `babel-preset-expo`)

Conclusión

Para obtener la guía más actualizada, debe consultar el ejemplo en el repositorio de Expo Github: Gatsby.

Para ver otros tutoriales sobre Expo, consulte la siguiente sección: