onWeekChanged keeps getting called infinitely render

[vishalparmar22091989]

      <CalendarStrip
        scrollable={false}
        style={{
          height: Platform.OS === 'ios' ? vh(120) : vh(150),
          width: '100%',
          paddingTop: vh(15),
        }}
        maxDate={signedUpUser?.subcriptionData?.subscriptionEndDate}
        minDate={signedUpUser?.subcriptionData?.subscriptionStartDate}
        //  minDate={state.firstDate}
        //@ts-ignore
        datesBlacklist={[
          moment(),
          {
            start: (state.firstDate),
            end: (signedUpUser?.subcriptionData?.subscriptionStartDate - 24 * 60 * 60 * 1000),
          }
        ]}
        dateNameStyle={[styles.dateText, { fontSize: vw(14) }]}
        //showMonth={false}
        disabledDateOpacity={0.6}
        disabledDateNameStyle={[styles.dateText, { fontSize: vw(14) }]}
        disabledDateNumberStyle={[styles.dateText, { fontSize: vw(14) }]}
        calendarHeaderContainerStyle={{ flexDirection: 'row', paddingLeft: vw(20) }}
        highlightDateNameStyle={[styles.dateText, { fontSize: vw(14) }]}
        highlightDateNumberStyle={[styles.dateText, { fontSize: vw(14) }]}
        calendarColor={constants.colors.transparent}
        calendarHeaderStyle={styles.dateText}
        dateNumberStyle={styles.dateText}
        iconLeftStyle={{ height: vh(20), width: vw(22), tintColor: constants.colors.white, }}
        iconRightStyle={{ height: vh(20), width: vw(22), tintColor: constants.colors.white }}
        dayComponentHeight={Platform.OS === 'ios' ? vh(60) : vh(70)}
        maxDayComponentSize={Platform.OS === 'ios' ? vh(45) : vh(60)}
        selectedDate={signedUpUser?.subcriptionData?.subscriptionStartDate}
        //  onDateSelected={(date: any) => handleDayPress(date)}
        onWeekChanged={(s, e) => handleWeekChange(s, e)}
      />

[CVRamana]

hi, u can use memoized Component for CalenderStrip like this:-

import * as React from 'react'; import { Text, View, StyleSheet, Platform, } from 'react-native'; import CalendarStrip from 'react-native-calendar-strip'; import moment from 'moment'; import constants from '../constants'; import { vh, vw } from '../constants/Dimensions';

interface CustomCalenderStripProps { _maxDate: any _minDate: any

_end: any
_selectedDate: any
_firstDate: any;
handleWeekChange: any

}

const CustomCalenderStrip = (props: CustomCalenderStripProps) => { return ( <CalendarStrip scrollable={false}

        style={{
            height: Platform.OS === 'ios' ? vh(120) : vh(150),
            width: '100%',
            paddingTop: vh(15),
        }}
        maxDate={props._maxDate}
        minDate={props._minDate}
        //  minDate={state.firstDate}
        //@ts-ignore
        datesBlacklist={[
            moment(),
            {
                start: (props._firstDate),
                //@ts-ignore
                end: (props._end ),
            }
        ]}
        dateNameStyle={[styles.dateText, { fontSize: vw(14) }]}
        //showMonth={false}
        disabledDateOpacity={0.6}
        disabledDateNameStyle={[styles.dateText, { fontSize: vw(14) }]}
        disabledDateNumberStyle={[styles.dateText, { fontSize: vw(14) }]}
        calendarHeaderContainerStyle={{ flexDirection: 'row', paddingLeft: vw(20) }}
        highlightDateNameStyle={[styles.dateText, { fontSize: vw(14) }]}
        highlightDateNumberStyle={[styles.dateText, { fontSize: vw(14) }]}
        calendarColor={constants.colors.transparent}
        calendarHeaderStyle={styles.dateText}
        dateNumberStyle={styles.dateText}
        iconLeftStyle={{ height: vh(20), width: vw(22), tintColor: constants.colors.white, }}
        iconRightStyle={{ height: vh(20), width: vw(22), tintColor: constants.colors.white }}
        dayComponentHeight={Platform.OS === 'ios' ? vh(60) : vh(70)}
        maxDayComponentSize={Platform.OS === 'ios' ? vh(45) : vh(60)}
        selectedDate={props._selectedDate}
        //  onDateSelected={(date: any) =>handleWeekChange(date)}
        onWeekChanged={props.handleWeekChange}
    />
);

};

export default React.memo(CustomCalenderStrip);

const styles = StyleSheet.create({

dateText: {
    fontFamily: constants.fonts.POPPINS_MEDIUM,
    fontSize: vw(16),
    fontWeight: "500",
    fontStyle: "normal",

    letterSpacing: 0,
    textAlign: "center",
    color: constants.colors.white
},

});