Search code examples
javascriptiostypescriptxcodereact-native

Why React Native view doesn't load using RCTRootView?

I am following the React Native documentation to load a React Native view from an iOS app.

import React from 'react';
import { AppRegistry, View, Text } from 'react-native';

const TestView = () => {
  return (
    <View>  
      <Text>Hello World</Text>  
    </View>  
  );
};

// Module name
AppRegistry.registerComponent('TestView', () => TestView);

I am creating the view from the iOS app as the documentation suggests:

guard let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios") else { return }
let rootView = RCTRootView(
  bundleURL: jsCodeLocation,
  moduleName: "TestView",
  initialProperties: nil,
  launchOptions: nil
)
let vc = UIViewController()
vc.view = rootView
self.present(vc, animated: true, completion: nil)

But when the view controller is presented, I see nothing:

The integration of React Native in the project is correct. And index.js is called when the view controller is presented. But it's not working. Any ideas?

enter image description here

Xcode logs:

[native] Running application TestView ({ initialProps = { }; rootTag = 51; })

[connection] nw_socket_handle_socket_event [C15:1] Socket SO_ERROR [61: Connection refused]

[connection] nw_connection_get_connected_socket [C15] Client called nw_connection_get_connected_socket on unconnected nw_connection

TCP Conn 0x600003104000 Failed : error 0:61 [61]

[javascript] Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'DevSettings' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes

[javascript] Error: Requiring module "node_modules/react-native/Libraries/Core/InitializeCore.js", which threw an exception: Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'DevSettings' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes

[javascript] Invariant Violation: Failed to call into JavaScript module method RCTEventEmitter.receiveTouches(). Module has not been registered as callable. Registered callable JavaScript modules (n = 10): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient.

A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

[native] Invalidating <RCTCxxBridge: 0x120507c40> (parent: (null), executor: (null))

Solution

  • I wasn't running the app in Xcode using Debug-mode.