vitalets / react-native-extended-stylesheet

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

Math operations not performed on transform prop #130

Closed artsra closed 4 years ago

artsra commented 4 years ago

Steps to Reproduce

Using "version": "0.12.0"

See snack below. Removing the two indicated lines in my_component fixes the vertical transform I think this is a problem here:

style.calcProps() {
    this.extractedProps = utils.excludeKeys(this.processedSource, this.extractedVars);
    this.calculatedProps = calcPlainObject(this.extractedProps, this.varsArr);
  }

function calcPlainObject(obj, varsArr) {
  return Object.keys(obj).reduce((res, prop) => {
    res[prop] = calcStyleValue(prop, obj[prop], varsArr);
    return res;
  }, {});
}

function calcStyleValue(prop, value, varsArr) {
  const isNestedValue = (value && typeof value === 'object' && !Array.isArray(value));
  return  isNestedValue
    ? calcPlainObject(value, varsArr)
    : new Value(value, prop, varsArr).calc();
}

Value.calc() {
    if (typeof this.value === 'function') {
      this.value = this.value();
    }

    if (typeof this.value === 'string') {
      this.calcString();
    } else {
      this.proxyValue();
    }

    if (this.isFinal()) {
      this.applyScale();
    }

    return this.outValue;
  }

At some point the following prop is processed by calcStyleValue:

    transform: [
      { rotate: '270deg' },
      { translateX: '0 - $VERT_LABEL_TEXT_OFFSET' },
      { translateY: '$VERT_LABEL_TEXT_OFFSET' },
    ],

calcStyleValue finds that a new Value().calc() must be performed, but the calc() just proxies the value because it's an array. The new (proxied) value is returned but math operations are not done.

I'm not sure how to fix this, what would be the best solution?

Try in Expo

https://snack.expo.io/@artsr/extended-stylesheet-simple

Expected Behavior

The Math operations were processed correctly

Actual Behavior

They are not processed, and result in errors. See attached image. Ignored on web platform but makes transform stop working.

Show the code

See snack

Environment

command not found: react-native (this is an expo project)

Schermafbeelding 2020-04-14 om 22 08 15
stale[bot] commented 4 years ago

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

ningacoding commented 2 years ago

This issue persists.