onDateSelected not work with Hook correctly.

[dqhuy153]

The problem's not about Date return, it about a Selected day style. When I use hook inside "onDateSelected" prop, the selected day style in "daySelectionAnimation" prop is dissapear.

const [taskList, setTaskList] = useState(tasks);

const onDateSelected = (date) => { setTaskList( taskList.filter( (item) => moment(item.date).format("DD/MM/YYYY") === moment(date).format("DD/MM/YYYY") ) ); };

<CalendarStrip ... onDateSelected={onDateSelected} ... />

[peacechen]

Are you setting selected day styles using the highlightDate*Style props? Please include your entire CalendarStrip snippet, and preferably a sample project that recreates it. You can use the sample project in this repo as a base.

[dqhuy153]

Yes, I did setting selected day styles using the highlightDate*Style props. When I not pass a Hook inside onDateSelected, everything works fine (selected day changes the background), but it doesn't work when Hook comes up.

<CalendarStrip

                calendarColor={colors.white}
                calendarHeaderStyle={{
                    color: colors.black,
                    fontSize: 23,
                    alignSelf: "flex-start",
                    paddingBottom: 50,
                }}
                customDatesStyles={() => {
                    return {
                        dateContainerStyle: {
                            height: 53,
                            width: 52,
                            borderRadius: 10,
                            backgroundColor: colors.white,
                            paddingTop: 5,
                        },
                    };
                }}
                daySelectionAnimation={{
                    type: "background",
                    duration: 500,
                    highlightColor: colors.primary,
                }}
                dateNumberStyle={{ color: colors.medium, fontSize: 25 }}
                dateNameStyle={{ color: colors.medium, fontSize: 12 }}
                highlightDateNumberStyle={{
                    color: colors.white,
                    fontSize: 20,
                }}
                highlightDateNameStyle={{
                    color: colors.primary,
                    fontSize: 11,
                }}
                iconContainer={{ flex: 0.05 }}
                innerStyle={{ flex: 0.6 }}
                onDateSelected={onDateSelected}
                onHeaderSelected={() =>
                    calendarStrip.current.setSelectedDate(Date.now())
                }
                numDaysInWeek={5}
                markedDates={[
                    {
                        date: Date.now(),
                        lines: [
                            {
                                color: colors.primary,
                                selectedColor: colors.primary,
                            },
                        ],
                    },
                ]}
                ref={calendarStrip}
                scrollable
                scrollToOnSetSelectedDate
                style={styles.calendarContainer}
            />

[dqhuy153]

I just solve this problem. It's my mistake, I have to do one more step to style the selected day: add selectedDay={selectedDay} props with a [selectedDay, setSelectedDay] = useState(Date).