I was adapting my React Native app to foldable devices and found functions used in StyleSheet.create({}) won't recalculate on setState().
// version 1
<IMImage
style={{
width: scaleSize(44),
height: scaleSize(44),
borderRadius: scaleSize(22)
}}
source={{ uri: avatarUrl }}
/>
// version 2
<IMImage
style={styles.itemViewOneImage}
source={{ uri: avatarUrl }}
/>
const styles = StyleSheet.create({
itemViewOneImage: {
width: scaleSize(44),
height: scaleSize(44),
borderRadius: scaleSize(22)
}
});
export let kScreenWidth = Dimensions.get("window").width
export function scaleSize(size, designWidth = 375) {
return size * kScreenWidth / 375
}
I registered a listener to monitor screen size changes, kScreenWidth will change accordingly. But function scaleSize(width) in Component version 2 won't give new results on screen dimension changes. Version 1 give the correct result though. I'm not sure what's the difference between these 2 versions. Any help is appreciated.