React Native app stuck on blank screen when running on device with remote debugging

Question

I run my react native application on my device (iPhone 6) and it loads fine. But when I enable remote debugging, it seems to connect fine to debugger but gets stuck on a blank screen.

As soon as I turn off remote debugging, everything loads fine.

I am on react-native 0.40.0.

Please help!

Do you use Chrome as debugger? It happens to me when I use the app "React Native Debugger" and I have to restart the debugger before it works again. — Haitao Li, Jan 27 '17 at 05:04
I have the same "white screen issue" but with Nuclide debugger and maybe there is some connection with this issue but I am not sure. For more info see [separate question](http://stackoverflow.com/questions/43154551/react-native-app-stuck-on-blank-white-screen-with-remote-debugging-using-nuclide). — Stich, Apr 01 '17 at 08:28

score 2 · Answer 1 · answered Nov 19 '19 at 11:56

There can be many reasons, in my case it was the cache that was creating problem. Suggested Solutions:-

Clean gradlew - To clean gradle go to android folder and open cmd in it, run 'gradlew clean' in the cmd
after cleaning gradle, re-build your app run command (run-android etc)
if the problem exist after rebuilding follow step 4 & 5
Go to App's setting and clear App's data
now clear react-native terminal's cache ( react-native start --reset-cache )

These steps will fix the problem!

score 0 · Answer 2 · answered Feb 20 '18 at 02:13

0

I overcome this effect by doing the following:

go to the terminal and press "a" to reopen Android device or emulator
close application on mobile device and open it once again
if necessary, restart R to restart packager and clear cache in the terminal

answered Feb 20 '18 at 02:13

Roman

19,236
15
93
97

I tried this with my Android connected over USB. I can't even exit the application without killing Expo. – Lawrence I. Siden Mar 20 '18 at 00:58

score 0 · Answer 3 · answered Jul 25 '20 at 16:08

I was facing this same issue when launching a react native module from iOS native module.

Replacing below mentioned code using BUNDLE URL

    if let bundleUrl = (UIApplication.shared.delegate as? AppDelegate)?.bridge?.bundleURL {
    let mockData:NSDictionary = ["names":
        [
            ["name":"Name 1",],
            ["name":"Name 2"]
        ]
    ]
    
    let rootView = RCTRootView(bundleURL: bundleUrl, moduleName: "modulename", initialProperties: mockData as [NSObject : AnyObject], launchOptions: nil)
    
    let vc = UIViewController()
    vc.view = rootView
    self.present(vc, animated: true, completion: nil)

with this updated code using BRIDGE

    if let bridge = (UIApplication.shared.delegate as? AppDelegate)?.bridge {
    let mockData:NSDictionary = ["names":
        [
            ["name":"Name 1",],
            ["name":"Name 2"]
        ]
    ]
    
    let rootView = RCTRootView(bridge: bridge, moduleName: "modulename", initialProperties: mockData as [NSObject : AnyObject])
    
    let vc = UIViewController()
    vc.view = rootView
    self.present(vc, animated: true, completion: nil)
}

resolve the issues!!

React Native app stuck on blank screen when running on device with remote debugging

3 Answers3