vitalets / react-native-extended-stylesheet

Extended StyleSheets for React Native
MIT License
2.93k stars 132 forks source link

App crashes when using percentage styles #77

Closed LRNZ09 closed 6 years ago

LRNZ09 commented 6 years ago

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

vitalets commented 6 years ago

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

AnthonyLamot commented 6 years ago

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

vitalets commented 6 years ago

@AnthonyLamot could you show Expo link or source code?

AnthonyLamot commented 6 years ago

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

vitalets commented 6 years ago

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.
AnthonyLamot commented 6 years ago

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

vitalets commented 6 years ago

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

AnthonyLamot commented 6 years ago

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 !

vitalets commented 6 years ago

@AnthonyLamot 👍