vitalets / react-native-extended-stylesheet

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

Parsing fails for Text shadowOffset #99

Closed joelgetaction closed 5 years ago

joelgetaction commented 6 years ago

Steps to Reproduce

Have some style variables set like:

$shadowOffsetHeight: 30,
$shadowOffsetWidth: 20,
...

then use them in a stylesheet:

const styles = EStyleSheet.create({
  title: {
    shadowOffset: {
      height: "$shadowOffsetHeight",
      width: "$shadowOffsetWidth",
  }
});

This fails with Invalid prop 'shadowOffset.width' of type 'string' supplied to 'StyleSheet title', expected 'number'. So EStyleSheet doesn't seem to be parsing nested properties like shadowOffset.

Any ideas how to do this properly without resorting to hacks like defining const values or using EStyleSheet.value in render? It would be ideal to keep everything in the definition of styles rather than having to break it out ...

Try in Expo

Expected Behavior

shadowOffset should work like any other prop.

Actual Behavior

shadowOffset cannor parse EStyleSheet variables.

Show the code

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
      Memory: 72.77 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.4.0 - ~/.nvm/versions/node/v8.4.0/bin/node
      Yarn: 1.6.0 - /usr/local/bin/yarn
      npm: 4.6.1 - ~/.nvm/versions/node/v8.4.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.4.1 => 16.4.1
      react-native: 0.56.1 => 0.56.1
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1

Version of react-native-extended-stylesheet is 0.10.0.

vitalets commented 6 years ago

Hi @joelgetaction! I will check.