GeekyAnts / GeekyAnts/NativeBase
Issue with Resize- observer (Resizing the browser)
- 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
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