Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Invariant Violation: Tried to register two views with the same name #370

Open
2 tasks
venator85 opened this issue Mar 9, 2023 · 2 comments
Open
2 tasks
Assignees
Labels
bug Something isn't working

Comments

@venator85
Copy link

venator85 commented Mar 9, 2023

Description

Steps to reproduce:

  • Create a new "Native view" project via npx create-react-native-library@latest test
  • cd example && yarn start
  • run android app
  • perform any modification to the src/index.tsx where the custom view bridge is defined, for example add a simple newline at the end of the file

Actual:
The error:

Invariant Violation: Tried to register two views with the same name TestView, js engine: hermes

is displayed in the console and in the Android app.

The error points to the requireNativeComponent line of the following code in src/index.tsx:

export const TestView =
  UIManager.getViewManagerConfig(ComponentName) != null
    ? requireNativeComponent<TestProps>(ComponentName)
    : () => {
        throw new Error(LINKING_ERROR);
      };

Expected:
no errors should be shown.

Packages

  • create-react-native-library
  • react-native-builder-bob

Selected options

✔ What is the name of the npm package? … react-native-test
✔ What is the description for the package? … xxx
✔ What is the name of package author? … Alessio Bianchi
✔ What is the email address for the package author? …
✔ What is the URL for the package author? …
✔ What is the URL for the repository? …
✔ What type of library do you want to develop? › Native view
✔ Which languages do you want to use? › Kotlin & Swift
✔ Project created successfully at test!

Link to repro

No response

Environment

System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M2
    Memory: 102.70 MB / 24.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.7.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.0 - /opt/homebrew/bin/npm
    Watchman: 2023.03.06.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.12.0 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9619390
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.18 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.4 => 0.71.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
@venator85 venator85 added the bug Something isn't working label Mar 9, 2023
@atlj atlj self-assigned this Mar 17, 2023
@atlj
Copy link
Collaborator

atlj commented Mar 21, 2023

It seems like whenever you trigger a refresh, this line gets called:

requireNativeComponent<TestProps>(ComponentName)

Forcing RN to load the same view twice.

My solution would be to extract this particular call into a separate file like this:

// TestView.tsx
import {
  requireNativeComponent,
  UIManager,
  Platform,
  ViewStyle,
} from 'react-native';

const LINKING_ERROR =
  `The package 'react-native-test' doesn't seem to be linked. Make sure: \n\n` +
  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
  '- You rebuilt the app after installing the package\n' +
  '- You are not using Expo Go\n';

type TestProps = {
  color: string;
  style: ViewStyle;
};

const ComponentName = 'TestView';

export const TestView =
  UIManager.getViewManagerConfig(ComponentName) != null
    ? requireNativeComponent<TestProps>(ComponentName)
    : () => {
      throw new Error(LINKING_ERROR);
    };
// index.tsx
export * from "./TestView"

And in theory, you won't have to touch TestView.tsx again and you can make as many changes you want to the index.tsx this way.

But I wonder if we should shape the template like this? @satya164

@satya164
Copy link
Member

@atlj sounds reasonable to me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants