Giters

vitalets / react-native-extended-stylesheet

Extended StyleSheets for React Native

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

App crashes when using percentage styles

LRNZ09 opened this issue · comments

commented

Hi, I'm trying to use the library but it suddenly crash when I use percentage styles.

Please see the snack below (it's the same example given in README):
https://snack.expo.io/@lrnz09/estylesheet-percentage-crash

commented

@LRNZ09 Thanks for reporting! I've fixed it in 0.8.1.
In #32 I didn't consider that case. In math operations percents should be always calculated despite of native support in RN.

commented

I'm on 0.8.1 but it crashes all the same?

commented

@AnthonyLamot could you show Expo link or source code?

commented

@vitalets was following a tutorial (https://github.com/EQuimper/youtubeMeetupAppReactNativeNode) and was making my own version of this file: https://github.com/EQuimper/youtubeMeetupAppReactNativeNode/blob/master/meetupme-mobile/src/screens/home/components/styles/MyMeetupsList.js

I switched back to ESS 0.0.4 cause I saw the guy who created the tutorial was using that one without issue.

commented

I see that expo-sdk-16 from the example uses RN 0.43.2 that does not support percent values natively. The support was added in RN 0.44 and EStyleSheet started to proxy pure percents in #32 since v0.5.0.
Now I understand that moving to native percents was not done properly. Because many developers are using earlier versions of RN <= 0.43 and the change broke backwards compatibility.

Currently I see 3 options:

  1. Check the RN version in runtime and proxy percent values only if version > 0.43. But I did not find the way to detect RN version. And it seems RN developers intentionally do not provide it.
  2. On app start make short runtime check is native percents are supported or not. I need to check will it have any performance issue.
  3. Do nothing, just clarify in docs that using percents with RN <= 0.43 requires EStyleSheet 0.4.0. Because RN already go far from 0.43 and made 10 releases.
commented

Cool. Honestly I'd go with option 3. I'll update my RN version in this project. 😄

commented

Ok! Let me know if it's ok after upgrading RN.

commented

I got it to work with:

  "dependencies": {
    "axios": "^0.17.1",
    "eslint": "^4.17.0",
    "expo": "^25.0.0",
    "react": "16.2.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
    "react-native-extended-stylesheet": "^0.8.0",
    "react-navigation": "^1.0.3"
  },

Hope that helps @vitalets !