Search code examples
reactjsreact-nativeexpodatetimepicker

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>
);
}

Solution

  • 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).