React native paper dates locale error on bare-bone react native project

[Eprince-hub]

Current behaviour

The react-native-paper-dates throws some errors on a react native project that is created with react-native-cli

The first error is like the one below, but clicking on dismiss reveals more errors that mostly say the same thing but with different key:... values

[react-native-paper-dates] The locale en is not registered, see README!, key: typeInDate

Expected behaviour

Clicking on the activating the DatePickerModal should not throw any error, especially when the exact code example from the documentation is being used

How to reproduce?

Hey, i am providing a reproduction to the error here in the repo
https://github.com/Eprince-hub/react-native-date-picker-error

Steps to reproduce (Couldn't reproduce the problem on snack.expo.dev)

Clone the repo & cd into project

git clone https://github.com/Eprince-hub/react-native-date-picker-error.git && cd react-native-date-picker-error

Install all Dependencies

yarn init-deps

Start & run both ios & android

yarn start-all

Click on pick single date and see the error
There is a total of ten errors, clicking on dismiss will reveal next error

Preview

Video

Screen.Recording.2023-08-11.at.18.37.45.mov

What have you tried so far?

tried debugging the issue with no success, did some online searches and found similar issue being reported here #307 but it was closed unsolved i believe

Your Environment

software	version
ios	16.4
android	13
react-native	0.72.3
react-native-paper	5.9.1
node	18.17.0
npm or yarn	1.22.19
expo sdk	x.x.x

[iM-GeeKy]

Hi @Eprince-hub, I pulled down your project and you're missing the translation registration. This can be resolved by adding

import {DatePickerModal, en, registerTranslation} from 'react-native-paper-dates';

React.useEffect(() => {
  registerTranslation('en', en);
}, []);

to your App.tsx.

This is also found in the documentation here.

[Eprince-hub]

Oh, Thanks a lot, this was my problem.. My Bad!🙏

[samiiku]

Hi @Eprince-hub, I pulled down your project and you're missing the translation registration. This can be resolved by adding

import {DatePickerModal, en, registerTranslation} from 'react-native-paper-dates';

React.useEffect(() => {
  registerTranslation('en', en);
}, []);

to your App.tsx.

This is also found in the documentation here.

Thanks ! :)

[RichardLindhout]

@iM-GeeKy it can be better put outside the render function with no useEffect