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

Eprince-hub commented 1 year ago

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

https://github.com/web-ridge/react-native-paper-dates/assets/74430629/6e3de0bd-1f86-47ed-ba7b-baefb280008d

What have you tried so far?

tried debugging the issue with no success, did some online searches and found similar issue being reported here https://github.com/web-ridge/react-native-paper-dates/issues/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 commented 1 year ago

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 commented 1 year ago

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

sambbaahh commented 1 year ago

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 commented 1 year ago

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

web-ridge / react-native-paper-dates