React Native - Invariant Violation "RNDateTimePicker"

Question

I'm trying to use the React Native DateTimePicker library in my app and I get the following error when I attempt to pick a date:

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

Anyone else experiences this error? I have gone through other posts like the following but still can't seem to figure it out. Git repo

I am using expo - which may not be compatible with this library. If not, does anyone else have any other recommendations for a date/time library?

---

I also tried linking, but to no prevail

Greengage

RNDateTimePicker is a react-native native module and it requires linking so you cannot use it with expo. – Goldarn

I'm getting the same error: github.com/react-native-community/react-native-datetimepicker/… as well as this person: github.com/react-native-community/react-native-datetimepicker/…. I'm not using Expo, but 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. – Cassowary

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 – Cassowary

@Pratap Sharma any suggestions of a similar library that would work with expo? – Greengage

@Cassowary let me know if you are able to figure it out. I've been stuck on this for ~ 2 days. – Greengage

Same, I've been stuck on it for 3 days and I have tried so many different things and options. I'm on @react-native-community/datetimepicker 2.1.0 and not using expo. The library that I made with it works on the simulator, but idk why the error occurs when I install the npm library I made with it. Here's my library if you want to see if anything differs in the podfile, package.json, or etc. github.com/jefelewis/react-native-ultimate-modal-picker – Cassowary

@Greengage To install this API in a managed or bare React Native app, run expo install @react-native-community/datetimepicker Try this. Link is herehttps://docs.expo.io/versions/latest/sdk/date-time-picker/ – Goldarn

Answer 1

You cannot use react-native-dateTimepicker because it requires manual linking of native code. So its not possible with expo. You can use the expo date time picker which is exclusively made for expo : Check this out expo-picker . Hope it helps.

Anyplace

it looks like the link you sent just leads me back to the react native datetime-picker library when I try to look up documentation.... – Greengage

No to install it you have to do ``` expo install @react-native-community/datetime picker ``` instead of npm i – Anyplace

@GauravRoy are you sure about this? I just installed latest (6.*) yarn add @react-native-community/datetimepicker and it seems to work just fine. Besides @Greengage is right it's the same package, expo just bundles version they've tested is compatible with that particular expo SDK version. I must also note that I first installed it with expo, and then just pumped the version with yarn directly. From some hints in repo it seem there may be some autolinking now built-in? – Wineshop

it resolved my issue. So instead of yarn add @react-native-community/datetimepicker do npx expo install @react-native-community/datetimepicker which install an expo specific library. Thanks – Pointblank

Answer 2

After library install. Do pod install

Inglenook

Answer 3

Re-build your app by running

npx react-native run-ios

Bluebell

Answer 4

If you are not on Expo then

Update XCode.

Since version 3.0, RNDateTimePicker requires XCode 11.6 to build.

you need XCode 11.6 to build this version, and you need this version to properly support iOS 14 (for that you need XCode 12)

From: https://github.com/react-native-community/datetimepicker/releases/tag/v3.0.0

Cambria

Answer 5

******* it occurs in RN > .6 *******

first, run

npm i @react-native-community/datetimepicker: 2.1.0

it works correctly

after, run

npm i @react-native-community/datetimepicker

to get the last version

it works correctly again, without any issue

good luck

Burlie

Answer 6

I've ran into this issue when switching from expo go to using the development build. What fixed the issue:

1. go into the expo dir and run npx expo install @react-native-community/datetimepicker
2. delete any previously created ios bundle folder
3. rebuild this folder (development build), e.g. yarn ios

I believe I fell into this case (see Expo users notice"):

Expo SDK in the Managed Workflow may not contain the latest version of the module and therefore, the newest features and bugfixes may not be available in Expo Managed Workflow. If you use the Managed Workflow, use the command expo install @react-native-community/datetimepicker (not yarn or npm) to install this module - Expo will automatically install the latest version compatible with your Expo SDK (which may not be the latest version of the module available).

Ovine

Answer 7

I faced with this glitch a few times.

RN: 0.68, node: 18.19.0, pod: 1.15.0

Sometimes after manipulation (upgrading) some libs in package.json react-native-date-picker disappears from node_modules (don't ask me why). IDE shows that it exists but it's not true (you can check node_modules).

Both times I just ran a few simple commands:

1. npm uninstall react-native-date-picker --save
2. npm install react-native-date-picker --save
3. cd ios && pod install
4. And voila! Green line "Installing react-native-date-picker (4.2.5)" appeared in output.

Have a fun with RN!

PS: with node 14 I have never seen this bug. I thing that it's related to node version.

Certification

Answer 8

I had this exact same issue with an EXPO EAS Build project. I was trying everything from removing node modules, ios, android folders, reinstalling everything, running prebuild with the clean flag. Nothing was working.

It is important to note that I was starting my project with npx expo start then pressing i to run on iOS Simulator or a for Android Emulator. That is when I got the error.

The fix was simply to use npx expo run:ios instead. That got it working for me.

Zenia