GeekyAnts / GeekyAnts/NativeBase
Breakpoints doesn't work like they are supposed to
- Dominant language
- TypeScript
- Stars
- 20.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
When the breakpoints are customised and with the use of useBreakpointValue hook, I returned some values. When they are working as expected for some of the breakpoints, some fail. Breakpoint md is customised to be 789 and lg is 1680. Ideally, whenever we stay on a screen of width ranging from 789 to 1679, the breakpoint value should be categorised as 'md', but it is coming out as 'xl'. After 1680, it comes out as 'lg' which is expected. This is happening in versions after 3.2.2 i.e., from 3.3.0 onwards. When I downgrade to 3.2.2, it is working as expected.
### CodeSandbox/Snack link
https://snack.expo.dev/@djneelam/breakpoints-issue
### Steps to reproduce
1. Go to provided snack link
2. Open the web preview in a seperate window
3. Right click and inspect to see the dev tools
4. Try adjusting the resolution between 1536 and 1679.
5. You will notice the breakpoint is coming as 'xl' where it's supposed to be 'md' between 789 and 1679.
### NativeBase Version
3.4.15
### Platform
- [ ] Android
- [ ] CRA
- [X] Expo
- [ ] iOS
- [ ] Next
### Other Platform
Web
### Additional Information
I thought of down grading to 3.2.2 from 3.4.15 just for this, but there were lot of issues fixed in latest versions like double clicking Right/Left Input elements to make it functional etc.,
Contributor guide
Research direction
Start with the provided Snack and the useBreakpointValue hook, reproducing the issue at 1536–1679px with NativeBase 3.4.15. Compare its result with version 3.2.2 and verify that a customized md breakpoint covers 789–1679px while lg begins at 1680px.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100