requireNativeComponent was not found in UIManager

Issue

I know this question has been asked many times but all the questions refers to integrating a third party dependency in react-native app but in my case it is because of my own native code and I am having issues on how to fix it. I am using react-native 0.69.

Here is snippet of my code. In CealScanQrViewManager.kt:

class CealScanQrViewManager(
    private val reactContext: ReactApplicationContext
) : ViewGroupManager<FrameLayout>() {
    private val cealScanQrView = "CealScanQrView"

    // ...

    override fun getName() = cealScanQrView

    // ...
}

On the JS side, I have created a CealScanQrViewManager.tsx file:

import {requireNativeComponent} from 'react-native';

export const CealScanQrViewManager = requireNativeComponent(
  'CealScanQrViewManager',
);

In App.tsx:

const App = () => {
  // ...

  const [isCameraPermissionGranted, setIsCameraPermissionGranted] =
    useState(false);

  // ...

  useEffect(() => {
    requestCameraPermission();
  }, []);

  // ...

  const requestCameraPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'Cool Photo App Camera Permission',
          message:
            'Cool Photo App needs access to your camera ' +
            'so you can take awesome pictures.',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        setIsCameraPermissionGranted(true);
      } else {
        console.log('Camera permission denied');
      }
    } catch (err) {
      console.warn(err);
    }
  };

  // ...

  return (
    <SafeAreaView /* ... */>
      {/* ... */}
      {isCameraPermissionGranted ? (
        <CealScanQrViewManager
          /* ... */
        />
      ) : (
        <View style={{flex: 1, backgroundColor: 'red'}} />
      )}
    </SafeAreaView>
  );
};

As soon as I grant the camera permission I get error saying:

requireNativeComponent CealScanQrViewManager was not found in UIManager

enter image description here

Solution

The official guide to native components has you register a view manager, which is a class that overrides getName to return a fixed string, and then pass that same string to requireNativeComponent.

In your code, those names do not match. You requireNativeComponent('CealScanQrViewManager'), but register it as "CealScanQrView". As the official guide explains,

Name returned by getName is used to reference the native view type from JavaScript.

If the name does not match, no wonder looking up the type fails.

Answered By – user3840170

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published