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

[dmargu]

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

[adam-s]

This package does not work with React Native .60

[denistsoi]

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]

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 https://github.com/react-native-community/react-native-datetimepicker/pull/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]

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

[zubjorge]

@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!
https://github.com/facebook/react-native/issues/25349

[mrcl3an]

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]

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

[rendongsc]

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]

I have the same problem, are there any solutions?

[DMezhenskyi]

expo 35.0.0 (bare workflow) - the same issue

[Nnoerregaard]

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]

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

[yash-atreya]

@Swaagie @dmargu @adam-s I've just published @react-native-community/[email protected] 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/[email protected]
Invariant Violation: requireNativeComponent: "RNDateTimePicker" was not found in the UIManager

[redBaron23]

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]

Any solutions for this?

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

[SallarBhutto]

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]

Yeah, adding RNDateTimePicker to the Podfile or using an autolink mechanism from react-native should solve this problem. Also, I've just merged https://github.com/expo/expo/pull/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]

Same error, on React-native 0.60.5.

Only in iOS.

The podfile hotfix does't works here.

[joelrorseth]

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]

@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]

Doesn't work

[leecommamichael]

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]

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]

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]

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]

ANY SOLUTION??

[DanielWahl]

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

[vonovak]

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.