Expo build of app created with create-solito-app is a blank screen

[gabrielEloy]

Hey, Fernando thanks for the work on solito and all the react-native-web ecosystem! Great work man!

I've been playing around with a create-solito-app application. During the dev workflow everything worked like a charm, but, when I tried to build my application, the expo build just spits an app which just render a blank screen. The 'nextjs' build works fine tough

I've tried generating the build both by using expo legacy build, with the command:

expo build:android

and with eas, by using:

eas build

and configuring eas to build an apk, so I could test it locally.

both build commands were run from inside the expo folder.

Both methods ended in the same result, a successfully generated apk that renders a blank screen and nothing else:

So I wondered, maybe I did something wrong in my application and decided to test if I could generate a working build from a fresh, unmodified create-solito-app, and the build generated from it only rendered a blank page as well.

Are there any extra steps I need to take before generating my build? or is simply running the regular build commands supposed to work ?

[nandorojo]

I haven't actually tried on Android. What about iOS? What if you do expo run:ios or expo run:android?

[nandorojo]

Are there any errors in the logs?

[gabrielEloy]

I've tried using expo run:android and got the following error message:

and when I tried running expo run:ios, I got the exact same error:

[gabrielEloy]

I manage to get rid of both error messages using expo run:<platform> after installing react-native-safe-area-context and react-native-screens, so the app worked as expected with expo expo run:<platform>.

but when I try to generate a build using expo build:android it still generates an apk that renders a blank screen when opened.

When I try to generate the build using eas build -p android the build always fails with the following message:

warning: the transform cache was reset.
                    Welcome to Metro!
              Fast - Scalable - Integrated
[stderr] Failed to construct transformer:  Error: Cannot parse /home/expo/.nvm/test/fast/Unit tests/mocks/project_dirs/no-nesting-both/package.json as JSON: Unexpected end of JSON input
[stderr]     at Object.worker (/home/expo/workingdir/build/node_modules/jest-haste-map/build/worker.js:146:13)
[stderr]     at HasteMap._processFile (/home/expo/workingdir/build/node_modules/jest-haste-map/build/index.js:724:8)
[stderr]     at HasteMap._buildHasteMap (/home/expo/workingdir/build/node_modules/jest-haste-map/build/index.js:776:28)
[stderr]     at /home/expo/workingdir/build/node_modules/jest-haste-map/build/index.js:426:33
[stderr] error Cannot parse /home/expo/.nvm/test/fast/Unit tests/mocks/project_dirs/no-nesting-both/package.json as JSON: Unexpected end of JSON input.
Error: Cannot parse /home/expo/.nvm/test/fast/Unit tests/mocks/project_dirs/no-nesting-both/package.json as JSON: Unexpected end of JSON input
    at Object.worker (/home/expo/workingdir/build/node_modules/jest-haste-map/build/worker.js:146:13)
    at HasteMap._processFile (/home/expo/workingdir/build/node_modules/jest-haste-map/build/index.js:724:8)
    at HasteMap._buildHasteMap (/home/expo/workingdir/build/node_modules/jest-haste-map/build/index.js:776:28)
    at /home/expo/workingdir/build/node_modules/jest-haste-map/build/index.js:426:33
info Run CLI with --verbose flag for more details.
> Task :app:bundleReleaseJsAndAssets FAILED
[stderr] FAILURE: Build failed with an exception.
[stderr] * What went wrong:
[stderr] Execution failed for task ':app:bundleReleaseJsAndAssets'.
[stderr] > Process 'command 'node'' finished with non-zero exit value 1
[stderr] * Try:
[stderr] Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
[stderr] * Get more help at https://help.gradle.org
[stderr] BUILD FAILED in 1m 50s
Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.9/userguide/command_line_interface.html#sec:command_line_warnings
19 actionable tasks: 19 executed
Error: Gradle build failed with unknown error. Please see logs for the "Run gradlew" phase.

[nandorojo]

Hmm interesting, did expo build get fixed by installing those 2 packages?

[nandorojo]

react-native-safe-area-context (I hate typing that name out) is already installed, but RN Screens isn't, so I'll add that to the starter monorepo.

[gabrielEloy]

Hmm interesting, did expo build get fixed by installing those 2 packages?

Unfortunately not. I'm still not able to generate a functional build :(

expo build generates an application that when opened shows nothing more than a blank screen

https://user-images.githubusercontent.com/37480915/160510233-defaee67-c770-41d8-a487-795797162691.mp4

I've tried using Logcat to see if I could find out more about the error and the displayed message was the following:

2022-03-28 19:33:08.149 11268-11268/? E/e: Failed to clear legacy OkHttp cache

apparently this is the error that is preventing my app from rendering and keeping it stuck in a white screen state

I'm still trying to figure out how to solve this error. Have you ever seen anything like it and/or have any idea on how to solve this problem?

[gabrielEloy]

FIXED

After several hours of investigation, I was able to figure out what was the problem.

at apps/expo/metro.config.js at line 19

the config.transformer property was being edited. I tried generating a build without the config.transformer changes and it worked like a charm

So, my final metro.config.js file looks like this:

// Learn more https://docs.expo.io/guides/customizing-metro
/**
 * @type {import('expo/metro-config')}
 */
const { getDefaultConfig } = require('expo/metro-config')
const path = require('path')

const projectRoot = __dirname
const workspaceRoot = path.resolve(__dirname, '../..')

const config = getDefaultConfig(__dirname)

config.watchFolders = [workspaceRoot]
config.resolver.nodeModulesPath = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(workspaceRoot, 'node_modules'),
]

module.exports = config

[nandorojo]

What happens if you export a single view in App.tsx and don’t import anything else?

[nandorojo]

Oh whoops I didn’t realize it was a fix lol. Thank you for sending! I’ll take a look at this in the morning.

[nandorojo]

merged all the PRs, thanks for the help here @gabrielEloy! appreciate you digging in and finding the fix.