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

import NativeMethodsMixin & requireNativeComponent failed #507

Creemli opened this Issue Jun 7, 2017 · 6 comments


5 participants

Creemli commented Jun 7, 2017

It turns out to be error when use:

import NativeMethodsMixin from 'NativeMethodsMixin';

import { requireNativeComponent } from 'react-native'

Is there any better way to access the private class( never export ) such as NativeMethodsMixin?

  1. configure alias in webpack
  2. custom a webpack plugin to fix this issue.



This comment has been minimized.


necolas commented Jun 7, 2017

Hmm, React Native doesn't export NativeMethodsMixin - does the RN packager allow you to import NativeMethodsMixin using Haste? And requireNativeComponent doesn't make sense for Web (you should probably avoid importing it in modules that need to run on web)


This comment has been minimized.

Creemli commented Jun 12, 2017

Yeah, RN packager supports haste ( with providesModule declare ). And I agree with you that the APIs don't make sense.
Actually, if we wanna build a web app with ReactNative Code, some of the APIs are very necessary to be translated in web. When we use this project, we must have already developed a RN app first, so I think we should translate them rather than avoiding importing these functions, How about you?


This comment has been minimized.


necolas commented Jun 12, 2017

I'm going to close this because a) RN doesn't explicitly export NativeMethodsMixin, b) and requireNativeComponent doesn't make sense for web. If you were to import/use RNW's createDOMElement that would also throw an error. You should consider requireNativeComponent as an iOS/Android specific module and it should be avoided in any code that needs to run on web.

@necolas necolas closed this Jun 12, 2017


This comment has been minimized.


L1fescape commented Jul 27, 2017

I think a custom webpack plugin that resolves requireNativeComponent is the best temporary solution, but I wasn't able to figure out how to do so. Instead I opted to create a very basic implementation inside of react-native-web so that I could use react-native-iterable on web, iOS, and Android. There's still a lot left to implement.

I have mixed feelings about requireNativeComponent being considered an iOS/Android specific module. While I agree with your argument @necolas, it'd still be very convenient to use libraries that don't currently target web.


This comment has been minimized.

vladp commented Apr 24, 2018

@L1fescape , WRT " it'd still be very convenient to use libraries that don't currently target web". You were right...
I am running into the same issue with React-native-material kit, which I am struggling to keep for the web (as I used it extensively in my react-native app).

  63 |   onTouch: PropTypes.func,
  64 | };
  65 | 
> 66 | const NativeTouchable = requireNativeComponent('MKTouchable', {
  67 |   name: 'MKTouchable',
  68 |   propTypes: MKTouchable.propTypes,
  69 | }, {

Seems like I have rewrite my app to remove usage of RNMK (at least for the web).


This comment has been minimized.

hiteshagja commented Sep 17, 2018


It's used in popular library react-native-svg and it's really not possible not use svg.

Any work around for by pass this error?

kmagiera added a commit to kmagiera/react-native-screens that referenced this issue Oct 2, 2018

Fix for unsupported platforms (#22)
Fixes #13 for real
Fixes react-navigation/react-navigation#5004

Use different `index.js` files for supported and unsupported platforms.

Tested on iOS and on an existing web project that uses react-navigation.


!['react-native' does not contain an export named 'requireNativeComponent'.](

Necolas explained here that this import should not be on any file that runs on web: necolas/react-native-web#507 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment