how can I dynamically change locale via i18n

[onethps]

How can I dynamically change locale via i18n?
The locale only changes when i restart application

import moment from 'moment';
import 'moment/locale/cs';
import 'moment/locale/de';
import 'moment/locale/es';
import 'moment/locale/pt';
import 'moment/locale/uk';
import React, { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import CalendarStrip from 'react-native-calendar-strip';


import { COLORS } from '@app/theme/constants/COLORS';

import { styles } from './styles';

export function LinearCalendar(props) {
  const {
    markedDates,
    onDateSelected,
    selectedDate,
    datesBlacklist,
    showMarketDates,
    hideArrows,
    ...rest
  } = props;

  const { t, i18n } = useTranslation();
  moment.locale(i18n.language);

  const markedDatesArray = showMarketDates ? getMarkedByOrderDates(markedDates) : null;

  return (
    <CalendarStrip
      selectedDate={selectedDate ?? {}}
      // minDate={moment(new Date()).subtract(3, 'days')}
      maxDate={moment(new Date()).add(1, 'y')}
      disabledDateOpacity={1}
      onDateSelected={onDateSelected}
      customDatesStyles={customDatesStyles}
      datesBlacklist={datesBlacklist}
      scrollable
      markedDates={markedDatesArray}
      dateNameStyle={styles.dateNameStyle}
      dateNumberStyle={styles.dateNumberStyle}
      highlightDateNameStyle={styles.highlightDateNameStyle}
      highlightDateNumberStyle={styles.highlightDateNumberStyle}
      highlightDateContainerStyle={styles.highlightDateContainerStyle}
      disabledDateNameStyle={styles.disabledDateNameStyle}
      iconStyle={styles.iconStyle}
      disabledDateNumberStyle={styles.disabledDateNumberStyle}
      iconContainer={styles.iconContainer}
      calendarHeaderStyle={styles.calendarHeaderStyle}
      style={styles.style}
      calendarColor="transparent"
      dayComponentHeight={100}
      maxDayComponentSize={200}
      // default names
      {...rest}
    />
  );
}

[anniewey]

faced same issue, the component doenst rerender when language changes. did a simple state change to test but the language didn't get updated. need to remount the component.

hence, did a patch-package to add locale check to componentDidUpdate

test code:

const CALENDAR_LOCALE = {
  en: {
    name: 'en',
    config: {
      weekdaysShort: 'S_M_T_W_T_F_S'.split('_'),
    },
  },
  id: {
    name: 'id',
    config: {
      weekdaysShort: 'M_S_S_R_K_J_S'.split('_'),
    },
  }
};

<TouchableOpacity onPress={() => setTest(!isTest)}>
   <Text>{'Test locale'}</Text>
</TouchableOpacity>

<CalendarStrip
...
locale={isTest ? CALENDAR_LOCALE.en : CALENDAR_LOCALE.id}
/>

patch file:

diff --git a/node_modules/react-native-calendar-strip/src/CalendarStrip.js b/node_modules/react-native-calendar-strip/src/CalendarStrip.js
index fe4d62d..0406aef 100644
--- a/node_modules/react-native-calendar-strip/src/CalendarStrip.js
+++ b/node_modules/react-native-calendar-strip/src/CalendarStrip.js
@@ -166,7 +166,9 @@ class CalendarStrip extends Component {
         prevProps.datesBlacklist !== this.props.datesBlacklist ||
         prevProps.datesWhitelist !== this.props.datesWhitelist ||
         prevProps.markedDates  !== this.props.markedDates  ||
-        prevProps.customDatesStyles !== this.props.customDatesStyles )
+        prevProps.customDatesStyles !== this.props.customDatesStyles || 
+        prevProps.locale !== this.props.locale)
+
     {
       // Protect against undefined startingDate prop
       let _startingDate = this.props.startingDate || this.state.startingDate;