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: requireNativeComponent: "RNDateTimePicker" was not found in the UIManager #12

Closed
dmargu opened this issue Jul 25, 2019 · 28 comments
Assignees
Labels
bug Something isn't working

Comments

@dmargu
Copy link

dmargu commented Jul 25, 2019

Bug

The component appears to not be working. Once my app reaches the screen where the component is called it crashes.

Invariant Violation: Invariant Violation: Invariant Violation: requireNativeComponent: "RNDateTimePicker" was not found in the UIManager.

This error is located at:
    in RNDateTimePicker (at datetimepicker.ios.js:81)
    in RCTView (at View.js:45)
    in View (at datetimepicker.ios.js:80)
    in Picker (at DatePicker.js:38)
    in RCTView (at View.js:45)
    in View (at DatePicker.js:31)
    in DatePicker (at HomeScreen.js:18)
    in RCTScrollContentView (at ScrollView.js:976)
    in RCTScrollView (at ScrollView.js:1115)
    in ScrollView (at HomeScreen.js:14)
    in RCTView (at View.js:45)
    in View (at HomeScreen.js:13)
    in HomeScreen (at SceneView.js:9)
    in SceneView (at DrawerView.js:149)
    in RCTView (at View.js:45)
    in View (at ResourceSavingScene.js:20)
    in RCTView (at View.js:45)
    in View (at ResourceSavingScene.js:16)
    in ResourceSavingScene (at DrawerView.js:148)
    in RCTView (at View.js:45)
    in View (at screens.native.js:83)
    in ScreenContainer (at DrawerView.js:138)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at DrawerLayout.js:446)
    in RCTView (at View.js:45)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at DrawerLayout.js:445)
    in PanGestureHandler (at DrawerLayout.js:501)
    in DrawerLayout (at DrawerView.js:165)
    in DrawerView (at createNavigator.js:61)
    in Navigator (at createAppContainer.js:429)
    in NavigationContainer (at SceneView.js:9)
    in SceneView (at createTabNavigator.js:39)
    in RCTView (at View.js:45)
    in View (at ResourceSavingScene.js:37)
    in RCTView (at View.js:45)
    in View (at ResourceSavingScene.js:26)
    in ResourceSavingScene (at createBottomTabNavigator.js:121)
    in RCTView (at View.js:45)
    in View (at screens.native.js:83)
    in ScreenContainer (at createBottomTabNavigator.js:111)
    in RCTView (at View.js:45)
    in View (at createBottomTabNavigator.js:110)
    in TabNavigationView (at createTabNavigator.js:197)
    in NavigationView (at createNavigator.js:61)
    in Navigator (at createAppContainer.js:429)
    in NavigationContainer (at App.js:38)
    in ViewManagerAdapter_ExpoLinearGradient (at NativeViewManagerAdapter.js:49)
    in ForwardRef(Adapter<ExpoLinearGradient>) (at NativeLinearGradient.ios.js:5)
    in NativeLinearGradient (at LinearGradient.js:12)
    in LinearGradient (at App.js:37)
    in Provider (at App.js:36)
    in App (at withExpoRoot.js:20)
    in RootErrorBoundary (at withExpoRoot.js:19)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)

This error is located at:
    in NavigationContainer (at SceneView.js:9)
    in SceneView (at createTabNavigator.js:39)
    in RCTView (at View.js:45)
    in View (at ResourceSavingScene.js:37)
    in RCTView (at View.js:45)
    in View (at ResourceSavingScene.js:26)
    in ResourceSavingScene (at createBottomTabNavigator.js:121)
    in RCTView (at View.js:45)
    in View (at screens.native.js:83)
    in ScreenContainer (at createBottomTabNavigator.js:111)
    in RCTView (at View.js:45)
    in View (at createBottomTabNavigator.js:110)
    in TabNavigationView (at createTabNavigator.js:197)
    in NavigationView (at createNavigator.js:61)
    in Navigator (at createAppContainer.js:429)
    in NavigationContainer (at App.js:38)
    in ViewManagerAdapter_ExpoLinearGradient (at NativeViewManagerAdapter.js:49)
    in ForwardRef(Adapter<ExpoLinearGradient>) (at NativeLinearGradient.ios.js:5)
    in NativeLinearGradient (at LinearGradient.js:12)
    in LinearGradient (at App.js:37)
    in Provider (at App.js:36)
    in App (at withExpoRoot.js:20)
    in RootErrorBoundary (at withExpoRoot.js:19)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)

This error is located at:
    in NavigationContainer (at App.js:38)
    in ViewManagerAdapter_ExpoLinearGradient (at NativeViewManagerAdapter.js:49)
    in ForwardRef(Adapter<ExpoLinearGradient>) (at NativeLinearGradient.ios.js:5)
    in NativeLinearGradient (at LinearGradient.js:12)
    in LinearGradient (at App.js:37)
    in Provider (at App.js:36)
    in App (at withExpoRoot.js:20)
    in RootErrorBoundary (at withExpoRoot.js:19)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)
- node_modules/react-native/Libraries/ReactNative/getNativeComponentAttributes.js:29:4 in getNativeComponentAttributes
- node_modules/react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js:104:25 in get
- ... 18 more stack frames from framework internals

Library version: 1.0.0

Steps To Reproduce

  1. npm install --save @react-native-community/datetimepicker
  2. expo start

Describe what you expected to happen:

  1. For a button to appear where I could press and open the date picker
@dmargu dmargu changed the title Invariant Violation: requireNativeComponent: Invariant Violation: requireNativeComponent: "RNDateTimePicker" was not found in the UIManager Jul 25, 2019
@adam-s
Copy link

adam-s commented Jul 29, 2019

This package does not work with React Native .60

@denistsoi
Copy link

Seems sort of buggy but going into src/ios and running pod install might find the dependancy.

https://github.com/react-native-community/react-native-datetimepicker#manual-installation

@Swaagie
Copy link
Collaborator

Swaagie commented Jul 30, 2019

Thank your for reporting. I'm currently working on doing a full update to support 0.60, I'll make sure to verify that it works as expected. The work in progress can be found here #13

That said I did notice the reference to expo

  1. expo start

I don't think expo by default supports native modules other than a set of modules from React Native itself and a selection of handpicked native API's. But please correct me if I'm wrong.

@Swaagie Swaagie added the bug Something isn't working label Jul 31, 2019
@Swaagie Swaagie self-assigned this Jul 31, 2019
@Swaagie
Copy link
Collaborator

Swaagie commented Aug 13, 2019

@dmargu @adam-s I've just published @react-native-community/datetimepicker@2.0.0 which works against React Native 0.60, let me know if that resolves your build or runtime issues.

@zubjorge
Copy link

@Swaagie is there anything different we need to do on version 2.0.0 to work with RN 60? https://github.com/react-native-community/react-native-datetimepicker#manual-installation
I'm not able to build it, it looks it has something to do with the use_frameworks!
facebook/react-native#25349

@mrcl3an
Copy link

mrcl3an commented Aug 28, 2019

This combination is also not working:

"@react-native-community/datetimepicker": "^2.0.0", "react": "^16.8.6", "react-native": "^0.60.5"

Same error as the original poster when building/running on iOS

@evrimfeyyaz
Copy link

@mrcl3an Did you try doing pod install and restarting the Metro Bundler?

@rendongsc
Copy link

I am using expo 34.0.1 and I have encountered this problem.

  "expo": "^34.0.1"
React-native link
Expo install @react-native-community/datetimepicker

Have tried, still have problems

@vincentzierigen
Copy link

I have the same problem, are there any solutions?

@DMezhenskyi
Copy link

DMezhenskyi commented Sep 24, 2019

expo 35.0.0 (bare workflow) - the same issue

@Nnoerregaard
Copy link

I might be mistaken, but if you are using a managed expo workflow it seems this package will not work because expo does not support native modules and this package is a native module
https://docs.expo.io/versions/latest/introduction/faq/ (search for "native modules")

@DMezhenskyi
Copy link

DMezhenskyi commented Sep 25, 2019

@Nnoerregaard I am using the bare workflow which supports native modules https://docs.expo.io. So the issue is with something else :(

@yash-atreya
Copy link

@Swaagie @dmargu @adam-s I've just published @react-native-community/datetimepicker@2.0.0 which works against React Native 0.60, let me know if that resolves your build or runtime issues.

I'm still getting the same error, but only on ios and not on android.
Library version @react-native-community/datetimepicker@2.1.0
Invariant Violation: requireNativeComponent: "RNDateTimePicker" was not found in the UIManager

@redBaron23
Copy link

I've this:

Invariant Violation: Invariant Violation: requireNativeComponent: "DatePickerManager" was not found in the UIManager.

  • node_modules/react-native/Libraries/ReactNative/getNativeComponentAttributes.js:29:4 in getNativeComponentAttributes
  • node_modules/react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js:104:25 in get
  • ... 18 more stack frames from framework internals

@avtarnanrey
Copy link

avtarnanrey commented Oct 19, 2019

Any solutions for this?

React Native: 0.61.2
@react-native-community/datetimepicker: 2.1.0

@SallarBhutto
Copy link

Adding
pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker/RNDateTimePicker.podspec' in podfile solved it.

"react-native": "0.61.2",
"@react-native-community/datetimepicker": "^2.1.0",
"react-native-modal-datetime-picker": "8.x.x",

@tsapeta
Copy link

tsapeta commented Oct 29, 2019

Yeah, adding RNDateTimePicker to the Podfile or using an autolink mechanism from react-native should solve this problem. Also, I've just merged expo/expo#6087 so this native module will be a part of the next Expo SDK (36) so you will be able to use it in managed workflow as well 🎉

@leonardomarciano
Copy link

Same error, on React-native 0.60.5.

Only in iOS.

The podfile hotfix does't works here.

@joelrorseth
Copy link

Using react-native link and installing pods fixed this issue for me, on RN 0.60.3. Not sure why this section was removed from readme.

react-native link @react-native-community/datetimepicker && cd ios && pod install

@rzdev
Copy link

rzdev commented Dec 11, 2019

@avtarnanrey

React Native: 0.61.2
@react-native-community/datetimepicker: 2.1.0

  • install (npm install / yarn install)
  • cd ios
  • pod install

*no need to link

works for me

@ermarin
Copy link

ermarin commented Dec 17, 2019

Doesn't work

@leecommamichael
Copy link

Strangely, this DOES work for me on RN 0.61.2 both iOS and Android work. I did nothing to manually install it. I did not edit Main.java, I did not change any gradle settings, I did not add anything to pod file.

@ermarin
Copy link

ermarin commented Dec 20, 2019

Strangely, this DOES work for me on RN 0.61.2 both iOS and Android work. I did nothing to manually install it. I did not edit Main.java, I did not change any gradle settings, I did not add anything to pod file.

Then only install with npm? Because this is not possible, in the documentation say's add in podfile, install pod, add in gradle... I don't understand

@leecommamichael
Copy link

Strangely, this DOES work for me on RN 0.61.2 both iOS and Android work. I did nothing to manually install it. I did not edit Main.java, I did not change any gradle settings, I did not add anything to pod file.

Then only install with npm? Because this is not possible, in the documentation say's add in podfile, install pod, add in gradle... I don't understand

Yeah, just let autolinking take care of you I suppose.

@jefelewis
Copy link

jefelewis commented Jan 23, 2020

Was anyone able to get this to work?

I'm building an NPM Package and it works when running in the iOS simulator, but when I install the package through npm and import the component, the error occurs when I click on the picker. My component renders, but it throws the error as soon as I click on it to bring up the picker.

Not sure if it is a podfile issue, linking issue, or something else I'm missing. I'm on react-native 0.61.5, but I'm importing the RNDatepicker in the podfile.

Invariant Violation: View config not found for name RNDateTimePicker

Then this weird thing where I get a different error if I add <SafeAreaView style={{ display: 'flex', flex: 1 }}> to the container the NPM Package component is housed in.

Invariant Violation: requireComponent: "RNDateTimePicker" was not found in the UIManager"

My podfile

# Allowed sources
source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'reactNativeUltimateModalPicker' do
  # As we use Swift, ensure that `use_frameworks` is enabled.
  use_frameworks!

  # React Native Datetime List Picker
  pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker/RNDateTimePicker.podspec'
  # # React Native Vector Icons
  # pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

  # Pods for reactNativeUltimateModalPicker
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  target 'reactNativeUltimateModalPickerTests' do
    inherit! :search_paths
    # Pods for testing
  end

  use_native_modules!
end

target 'reactNativeUltimateModalPicker-tvOS' do
  # Pods for reactNativeUltimateModalPicker-tvOS

  target 'reactNativeUltimateModalPicker-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

@usman1579
Copy link

ANY SOLUTION??

@DanielWahl
Copy link

Mine now works fine after I updated my Expo SDK to 36.0.0.

@vonovak
Copy link
Member

vonovak commented Feb 5, 2020

I'm closing this because

  • there is no runnable reproduction
  • it's not clear whether the issue pertains to expo / vanilla RN
  • not clear what version of expo / RN is affected

@usman1579 please open a new issue with a runnable reproduction if the problem persists. Thanks.

@vonovak vonovak closed this as completed Feb 5, 2020
@react-native-datetimepicker react-native-datetimepicker locked and limited conversation to collaborators Feb 5, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests