“Warning: Native component for <component> does not exist” in new React Native component

Question

I'm trying to create a simple React Native module that wraps a native iOS component (the Stripe SDK ). I followed the instructions and based my code on an existing component which works fine, react-native-facebook-login .

Whenever I attempt to include my component in React Native, I get this mysterious warning:

Warning: Native component for "RCTStripe" does not exist

The component does exist. I created an iOS library for it, with RCTStripeManager.m/h , which inherits from RCTViewManager . RCTStripe inherits from RCTView and is init'ed and returned by the manager, etc. All of this is modeled on another module which works perfectly.

What's going on?

Here's some sample code:

RCTStripeManager.h

#import "RCTViewManager.h"

@interface RCTStripeManager : RCTViewManager

@end

RCTStripeManager.m

#import "RCTBridge.h"
#import "RCTEventDispatcher.h"
#import "RCTLog.h"

#import "RCTStripe.h"
#import "RCTStripeManager.h"

@implementation RCTStripeManager
{
    RCTStripe *_stripe;
}

@synthesize bridge = _bridge;

- (UIView *)view
{
    _stripe = [[RCTStripe alloc] init];
    return _stripe;
}

- (dispatch_queue_t)methodQueue
{
    return dispatch_get_main_queue();
}

RCT_EXPORT_MODULE();

@end

RCTStripe.h

#import "RCTView.h"

@interface RCTStripe : RCTView

@end

RCTStripe.m

#import <Stripe/Stripe.h>

#import "RCTStripe.h"
#import "RCTLog.h"

@implementation RCTStripe

- (id)init
{
  if ((self = [super init])) {
      // init code here
      UILabel *myLabel = [[UILabel alloc] init];
      [myLabel setText:@"Hello world"];
      [self addSubview:myLabel];
  }

  return self;
}

- (void)layoutSubviews
{
    [super layoutSubviews];
    RCTAssert(self.subviews.count == 1, @"we should only have exactly one subview");
}

- (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex
{
    RCTLogError(@"FBLoginButton does not support subviews");
    return;
}

- (void)removeReactSubview:(UIView *)subview
{
    RCTLogError(@"FBLoginButton does not support subviews");
    return;
}

- (NSArray *)reactSubviews
{
    return @[];
}

@end

index.ios.js

var React = require('react-native');
var {
  StyleSheet,
  NativeModules,
  requireNativeComponent,
  NativeMethodsMixin,
} = React;

var { StripeManager } = NativeModules;

var SuperStripe = React.createClass({

  mixins: [NativeMethodsMixin],

  render: function() {
    var props = {
      ...this.props,
      style: ([styles.base, this.props.style]),
    };

    return <RCTStripe {...props} />
  },
});

var RCTStripe = requireNativeComponent('RCTStripe', SuperStripe);

var styles = StyleSheet.create({
  base: {
    width: 300,
    height: 300,
  },
});

module.exports = SuperStripe;

Full code is in https://github.com/lrettig/react-native-stripe . Inside the example/ directory, run npm install and npm start , then open example/ios/example.xcodeproj and run it.

Thanks.

Answer 1

It turned out this was happening because I started with an existing module with a different name, and I renamed the Xcode project. When I renamed the Xcode project, for some reason it removed the module project ( RCTStripe ) from the "Link Binary with Libraries" section of the build phases for the parent (sample) project, so the code wasn't being run at all. Adding it back fixed this.

Answer 2

Another scenario this error occurs is when installing a new native package.

Make sure to:

• run yarn: yarn install
• run cocoapods: pod install in /ios folder
• build the app again through XCode/Android Studio or yarn start command.