nirsky / react-native-size-matters

A lightweight, zero-dependencies, React-Native utility belt for scaling the size of your apps UI across different sized devices.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Using Expo - Size matters is not functional sometimes on refresh and most times when remote debugging is turned on.

BrianBenninger opened this issue · comments

Hi,

Just looking for some info here. I have an app using expo setup with react native size matters and sometimes when the app refreshes it looks like a mess. Almost like size matters is not able to read the screen size of the device so everything set up with it is just broken looking. I can make this happen pretty consistently if I turn on remote debugging and use React Native Debugger.

Has anyone had similar issues? And if so does anyone know why? Or have a solution? At this point we are looking at getting rid of size matters because this would be unacceptable to happen to someone opening a production application from the app store.

Thanks,

Hey @BrianBenninger,

Regarding your statement:

Almost like size matters is not able to read the screen size

size matters is using React Native's Dimensions API, you can see the usage in the scaling-utils.js file.

Stating there's an issue with expo remote debugging + size matters is basically stating there's an issue with expo and the dimensions API.

I suggest logging the values returned from Dimensions.get('window') and see if the logged values make sense or are actually broken.

Fantastic! I will do this and report back. Thank you @nirsky

Seems this is exactly what is happening. I've managed to console log as you suggested and am getting back

fontScale: 1
height: 36
scale: 2
width: 810

When viewing on an iPad. So from what I'm understanding this isn't an issue with react-native-size-matters but actually an issue with the Dimensions module and possibly Expo?

Feel free to close the issue if this is the case. Thank you for your help.

I'm having the same issue. It comes up randomly. I don't think that this library is compatible with Expo.

@nirsky can we submit a PR to add to the README that this library may not work with Expo? I was using it and after getting it setup across 12 screens, the library stopped working in the middle of a demo and has not worked since. I for sure had not changed any code. I think it'd save a lot of people a lot of time to know to look out for this.

Hey @rmdashrfv, I need to do some investigation before declaring this lib is not compatible with Expo.

Is this happening to you on production build or only during development/debugging?
What version of expo are you using?
Might be a specific version bug.
@BrianBenninger - I'd appreciate it if you could share some more details as well.

@nirsky Fair, let me back up. So one thing I've been doing to work around it (so that I can make it to the production build) is I've been doing git checkout to a commit in the past that was last known to work while expo is running -- so this checkout triggers a hot reload, where the app successfully builds, then I git checkout back to HEAD or wherever I'm working, and once the next hot reload is triggered, everything works properly.

It will then work properly up until I restart expo. The next time I start up expo, say, the next day, size matters will not be working at all. I'm using version 0.4.0 of react-native-size-matters and version ^39.0.0 of Expo.

I'll let you know if I track it down better. I've been diffing between the branch and the headless commit, and I haven't seen anything that stands out yet.

Thanks for the details, I'd appreciate it if you can pin it down to the exact change that caused the issue.
Sounds like a really weird and unexpected bug, maybe if we can identify it better we can create an issue to expo, and it will be fixed in the next versions.
It will be a shame if this lib will end up unuseable on expo... 😞

It is with great embarrassment that I return to you, humbly asking you not to commit aggravated assault upon me. When I first found this library, I thought that it had its own special implementation of Dimensions but after reading what you said above, I realized it just uses the built-in tool.

But in the past, when I had started the project, I created the main stylesheet using import { ScaledSheet, Dimensions } from 'react-native-size-matters' and the app didn't complain about it for weeks until I started building my a stack navigator with react-navigation and implementing those styles using the undefined Dimensions I was importing. The confusing part was that when I was testing Dimensions in other places, it was reporting accurately because by then I knew to get Dimensions out of react-native

@rmdashrfv 🤦🏼
Closing this issue.