Problemas con React Native

April 15, 2019 • ☕️ 2 minutos de lectura

Quiero empezar el post comentando que me encanta react native, con el puedo usar lo aprendido en react y hacer aplicaciones móviles sin “mucho esfuerzo”. No obstante, no puedo evitar odiar todas esas pantallas rojas que me han aparecido a lo largo de mis proyectos, el miedo a que en cualquier momento falle por algo de caché por muchas otras razones que desconozco…

Aquí os dejo algunas soluciones que me ha ayudado… pero si tengo algo claro, lo que ayuda de verdad es leer la documentación con detalle y seguirla paso por paso, con las prisas podemos obviar algo muy importante.

Problema FacebookSDK

Solución Abrir XCode y buscar el fichero RCTFBSDK.xcodeproj luego en settings->framework search paths debemos cambiar ~/Documents/FacebookSDK a $(HOME)/Documents/FacebookSDK

Link

react-native run-ios no encuentra ningún emulador

Solución Editar fichero node_modules/react-native/local-cli/runIOS/findMatchingSimulator.js y buscar: if (!version.startsWith('iOS'). Ahora lo remplazaremos por: if (!version.includes('iOS').

Link

Android app se romper al abrirse 🤯

Solución

  1. Buscar la version de gcm from en este directorio ~/Library/Android/sdk/extras/google/m2repository/com/google/android/gms/play-services
  2. actualiza lo siguiente en el archivo android / gradle.properties, por ejemplo, googlePlayServicesVersion = 11.0.4 (lo que aparezca en la ruta mencionada anteriormente

Link

Unable to load script from assets index.android.bundle on windows

Solución

  1. (En el directorio del proyecto) mkdir android/app/src/main/assets
  2. react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
  3. react-native run-android

Link

Duplicate resources…

Editar node_modules/react-native/react.gradle y añadir debajo de doFirst el siguiente código.

doFirst{}
// ...
doLast {
    def moveFunc = { resSuffix ->
        File originalDir = file("$buildDir/generated/res/react/release/drawable-${resSuffix}");
        if (originalDir.exists()) {
            File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}");
                ant.move(file: originalDir, tofile: destDir);
        }
    }
    moveFunc.curry("ldpi").call()
    moveFunc.curry("mdpi").call()
    moveFunc.curry("hdpi").call()
    moveFunc.curry("xhdpi").call()
    moveFunc.curry("xxhdpi").call()
    moveFunc.curry("xxxhdpi").call()
}
// ...

Luego ejecutaremos

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

Luego borramos los fichero

rm -rf android/app/src/main/res/drawable-xxxhdpi android/app/src/main/res/drawable-xxhdpi android/app/src/main/res/drawable-xhdpi android/app/src/main/res/drawable-mdpi android/app/src/main/res/drawable-hdpi

Y por último generamos el apk

cd android && ./gradlew assembleRelease