fixes #25 : use onLayout instead of one-shot measureInWindow for reliable dimensions in flex layouts - #26
Open
sherucon wants to merge 1 commit into
Open
Conversation
…mensions in flex layouts The Rect component used useLayoutEffect with an empty dependency array and measureInWindow to capture its dimensions. This approach has two problems: 1. It measures exactly once on mount and never re-measures, even if the view's bounds change (e.g. screen rotation, dynamic flex layouts). 2. In flex containers, the initial measureInWindow callback can fire before flexbox has resolved the final dimensions for all siblings. The SVG path is then permanently computed for stale/incorrect dimensions. This is particularly problematic when multiple SquircleView components share a flex row (e.g. two buttons with flex: 1). The narrower button may receive an intermediate width measurement that never updates, causing the squircle background to render at the wrong size — often appearing visually squashed or mismatched compared to its sibling. The fix replaces useLayoutEffect+measureInWindow with React Native's onLayout callback, which fires whenever the view's bounds actually change. A functional setState with an equality check prevents unnecessary re-renders when dimensions haven't changed. This also removes the hard requirement on New Architecture (isSyncLayoutAccessAvailable), since onLayout works on both the old and new architecture.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replace
useLayoutEffect+measureInWindowwithonLayout, which is guaranteed to fire with the correct final dimensions after every layout pass:function Rect({ children, ...rest }: RectProps) { const [rect, setRect] = useState<{ width: number; height: number } | null>(null) - const ref = useRef<View>(null) - - useLayoutEffect(() => { - if (!isSyncLayoutAccessAvailable()) { - throw new Error("This library requires React Native's new architecture.") - } - ref.current?.measureInWindow((_x, _y, width, height) => { - setRect({ width, height }) - }) - }, []) + + const handleLayout = React.useCallback( + (e: { nativeEvent: { layout: { width: number; height: number } } }) => { + const { width, height } = e.nativeEvent.layout + setRect((prev) => { + if (prev && prev.width === width && prev.height === height) { + return prev + } + return { width, height } + }) + }, + [] + ) return ( - <View ref={ref} {...rest}> + <View onLayout={handleLayout} {...rest}> {rect ? children(rect) : null} </View> ) } - -function isSyncLayoutAccessAvailable() { ... }What changed
useLayoutEffect([])+measureInWindow— fires once on mountonLayout— fires on every layout changeisSyncLayoutAccessAvailablecheck)setStatewith equality check avoids unnecessary re-rendersWhat was removed
useRef,useLayoutEffectimports (unused)Platformimport (unused)isSyncLayoutAccessAvailable()function (no longer needed)Note
The
onLayoutapproach also makes the library compatible with the old architecture again, since it doesn't needmeasureInWindowsynchronous access (theisSyncLayoutAccessAvailableguard is removed entirely).