GeekyAnts / GeekyAnts/NativeBase

Issue with Resize- observer (Resizing the browser)

Open
#5,034 2 comments 0 reactions 0 assignees View on GitHub
bug triage v3
Dominant language
TypeScript
Stars
20.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

### Description

Does anyone ever have issues with Resize Observer when re-sizing the browser? It seems to lag pretty heavily on most pages - even the nativebase docs lag on resize. I assume that's some hard requirement from react native web?

### CodeSandbox/Snack link

nativebase.io

### Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

### NativeBase Version

3.4.5

### Platform

- [ ] Android
- [X] CRA
- [X] Expo
- [ ] iOS
- [X] Next

### Other Platform

_No response_

### Additional Information

If you turn on the component profiler and highlight any component renders - you can see it render multiple times during a window re-size, and you can notice that the layout jumps a few times (presumably when the resize observer fires). It's pretty stark compared to a page scaled with pure css (which scales smoothly). I recognize the use of resize observer is probably necessary - and we're not goign to achieve smooth resize (not that that matters) - but on a sufficiently component dense page, this resize if you go from like, a small to large screen - can take literal seconds, which is a bit whiffy.

I wasn't sure if this was just due to react native web - or if nativebase had dome something intentional with resize observer.
I'm seeing it mainly on a page with some data orchestration - so maybe the resize observer is just spamming that given how it's re-rendering things and perhaps I can improve this with dilligent memoization - just wasn't an issue I had even considered until running into it.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the lag at nativebase.io while resizing the browser, using the component profiler to observe repeated renders and layout jumps. Compare the Resize Observer behavior with the page's data orchestration and memoization, then establish whether the issue is in NativeBase, React Native Web, or the application; done means a reproducible cause and a clearly scoped fix.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, performance, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.