vitalets / react-native-extended-stylesheet

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

Multiple rem decimal values cause a crash on Android #124

Closed castrolem closed 4 years ago

castrolem commented 4 years ago

Steps to Reproduce

  1. We are calculating our sizing on rems using a custom function that might return multiple decimals depending on the value.
  2. This function in a simplified way looks something like number / unit === remAmountWeWantToUse. For example a test of it results into expect(customFn(12.5, 16)).toEqual('0.78125rem');
  3. Using this value in a EStylesheet.create({awesomeText: {lineHeight: '1.75432rem'}}) results in crashes on some Android devices. (We can reproduce it with Android simulators)

Try in Expo

https://snack.expo.io/Bk9z8rF3S

Expected Behavior

Text lineHeight gets reproduced to the nearest pixel no matter what.

Actual Behavior

App crashes on some devices, (seems not dependant on device screen resolution)

Show the code

const fonts = {
  200: {
    fontFamily: 'System',
    fontSize: '0.752345rem',
    fontWeight: 'normal',
    lineHeight: '1.7812512345rem',
  }
}

export const styles = EStylesheet.create({
  input: {
    ...fonts['200'],
    maxHeight: '2.421052631578947rem',
  }
})

Sometimes we have seen a warning like

Warning: Failed prop type: Invalid prop `lineHeight` of type `string` supplied to `Text`, expected `number`.
Bad object: {
  "fontFamily": "Cerebri-Sans-Regular",
  "fontSize": 12,
  "fontWeight": "normal",
  "lineHeight": "16.625rem",
  "color": "#000000",
  "marginBottom": 4,
}

Using the EStylesheet.create.

Environment

React Native Environment Info:
    System:
      OS: macOS 10.15.1
      CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
      Memory: 487.25 MB / 16.00 GB
      Shell: 5.0.11 - /usr/local/bin/bash
    Binaries:
      Node: 12.8.0 - ~/.nvm/versions/node/v12.8.0/bin/node
      Yarn: 1.19.2 - /usr/local/bin/yarn
      npm: 6.13.1 - ~/.nvm/versions/node/v12.8.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.5900203
      Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz => 0.59.8
castrolem commented 4 years ago

I'm going to close this issue, seems like a very narrow use case tbh and by decreasing the amount of numbers, we haven't seen any other crash. 👍