I'm using react-native-shadow-2 but it's weirdly slow when switching to screen ?

[sindarovcoder]

My code: <View style={{ justifyContent: "space-between", flexDirection: "row", gap: 6 }}> {lngs.map((item) => ( <Shadow key={item.value}> <Pressable style={[styles.selectButton, i18n.resolvedLanguage == item?.value && { borderColor: MAIN_COLOR_2 }]} onPress={() => changeLanguage(item?.value)}> <View style={{ flexDirection: "row", alignItems: "center", gap: 40 }}> <Text style={{ fontSize: 25, fontFamily: "TwemojiMozilla" }}>{item.flag}</Text> <Fontisto name="radio-btn-active" size={18} color={i18n.resolvedLanguage == item?.value ? MAIN_COLOR_2 : "transparent"} /> </View> <Text style={{ fontSize: 16 }}>{item?.title}</Text> </Pressable> </Shadow> ))} </View>

work without react-native-shadow-2: Screencast from 2024-04-24 12-32-56.webm

Working with react-native-shadow-2: Screencast from 2024-04-24 12-32-06.webm

[sindarovcoder]

Thanks in advance for the reply

[ftzi]

Try to wrap your Shadow component and content with React.memo/useMemo.

Maybe the transition is causing a re-render of the shadow for every animation frame, which is costly.

By using the memo, the component won't be calculated again if the dependencies don't change.