GeekyAnts / GeekyAnts/NativeBase

Breakpoints doesn't work like they are supposed to

Open
#5,367 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

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.