search

th3rdwave / react-native-safe-area-context

A flexible way to handle safe area insets in JS. Also works on Android and Web!
MIT License
2.14k stars 197 forks source link

Refactor style prop in SafeAreaContext component to avoid unnecessary… #431

Closed zxcodes closed 1 year ago

zxcodes commented 1 year ago

… re-renders.

In the SafeAreaContext.tsx component, the style prop was passed using array syntax, which created a new array on each render and caused unnecessary re-renders.

To improve performance, the style prop has been refactored to use the spread syntax, which merges the component's default styles with the passed styles object more efficiently. This change ensures that the SafeAreaContext component maintains its appearance and behavior while reducing the chance of unnecessary re-renders. The new syntax is style={{...styles.fill, ...style}}.

Summary

Test Plan

jacobp100 commented 1 year ago

We incidentally have a PR that's doing a similar thing

https://github.com/th3rdwave/react-native-safe-area-context/pull/427/files#diff-7798046c2c2d997663d18e875691ec66f4657a5e2467201b1d76ae1b530a0073R93

This avoids creating an array in the case you don't pass in a style. Since this PR also has some other optimisations, we'll go in that direction

Thanks for the PR anyway 😊