CODEWITHSUNDEEP
reactjsreact-nativeexpodatetimepicker
CodingProfile
CodingProfile

Reputation: 189

Change language for DateTimePicker using React-Native-Expo

Is it possible to change the language of the DateTimePicker calendar based on the language selected in the application using i18n? Currently, the language only changes when the device's language is changed. However, changing the language within the application does not have any effect. While i18n works well for other parts of the application. I am using this library- https://github.com/react-native-datetimepicker/datetimepicker

export function DateTimePicker() {
const [isPickerShow, setIsPickerShow] = React.useState(false);

const showPicker = () => {
    setIsPickerShow(true);
};

}
const { i18n } = useTranslation();
return (
    <Pressable
        onPress={showPicker}
    >
        <View>
        {isPickerShow && (
            <DateTimePicker
                mode={"date"}
                display="default"
                locale={i18n.language}  //Here adding the locale but nothing changes
            />
         </View>
        )}
    </Pressable>
);
}

Upvotes: 0

Views: 2153

Answers (2)

Il&#234; Caian
Il&#234; Caian

Reputation: 645

The official documentation has a complete section about Localization.

The doc describes that the system will control the Android and links to official documentation about how to change it for your app.

About iOS, the same doc informs about one prop that only exists in iOS called locale but its usage is discouraged. You can set up things at your XCode project (the doc suggests reading this article), and if you are using Expo (as you described at your question) you could check this expo doc (also mentioned at the Library documentation).

Upvotes: 1

red
red

Reputation: 1619

Locale prop only work in IOS, as documentation say. If in IOS the language not change maybe i18n.language is a two character string, locale props need a 5 characters string like "en-US, en-UK" and so on...

Try something like:

locale={i18n.language === 'es' ? 'es-US' :  i18n.language === 'it' ? 'it-IT' : 'en-US' }

Upvotes: 0

Related Questions