Tried to register two views with the same name ProgressBarAndroid

Question

Using react version 16.0.0 with react-native version 0.49.1 raises the red screen error "Tried to register two views with the same name ProgressBarAndroid". Removing all imports and instances of ProgressBarAndroid results in a well functioning program. Downgrading to react-native version 0.48.4 works as well. How do I use ProgressBarAndroid with the latest React Native version?

Answer 1

React Native starting from version 0.49 triggers this error if you are trying to call requireNativeComponent() for same component more than once. Even if they are called from different modules.

I had similar issue with custom view MyCustomView. So I just wrapped it in a single module:

// MyCustomView.js
import {requireNativeComponent} from 'react-native'
const MyCustomView = requireNativeComponent('MyCustomView', null)
export default MyCustomView

Though it might not be your exact case the root cause is the same.

Answer 2

import ReactNative  from 'react-native';

const description = Object.getOwnPropertyDescriptor( ReactNative, 'requireNativeComponent' )

if ( !description.writable ) {
  Object.defineProperty( ReactNative, 'requireNativeComponent', {
    value: (function () {
      const cache = {}
      const _requireNativeComponent = ReactNative.requireNativeComponent

      return function requireNativeComponent( nativeComponent ) {

        if ( !cache[ nativeComponent ] ) {
          cache[ nativeComponent ] = _requireNativeComponent( nativeComponent )
        }

        return cache[ nativeComponent ]
      }
    })(), writable: true
  } )
}