VGamezz19 / react-native-sketch-draw

🔵React Native (v0.53) 🎨Component for touch based drawing supporting iOS and Android.
MIT License
34 stars 9 forks source link

Invariant Violation: Native component for "RNSketchView" does not exist #4

Open tmehta2442 opened 6 years ago

tmehta2442 commented 6 years ago

Environment: OS: macOS High Sierra 10.13.4 Node: 9.5.0 Yarn: 1.3.2 npm: 5.6.0 Watchman: Not Found Xcode: Xcode 9.3.1 Build version 9E501 Android Studio: 3.1 AI-173.4720617

Packages: (wanted => installed) react: 16.3.1 => 16.3.1 react-native: ^0.55.4 => 0.55.4

I have also just replaced my page with the example given ("Usage" @ https://github.com/VGamezz19/react-native-sketch-draw), just to make sure i wasn't doing anything else crazy.

Steps to reproduce

  1. npm start
  2. expo app opens up
  3. after going to view in question, get the following error in the big ugly red error view :)

Invariant Violation: Native component for "RNSketchView" does not exist This error is located at: in RNSketchView (at index.js:53) in SketchView (at SelectVehicleScreen.js:55) in RCTView (at View.js:60) in View (at SelectVehicleScreen.js:54) in SelectVehicleScreen (at SceneView.js:10) in SceneView (at StackViewLayout.js:424) in RCTView (at View.js:60) in View (at StackViewLayout.js:423) in RCTView (at View.js:60) in View (at StackViewLayout.js:422) in RCTView (at View.js:60) in View (at createAnimatedComponent.js:154) in AnimatedComponent (at StackViewCard.js:12) in Card (at createPointerEventsContainer.js:28) in Container (at StackViewLayout.js:484) in RCTView (at View.js:60) in View (at StackViewLayout.js:381) in RCTView (at View.js:60) in View (at StackViewLayout.js:380) in StackViewLayout (at withOrientation.js:30) in withOrientation (at StackView.js:61) in RCTView (at View.js:60) in View (at Transitioner.js:146) in Transitioner (at StackView.js:22) in StackView (at createNavigator.js:96) in Navigator (at createKeyboardAwareNavigator.js:11) in KeyboardAwareNavigator (at createNavigationContainer.js:366) in NavigationContainer (at App.js:42) in App (at registerRootComponent.js:35) in RootErrorBoundary (at registerRootComponent.js:34) in ExpoRootComponent (at renderApplication.js:33) in RCTView (at View.js:60) in View (at AppContainer.js:102) in RCTView (at View.js:60) in View (at AppContainer.js:122) in AppContainer (at renderApplication.js:32)

I can see in the react-native-sketch-draw's node_module, inside index.js at line 107 the following: let RNSketchView = requireNativeComponent('RNSketchView', SketchView, { nativeOnly: { onChange: true } }); so not sure why I am getting the error!

Any help is appreciated.

MilanDemarcq commented 6 years ago

Same issue here.

hecmonn commented 5 years ago

Having the same problem here, has anyone found a work around?

omgprod commented 5 years ago

Always same here ^^

jasonnathan commented 5 years ago

Yep, simply doens't work anymore

taimurmushtaq commented 5 years ago

Any work around ?

jvink commented 4 years ago

Same issue

jamzrob commented 4 years ago

Same issue

Chris-McGowan-Vector commented 4 years ago

I had this same issue but realized I had forgotten a step in the install instructions on the readme. You need to add the SketchViewContainer.xib file to the 'Copy Bundle Resouces' build step.

  1. Open Xcode and open the top-level config for your project (in the file view, the top line with the little blueprint icon)
  2. Select the 'Build Phases' tab
  3. Scroll down to and expand the 'Copy Bundle Resources' tab.
  4. Click the '+' button at the bottom of the list.
  5. Navigate to node_modules/react-native-sketch-draw/ios/SketchView and add SketchViewContainer.xib to the project. Note: you might need to go up a folder as I think the default behavior for xcode is to only show you folders below the ios/ folder for your app and node_modules is likely a sibling of that folder. After that, it should build. Hope that helps
prayaslashkari commented 3 years ago

@Chris-McGowan-Vector even after doing that its not working. Any other solutions or library that you would recommend?