Migración de su proyecto React Native iOS para usar CocoaPods

Bienvenido, soy Miguel y esta vez les traigo un nuevo post.

Reaccionar nativo 0.60 introducido una serie de cambios, uno de los cuales integra CocoaPods por defecto.

Este tutorial lo ayudará a migrar su proyecto para usar pods. También lo guiaré para configurar un entorno que sea amigable para el equipo mediante el uso de un administrador de versiones de Ruby y el Bundler administrador de paquetes para instalar sus pods.

Puede usar este tutorial para cualquier versión de React Native que esté usando. Sin embargo, si está en React Native 0.60 o superior, también le mostraré cómo configurar el enlace automático (no más comandos react-native link <library-name>). 🔗

¿Qué es CocoaPods y por qué los necesito?

De acuerdo a cocoapods.org:

CocoaPods es un administrador de dependencias para proyectos Swift y Objective-C Cocoa.

Básicamente, es npm o yarn, pero para los módulos macOS e iOS.

No es absolutamente necesario migrar para su 0.60 proyecto para trabajar. Manual PERO apoyo para xcodeproject los archivos se eliminan en 0.61. Completar esta migración le permitirá usar el nuevo xcodeworkspace modelo. ¡Y la migración es fácil!

Paso 1: Configura un entorno Ruby 💎

CocoaPods está construido con Ruby y se puede instalar a través del administrador de paquetes RubyGems. Entonces necesitaremos Ruby para comenzar el proceso.

Buenas noticias: ¡Ruby viene preinstalado en una Mac!

Malas noticias: Probablemente no sea lo que deberíamos usar.

¿Por qué?

En su lugar, instalemos Ruby a través de un administrador de versiones llamado rbenv. Es como nvm, pero para Ruby.

Antes de instalar rbenv, averigüe con qué versión de Ruby le gustaría trabajar. Dirigirse a ruby-lang.org donde puede averiguar cuál es la última versión estable.

A continuación, en la raíz de su proyecto, cree un archivo .ruby-version y escriba ese número en.

// .ruby-version
2.7.1

Esta será la versión requerida de Ruby para su proyecto.

Para los propósitos de este tutorial, usaré la versión 2.7.1. Puede utilizar la versión que desee.

Paso 2: instalar rbenv ⬇️

Rbenv se puede instalar a través de Homebrew. Usaremos esto para instalar nuestra versión deseada de Ruby.

Instalar rbenv:

$ brew install rbenv

Entonces corre:

rbenv init

… Y siga las instrucciones para finalizar la instalación. Probablemente se le pedirá que actualice su .bash_profile o .zshrc con una nueva variable PATH.

Cuando termine, reinicie Terminal para aplicar sus cambios.

Paso 3: Instala Ruby ⬇️

Utilizar rbenv para instalar la versión deseada de Ruby:

$ rbenv install 2.7.1

Una vez instalado, deberá iniciarlo:

$ rbenv global 2.7.1

Este comando establece su versión global de Ruby.

A continuación, ejecute el siguiente comando para actualizar sus calces y permitir que su versión de Ruby se use correctamente en su sistema:

$ rbenv rehash

¡Listo! Ahora tienes un copia sudo sin versión especificada de Ruby instalada en su máquina.

Paso 4: crea un Gemfile

Todo listo con Ruby. Ahora es el momento de instalar CocoaPods.

Primero, compruebe cuál versión de CocoaPods que desea instalar. Fui con la última versión de la lista.

A continuación, cree un archivo llamado Gemfile en la raíz de su directorio y agregue lo siguiente, incluida la versión de CocoaPods que desea instalar:

# Gemfile
source "https://rubygems.org"

gem "cocoapods", '1.9.1'

Paso 5: Instala Bundler

Para instalar la versión de CocoaPods que aparece en su Gemfile, usaremos una herramienta llamada Bundler. Bundler nos ayudará a instalar gemas y producirá un archivo de bloqueo (similar a package-lock.json o yarn.lock), que mantendrá nuestras dependencias bajo control.

Para instalar Bundler, ejecute:

$ gem install bundler

Paso 6: Instala CocoaPods

¡Finalmente! Para instalar CocoaPods, ejecute lo siguiente en la raíz de su proyecto:

bundle install

Esto crea una Gemfile.lock también. ¡Confirme siempre sus archivos de bloqueo!

Paso 7: crea un Podfile

Necesitaremos crear un Podfile que Xcode utilizará para instalar las dependencias necesarias de iOS.

Cd en gira directorio ios y crea un nuevo archivo llamado Podfile.

El contenido de este archivo será específico para la versión de React Native que esté utilizando. Este tutorial muestra una migración a CocoaPods en un proyecto React Native 0.60.6. Otras versiones de React Native tendrán diferentes dependencias enumeradas en sus Podfiles.

Entonces, si está actualizando a una versión diferente de React Native, le sugiero que comience un nuevo proyecto temporal en la versión de React Native que desea usar (por ejemplo, npx react-native init YourProjectName --version X.XX.X), y copiar el contenido del Podfile en el nuevo proyecto, en lugar de lo que proporciono a continuación.

En un React Native 0.60.6 proyecto, agregue lo siguiente a su Podfile y cambiar todas las instancias de <target-name> al nombre de destino de su aplicación.

Aquí hay una captura de pantalla:

Mi 0.60.6 Podfile:

# ios/Podfile

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target '<target-name>' do
# Pods for <target-name>
pod 'React', :path => '../node_modules/react-native/'
pod 'React-Core', :path => '../node_modules/react-native/React'
pod 'React-DevSupport', :path => '../node_modules/react-native/React'
pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

target '<target-name>Tests' do
inherit! :search_paths
# Pods for testing
end

use_native_modules!
end

target '<target-name>-tvOS' do
# Pods for <target-name>-tvOS

target '<target-name>-tvOSTests' do
inherit! :search_paths
# Pods for testing
end

end

Paso 8: Instala Pods

Cd en tu directorio ios. Ahora ejecuta:

$ bundle exec pod install

En tus directorios ios, este comando crea:

‼ ️ A partir de este momento, utilice siempre su nuevo .xcworkspace directorio al abrir el proyecto en Xcode. No uses el viejo .xcodeproj. ‼ ️

El script que acaba de ejecutar será el nuevo script que deberá usar cada vez que desee instalar un nuevo pod. A menudo, verá la documentación de una biblioteca que le indica que ejecute un pod install mando. No hagas esto. correr bundle exec pod install en lugar.

Hágase un favor y cree un guión en su package.json para ayudarte:

// package.json
{
          ...
           "scripts": {
                    "podInstall": "cd ios && bundle exec pod install",
           }
    }

Ahora, cada vez que agregue una nueva dependencia con módulos nativos de iOS, simplemente ejecute npm run podInstall o yarn run podInstall para instalar la vaina.

Paso 9: ignore su Pods directorio

Pods son esencialmente node_modules. No los cometa. Se pueden reinstalar fácilmente.

Actualiza tu .gitignore para ignorar estos archivos:

// .gitignore

# CocoaPods
/ios/Pods/

Paso 10: Actualice sus dependencias ⬆️ (¡con Autolinking!)

Para aquellos que usan React Native 0.60 o superior

Si está utilizando React Native 0.60 o superior, la parte más fresca del Podfile es eso use_native_modules! función al final. Este es el bit de autoenlace. Una vez que instale su biblioteca a través de npm o yarn, has terminado con el iOS Instalar en pc. Esto funciona para casi todas las bibliotecas. Casi todos…

Revise las instrucciones de instalación de cada dependencia que tenga y vea si hay alguna especificación de pod adicional que necesite agregar. (También puede intentar ejecutar su proyecto y ver si algo se rompe y continuar desde allí. 🤠)

Algunas bibliotecas aún requerirán que ajuste su Podfile. Aquí hay un ejemplo de algo que tenía que hacer:

# Example v0.60 Podfile using libraries that still require some podspecs. 
# Do not add to your project.
...
# Patch for react-native-push-notification install error
pod 'React-RCTPushNotification', :path => '../node_modules/react-native/Libraries/PushNotificationIOS'

# Patch for react-native-image-crop-picker dark mode bugs
pod 'QBImagePickerController', :path => '../node_modules/react-
native-image-crop-picker/ios/QBImagePicker/QBImagePickerController.podspec'
...

Con cualquier ajuste que realice, asegúrese de use_native_modules! La función vive al final de su archivo.

Para aquellos que usan React Native<0.60

Si está utilizando una versión de React Native inferior a 0.60, deberá encontrar las instrucciones de instalación para cada dependencia que esté utilizando y agregar manualmente las especificaciones de pod necesarias a su Podfile.

Por ejemplo, si está en React Native 0.59 y están usando la biblioteca react-native-maps, necesitaría agregar algo como lo siguiente:

# Example v0.59 Podfile adjustments if using react-native-maps 
# Do not add to your project.
...
          # react-native-maps dependencies
          pod 'react-native-maps', path: rn_maps_path
          pod 'react-native-google-maps', path: rn_maps_path
          pod 'GoogleMaps'
          pod 'Google-Maps-iOS-Utils'
end

post_install do |installer|
   installer.pods_project.targets.each do |target|
      if target.name == 'react-native-google-maps'
         target.build_configurations.each do |config|
            config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
           end
        end
    end
end

Paso 11: Instale sus nuevos pods ⬇️

Si ha actualizado alguna biblioteca a versiones más recientes o ha realizado cambios en su Podfile necesitarás correr bundle exec pod install una vez más en su directorio de iOS.

O, si lo ha agregado en el Paso 8, ejecute su podInstall script en su lugar.

Cambiando el Podfile es como cambiar un expediente package.json. Es un conjunto de instrucciones que indican qué dependencias deben instalarse.

Paso 12: Elimina tus enlaces antiguos 🧹

Lo único que me gusta más que escribir código es borrar código. 😍

Tu viejo react-native link los comandos han creado muchos enlaces innecesarios que deben eliminarse.

Abre tu nuevo directorio <app-name>.xcworkspace en Xcode. Elija su objetivo y, en la pestaña General, verá una sección de «Marcos, bibliotecas y contenido incrustado». Elimina todo excepto el JavaScriptCore.framework.

Verá una gran cantidad de código eliminado de su antiguo project.pbxproj expediente. ¿No se siente genial?

Paso 13: ¡Construya y pruebe! 🧪

¡Anímate y ejecuta tu proyecto! Asegúrese de realizar una prueba completa de su aplicación. Si surge algún error, es muy probable que se trate de errores de dependencia, así que diríjase a esos repositorios y vea si hay pasos adicionales que se hayan perdido.

¡Felicitaciones por tu migración! 🎉 🎉 🎉

¿Metro Bundler no arranca?

Cuando me actualicé por primera vez a 0.60, Tuve un problema por el cual Metro Bundler no se iniciaba automáticamente al ejecutar mi aplicación.

Tuve que agregar un Run Script, que se puede encontrar en la pestaña Build Phases en su Target.

Aquí está el guión:

export RCT_METRO_PORT="$RCT_METRO_PORT:=8081"
echo "export RCT_METRO_PORT=$RCT_METRO_PORT" > 
"$SRCROOT/../node_modules/react-native/scripts/.packager.env"
if [ -z "$RCT_NO_LAUNCH_PACKAGER+xxx" ] ; then
                     if nc -w 5 -z localhost $RCT_METRO_PORT ; then
                              if ! curl -s 
"http://localhost:$RCT_METRO_PORT/status" | grep -q "packager-status:running" ; then
echo "Port $RCT_METRO_PORT already in use, packager is either not running or not running correctly"
exit 2
fi
else
open "$SRCROOT/../node_modules/react-native/scripts/launchPackager.command" || echo "Can't start packager automatically"
fi
fi

Una vez que este script estaba en, ya no tenía que iniciar manualmente el paquete con npx react-native start.

Espero que te haya sido de utilidad. Gracias por leer.