iosreact-nativereact-native-iosreact-native-native-ui-component

Native UI Component throws Invariant Violation: tried to register two views with the same name FridgeCameraView


Trying to learn React Native custom Native UI Components.

// FridgeCameraViewManager.swift

import UIKit

@objc(FridgeCameraViewManager)
class FridgeCameraViewManager: RCTViewManager {

  override func view() -> UIView! {
    let label = UILabel()
    label.text = "Swift Component"
    label.textAlignment = .center
    return label
  }

  @objc static override func requiresMainQueueSetup() -> Bool {
    return false
  }
}

.

// FridgeCameraViewManager.h

#import <Foundation/Foundation.h>
#import "React/RCTViewManager.h"

@interface RCT_EXTERN_MODULE(FridgeCameraViewManager, RCTViewManager)


@end

.

// FridgeCameraView.js

import {requireNativeComponent} from 'react-native';
const FridgeCameraView = requireNativeComponent('FridgeCameraView', null);
export default FridgeCameraView;

When I try to use FridgeCameraView component somewhere in App.js, it works only If I build & run the project using Xcode. Otherwise, using hot reload when changing something, I get "Invariant Violation: tried to register two views with the same name FridgeCameraView".

enter image description here


Solution

  • Somehow, the error went away when I installed react-router-native. I think there was a package conflict or something that I was missing. Hopefully, this will be a fix for the ones who encounter this error in the future. I'm still waiting for explanations if somebody knows what's behind this weird error.