how re-render component and why does onWeekChanged work when i click on day

[Alperen]

hi, i want to re-render calendar-strip when i change language of my app, but i failed. How do I re-render the calendar-strip when the app language changes? also how do I make onWeeksChanged work only when I click the right and left week buttons? I'm sorry for my bad english ?

import {observer} from 'mobx-react-lite';
import * as React from 'react';
import {View} from 'react-native';
import CalendarStrip from 'react-native-calendar-strip';
import {useStores} from '../../models';
import Icon from '@expo/vector-icons/EvilIcons';
import AppStore from '../../services/stores/AppStore';
import remoteConfig from '@react-native-firebase/remote-config';
import {toJS} from 'mobx';
import {color} from '../../theme';
import {useState} from 'react';
import moment from 'moment';

interface CalendarComponentProps {
  handleLessons: any;
}

const CalendarComponent = observer((props: CalendarComponentProps) => {
  const [calendarStartDay, setCalendarStartDay] = useState<any>();
  const {
    TimeTableStore: {fetchTimeTable, getSelectedDate, setSelectedDate, list},
  } = useStores();
  return (
    <CalendarStrip
      locale={{
        name: AppStore.activeLanguage,
        config: moment().locale(AppStore.activeLanguage).localeData(),
      }}
      selectedDate={getSelectedDate()}
      onWeekChanged={(start, end) => {
        if (calendarStartDay != moment(start).format('D')) {
          setCalendarStartDay(moment(start).format('D'));
          setSelectedDate(new Date(moment(start).toString()));
          fetchTimeTable(
            remoteConfig().getValue('year').asNumber(),
            remoteConfig().getValue('period').asNumber(),
            new Date(moment(start).format('YYYY,M,D')).toUTCString(),
            new Date(moment(end).format('YYYY,M,D')).toUTCString(),
          ).then(() => {
            let allLessons = toJS(list);
            let lessonsArray: any = [];
            allLessons.map((data: any) => {
              const day = moment(data.Baslangic).format('D');
              if (moment(start).format('D') == day) {
                lessonsArray.push(data);
              }
            });
            props.handleLessons(lessonsArray);
          });
        }
      }}
      scrollable={false}
      onDateSelected={async date => {
        setSelectedDate(new Date(moment(date).toString()));
        let allLessons = toJS(list);
        let lessonsArray: any = [];
        allLessons.map((data: any) => {
          const day = moment(data.Baslangic).format('D');
          if (moment(date).format('D') == day) {
            lessonsArray.push(data);
          }
        });
        props.handleLessons(lessonsArray);
      }}
      calendarAnimation={{type: 'sequence', duration: 30}}
      daySelectionAnimation={{
        type: 'border',
        duration: 200,
        borderWidth: 1,
        borderHighlightColor: color.second,
      }}
      style={{
        backgroundColor: color.transparent,
        height: 90,
      }}
      calendarHeaderStyle={{
        color: color.white,
        fontSize: 20,
        textTransform: 'uppercase',
        margin: 0,
        padding: 0,
      }}
      calendarColor={color.white}
      dateNumberStyle={{color: color.white}}
      dateNameStyle={{color: color.white}}
      highlightDateNumberStyle={{color: color.white}}
      highlightDateNameStyle={{color: color.white}}
      iconLeftStyle={{opacity: 0}}
      iconStyle={{color: 'red'}}
      leftSelector={
        <View style={{width: 18}}>
          <Icon
            name="chevron-left"
            size={60}
            color={color.white}
            style={{marginLeft: -20}}
          />
        </View>
      }
      rightSelector={
        <View style={{width: 18}}>
          <Icon
            name="chevron-right"
            size={60}
            color={color.white}
            style={{marginLeft: -24}}
          />
        </View>
      }
    />
  );
});

export default CalendarComponent;

[Taha Zalzali]

same problem

[Swaroop]

I am not sure about re-render. Does it not automatically happen when the state changes?

On the second question about onWeekChanged being called, I can't seem to reproduce it.

I have the following strip:

                <CalendarStrip
                    scrollable={true}
                    startingDate={props.calendarStartDay}
                    selectedDate={props.calendarStartDay}
                    showMonth={false}
                    showDayName={false}
                    rightSelector={[]}
                    leftSelector={[]}
                    onWeekChanged={(start, end) => console.log(start, end)}
                    customDatesStyles={(date) => {
                        if (isDateSuccess(props.habitId, date)) {
                            return {
                                dateNameStyle: { color: 'blue' },
                                dateNumberStyle: { color: 'white' },
                                dateContainerStyle: { backgroundColor: 'green' },
                            }
                        }
                        return {};
                    }}
                    onDateSelected={(date) => updateHabitData(props.habitId, date)}
                // datesWhitelist={(date) => date.isBefore(today)} // TODO: UTC offset
                />

As you can see, I am printing a log if the week changes. That is not printed when I select a date. If I click on the Week shifters (left, right arrows in your case), only thne the log is printed.