I am trying to create a weekly calendar and has a select date when you tap on the date I want to animate the color change with the help of react native reanimated:3.0.2
Here is my code
const [selectedDate, setSelectedDate] = useState<Date>(startOfWeek(new Date(), { weekStartsOn: 1 })) const [week, setWeek] = useState<Date[]>(countWeekDays(startOfWeek(new Date(), { weekStartsOn: 1 }))) const progress = useDerivedValue(() => { const getIndex = week.findIndex(a => isEqual(a, selectedDate)) return withTiming(getIndex !== -1 ? 1 : 0); }); const rStyle = useAnimatedStyle(() => { const backgroundColor = interpolateColor( progress.value, [0, 1], [Config.Theme.COLOR_WHITE, Config.Theme.COLOR_F00A6A] ); return { backgroundColor, }; });// render Iteration const renderDay = (item: Date) => { const isSame = isEqual(selectedDate, item) return (<View key={item.toString()}><Text style={styles.dayText}>{weekDays[item.getDay()]}</Text><TouchableOpacity onPress={() => setSelectedDate(() => item)}><Reanimated.View style={[ styles.dateContainer, rStyle, // isSame && { backgroundColor: Config.Theme.COLOR_F00A6A }, ]}><Text style={[ styles.date, isSame && { color: Config.Theme.COLOR_WHITE }, ]}>{item.getDate()}</Text></Reanimated.View></TouchableOpacity></View>) }const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
Thanks in advance