Functions in StyleSheet.create({}) won't refresh on setState()

Viewed 34

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.

0 Answers
Related