Native component not found in the UIManager

Question

I'm trying to build a react native component, but I'm stuck in follow error:

Invariant Violation: requireNativeComponent: "RNMyComponent" was not found in the UIManager.

I believe to be in the right path, but still missing something. After so many tries of nomenclature changes and builds that I was following in some examples, I don't know if the problem it's the code or some kind of cache.

To avoid some kind of cache problems, I'm always running the follow commands.

rm -rf ios/build
rm -rf android/app/build
rm -rf ~/Library/Developer/Xcode/DerivedData
rm -rf lib
watchman watch-del-all
rm -rf node_modules package-lock.json
npm cache verify
npm install
rm -rf $TMPDIR/react-*
rm -rf $TMPDIR/react-packager-*
rm -rf $TMPDIR/haste-map-react-native-packager-*
rm -rf $TMPDIR/metro-cache-react-native-packager-*
rm -rf $TMPDIR/metro-bundler-cache-*
rm -rf ios/Pods Podfile.lock
cd ios && pod install
react-native link

But even so, it always get the same error above.

Follow the code of my react-native component

RNMyComponent.h

#import <React/RCTViewManager.h>

@interface RNMyComponent : RCTViewManager

@end

RNMyComponent.m

#import "RNMyComponent.h"

#import <React/RCTUIManager.h>
#import <React/RCTLog.h>

#import "RNMyComponentView.h"

@implementation RNMyComponent

RCT_EXPORT_MODULE()

- (UIView *)view
{
  return [RNMyComponentView new];
}

@end

RNMyComponentView.h

#import <UIKit/UIKit.h>
#import <React/RCTView.h>
#import <REact/RCTUIManager.h>

@interface RNMyComponentView : UIView

@end

RNMyComponentView.m

#import "RNMyComponentView.h"
#import <React/RCTLog.h>

@implementation RNMyComponentView

@end

index.js

module.exports = {
  get MyComponent() {
    return require('./RNMyComponent').default;
  },
};

RNMyComponent.js

class MyComponent extends Component {
  render() {
    return (
      <RNMyComponent />
    );
  }
}

const RNMyComponent = requireNativeComponent('RNMyComponent', MyComponent);

export default MyComponent;

... and how I call the component

import { MyComponent } from 'react-native-my-component';
<MyComponent />

"react-native": "^0.60.5",

refer this https://facebook.github.io/react-native/docs/native-modules-ios — hong developer, Sep 03 '19 at 14:47
@hongdevelop, I follow that reference, that's why I'm here, because it's seems right but it's not working. — Pablo, Sep 03 '19 at 15:42
Seems silly, but is this the problem? import MyComponent from 'react-native-my-component'. Removed {} — Gokul Kulkarni, Sep 03 '19 at 20:42

score 1 · Answer 1 · answered Nov 12 '19 at 18:22

1

When creating react native module, inside ios there is this "RNTheModule.podspec". What I did was move it to the root and changed to the same name as my module (inside package.json). So should be:

- root
-- the-module.podspec
- ios
- android
- ...

answered Nov 12 '19 at 18:22

Pablo

1,953
4
28
57

Native component not found in the UIManager

1 Answers1