White screen issue when adding prebuilt xcframework to existing iOS project

[edoko]

Ask your Question

Hello, I'm working on integrating React Native into an existing iOS project using rnef.

First, I created a project with rnef for prebuild purposes (to create an xcframework), and configured it to only handle xcframework generation.
Second, I added React Native to the existing iOS project.

I copied the prebuilt xcframework and hermes.xcframework to the existing project and proceeded with the build, but when I open the RN view, only a white screen appears (no errors).

Could you help me understand what might be wrong?

I followed the guide at https://www.rnef.dev/docs/brownfield/ios for this work.

I've also created a separate project that reproduces the issue and uploaded it.

Thank you.

iOS Prebuild Project: https://github.com/edoko/rnef-ios-prebuild-test
Exist iOS Project: https://github.com/edoko/rnef-integrate-project

[jportela]

I'm also seeing this issue, integrating into an existing iOS project. The React Native iOS app loads fine if using rnef run:ios, but integrating it into the iOS app, it doesn't load at all.

I've verified that the RCTRootViewFactory seems to be loading fine (getting this on the logs of the app):

Running application MyReactNativeApp ({
    initialProps =     {
    };
    rootTag = 1;
})

The Debug View Hierarchi also shows a RCTRootView and RCTRootContentView, but nothing else.

The main.jsbundle seems to be generated, but I couldn't really inspect it since that's encoded.

[edoko]

I'm also seeing this issue, integrating into an existing iOS project. The React Native iOS app loads fine if using rnef run:ios, but integrating it into the iOS app, it doesn't load at all.

I've verified that the RCTRootViewFactory seems to be loading fine (getting this on the logs of the app):

Running application MyReactNativeApp ({
    initialProps =     {
    };
    rootTag = 1;
})

The Debug View Hierarchi also shows a RCTRootView and RCTRootContentView, but nothing else.

The main.jsbundle seems to be generated, but I couldn't really inspect it since that's encoded.

You're experiencing the exact same issue as me.
Since no errors are occurring, it makes tracking the problem even more difficult, and I haven't been able to make any further progress.

[thymikee]

I was able to reproduce it on a default template from RNEF in Release mode. Still debugging, as it doesn't happen on a fresh native project for some reason.

[thymikee]

We're working on the fix here: #271
It involves using @callstack/react-native-brownfield library, which we've intended to use in this scenario from the very start (we didn't for reasons).

[thymikee]

#271 is now merged and released in https://github.com/callstack/rnef/releases/tag/v0.7.26. Please give it a go (it requires a bit different setup with React Native Brownfield library) and let me know

[MinhNgoc-Ngnm]

@thymikee the new version is working very well, but it seems like it's not loading the .ttf font icon inside xframework

[thymikee]

@MinhNgoc-Ngnm let me ask the team about that. I'm traveling right now and may be slow to respond

[krozniata]

@MinhNgoc-Ngnm
In order to use .ttf from .xcframework it is necessary to manually register them e.g. inside AppDelegate of app consuming framework
https://stackoverflow.com/questions/52811495/how-to-use-custom-fonts-from-a-framework-generated-within-xcode-workspace