🤖
React Native Calendarsでダークモードに対応する
React Native ユーザーでカレンダーを実装する時に必ず候補の一択に上がってくるであろう
react-native-calendars
動的にダークモードの切り替えを行えるように機能追加していたところ、カレンダーだけ動的にダークモードの切り替えができない現象があったので、対応方法をまとめました。
結論
keyをセットすることで解決しました。
return (
<Calendar
key={theme} // ← ここ
markingType={'multi-dot'}
onDayPress={day => onDayPress(day)}
oPressArrowLeft={(subtractMonth, value) => onPressArrowLeft(subtractMonth, value)}
onPressArrowRight={(addMonth, value) => onPressArrowRight(addMonth, value)}
theme={theme === 1 ? darkTheme : defaultTheme}
enableSwipeMonths={true}
/>
);
公式の見解ではありませんが、これで再レンダリングされて動的にダークモードが適用されます。
参考
Discussion