I'm currently working with react-native-calendar-strip, which displays a horizontal/lineal/weekly calendar, whatever you call it, my idea is to click on a specific day and highlight it, but the way this component works, it separates the highlight style and the day style.
const [isToday, setToday] = useState(false)<CalendarStrip useIsoWeekday={false} startingDate={fecha} showMonth={false} calendarHeaderContainerStyle={ styles.calendarHeaderContainerStyle } calendarColor={'#FFFFFF'} style={styles.calendarStripContainer} daySelectionAnimation={{ type: 'background', highlightColor: '#F8F8F8', duration: 300, }} onDateSelected={async (date) => { updateState(date); DataManager.FechaActual = Moment(date).format('YYYY-MM-DD'); await setFechaActual(); }} dateNumberStyle={styles.calendarStripMediumText} dateNameStyle={styles.calendarStripLowText} highlightDateNumberStyle={[ styles.enabledDate, {color: isToday ? '#212B42' : '#8E9CB4'}, ]} highlightDateNameStyle={[ styles.enabledDate, {color: isToday ? '#212B42' : '#8E9CB4'}, ]} disabledDateNameStyle={styles.disabledDate} disabledDateNumberStyle={styles.disabledDate} customDatesStyles={customDatesStylesFunc} disabledDateOpacity={1} leftSelector={[]} rightSelector={[]} iconContainer={{flex: 0.1}} />
my isToday const starts as a false, and whenever i click on a day, it compares the current day with the selected day on momentjs, if the result is true, the hook state will change, and the corresponding highlightDateNumberStyle will display the new style for that day.
the problem is, the hook state is always behind the color change, from what i know, this is due to state async nature, although this part of the code is not working, i have tried like 8 or 9 solutions and i really don't know if this is possible or not.
onDateSelected={async (date) => { updateState(date); DataManager.FechaActual = Moment(date).format('YYYY-MM-DD'); await setFechaActual(); }}
and this is the function i call inside the onDateSelected.
function updateState(date: any) { var hoy = Moment(horaActual).isSame(Moment(date), 'days'); setToday(hoy); }