BugiDev / react-native-calendar-strip

Easy to use and visually stunning calendar component for React Native.
MIT License
934 stars 325 forks source link

how can I dynamically change locale via i18n #377

Open onethps opened 1 month ago

onethps commented 1 month ago

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