Breakpoints doesn't work like they are supposed to

[dheerajneelam-sigfyn]

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.,

[AshwiniKumar007]

Hey @dheerajneelam-sigfyn, Thanks for reporting this. We will check this and let you know.

[dheerajneelam-sigfyn]

I found a workaround until it gets fixed. You basically have to define all of the breakpoints, so that they start working accordingly. So, in the customisation of breakpoints, when I add '2xl' : 2440 in the above snack example, they seem to work correctly, otherwise it will show 'xl' from 1536 to 1679. Basically overwriting every possible breakpoint will stop it from overwriting our customised ones, seems like 2xl is actually defined from 1536 in the base theme.