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

Question

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".

Answer 1

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.

Answer 2

(Not a solution, but still want to contribute)

TL;DR:

1. Just press R in terminal to refresh app
2. Auto hot-reload will register FridgeCameraView twice, reason unknown

For those of you who are wondering what's going on, we're learning the React Native - iOS Native Component and following the tutorial:

Swift in React Native - The Ultimate Guide Part 1: Modules

Swift in React Native - The Ultimate Guide Part 2: UI Components

And this is part 2 UI Components that went wrong. As React / React Native are changing fast, this scared resource on native component soon became outdated.

I accidentally need to reinstall my macOS & node_module, no luck in getting rid of the error. Installing another package doesn't solve the issue either.

I suspect that during React Native bridging in Swift -> Objective C -> React-JS, React Native will register our customized module FridgeCameraView twice; but will need expect in Objective C to dig deeper on this issue. Any contribution is welcomed!