Add percentage support to react native

Summary:
Adds support for percentage value in react native.

syntax: property: 100 | property | '100%'

supported properties:
padding
margin
width
height
minWidth
minHeight
maxWidth
maxHeight
flexBasis

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{backgroundColor: 'white', padding: 10, paddingTop: 30, height: '100%'}}>
        <Text>
          If you want to quickly test out something,
          open the Playground.js file and start coding.
        </Text>
        <View style={{backgroundColor: 'red', height: 50, width: 50}}/>
        <View style={{backgroundColor: 'blue', height: '50%', width: '50%'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4376549

fbshipit-source-id: c41d68a7555396f95d063a7527ee081773ac56dc

ReactAndroid/src/main/java/com/facebook/react/flat/FlatARTSurfaceViewShadowNode.java

@@ -24,6 +24,8 @@ import com.facebook.react.common.ReactConstants;
 import com.facebook.react.uimanager.ReactShadowNode;
 import com.facebook.react.uimanager.UIViewOperationQueue;
 import com.facebook.react.views.art.ARTVirtualNode;
+import com.facebook.yoga.YogaValue;
+import com.facebook.yoga.YogaUnit;
 
 /* package */ class FlatARTSurfaceViewShadowNode extends FlatShadowNode
     implements AndroidView, TextureView.SurfaceTextureListener {
@@ -104,13 +106,24 @@ import com.facebook.react.views.art.ARTVirtualNode;
 
   @Override
   public void setPadding(int spacingType, float padding) {
-    if (getStylePadding(spacingType) != padding) {
+    YogaValue current = getStylePadding(spacingType);
+    if (current.unit != YogaUnit.PIXEL || current.value != padding) {
       super.setPadding(spacingType, padding);
       mPaddingChanged = true;
       markUpdated();
     }
   }
 
+  @Override
+  public void setPaddingPercent(int spacingType, float percent) {
+    YogaValue current = getStylePadding(spacingType);
+    if (current.unit != YogaUnit.PERCENT || current.value != percent) {
+      super.setPadding(spacingType, percent);
+      mPaddingChanged = true;
+      markUpdated();
+    }
+  }
+
   @Override
   public void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height) {
     mSurface = new Surface(surface);

ReactAndroid/src/main/java/com/facebook/react/flat/FlatReactModalShadowNode.java

@@ -17,6 +17,8 @@ import android.view.Surface;
 import android.view.WindowManager;
 
 import com.facebook.react.uimanager.ReactShadowNode;
+import com.facebook.yoga.YogaValue;
+import com.facebook.yoga.YogaUnit;
 
 /**
  * FlatReactModalShadowNode
@@ -86,10 +88,21 @@ class FlatReactModalShadowNode extends FlatShadowNode implements AndroidView {
 
   @Override
   public void setPadding(int spacingType, float padding) {
-    if (getStylePadding(spacingType) != padding) {
+    YogaValue current = getStylePadding(spacingType);
+    if (current.unit != YogaUnit.PIXEL || current.value != padding) {
       super.setPadding(spacingType, padding);
       mPaddingChanged = true;
       markUpdated();
     }
   }
+
+  @Override
+  public void setPaddingPercent(int spacingType, float percent) {
+    YogaValue current = getStylePadding(spacingType);
+    if (current.unit != YogaUnit.PERCENT || current.value != percent) {
+      super.setPadding(spacingType, percent);
+      mPaddingChanged = true;
+      markUpdated();
+    }
+  }
 }

ReactAndroid/src/main/java/com/facebook/react/flat/NativeViewWrapper.java

@@ -18,6 +18,8 @@ import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.UIViewOperationQueue;
 import com.facebook.react.uimanager.ViewGroupManager;
 import com.facebook.react.uimanager.ViewManager;
+import com.facebook.yoga.YogaValue;
+import com.facebook.yoga.YogaUnit;
 
 /* package */ final class NativeViewWrapper extends FlatShadowNode implements AndroidView {
 
@@ -101,13 +103,24 @@ import com.facebook.react.uimanager.ViewManager;
 
   @Override
   public void setPadding(int spacingType, float padding) {
-    if (getStylePadding(spacingType) != padding) {
+    YogaValue current = getStylePadding(spacingType);
+    if (current.unit != YogaUnit.PIXEL || current.value != padding) {
       super.setPadding(spacingType, padding);
       mPaddingChanged = true;
       markUpdated();
     }
   }
 
+  @Override
+  public void setPaddingPercent(int spacingType, float percent) {
+    YogaValue current = getStylePadding(spacingType);
+    if (current.unit != YogaUnit.PERCENT || current.value != percent) {
+      super.setPadding(spacingType, percent);
+      mPaddingChanged = true;
+      markUpdated();
+    }
+  }
+
   @Override
   public void onCollectExtraUpdates(UIViewOperationQueue uiViewOperationQueue) {
     if (mReactShadowNode != null && mReactShadowNode.hasUnseenUpdates()) {

ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java

@@ -6,12 +6,17 @@ import javax.annotation.Nullable;
 
 import java.util.Locale;
 
+import com.facebook.react.bridge.Dynamic;
+import com.facebook.react.bridge.ReadableType;
+
 import com.facebook.yoga.YogaAlign;
 import com.facebook.yoga.YogaConstants;
 import com.facebook.yoga.YogaFlexDirection;
 import com.facebook.yoga.YogaJustify;
 import com.facebook.yoga.YogaOverflow;
 import com.facebook.yoga.YogaPositionType;
+import com.facebook.yoga.YogaValue;
+import com.facebook.yoga.YogaUnit;
 import com.facebook.yoga.YogaWrap;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.uimanager.annotations.ReactPropGroup;
@@ -27,57 +32,107 @@ import com.facebook.react.uimanager.annotations.ReactPropGroup;
  */
 public class LayoutShadowNode extends ReactShadowNode {
 
-  @ReactProp(name = ViewProps.WIDTH, defaultFloat = YogaConstants.UNDEFINED)
-  public void setWidth(float width) {
-    if (isVirtual()) {
-      return;
-    }
-    setStyleWidth(YogaConstants.isUndefined(width) ? width : PixelUtil.toPixelFromDIP(width));
+  private static boolean dynamicIsPercent(Dynamic dynamic) {
+    return dynamic.getType() == ReadableType.String && dynamic.asString().endsWith("%");
   }
 
-  @ReactProp(name = ViewProps.MIN_WIDTH, defaultFloat = YogaConstants.UNDEFINED)
-  public void setMinWidth(float minWidth) {
-    if (isVirtual()) {
-      return;
-    }
-    setStyleMinWidth(
-      YogaConstants.isUndefined(minWidth) ? minWidth : PixelUtil.toPixelFromDIP(minWidth));
+  private static float getDynamicAsPercent(Dynamic dynamic) {
+    final String value = dynamic.asString();
+    return Float.parseFloat(value.substring(0, value.length() - 1));
   }
 
-  @ReactProp(name = ViewProps.MAX_WIDTH, defaultFloat = YogaConstants.UNDEFINED)
-  public void setMaxWidth(float maxWidth) {
-    if (isVirtual()) {
-      return;
-    }
-    setStyleMaxWidth(
-      YogaConstants.isUndefined(maxWidth) ? maxWidth : PixelUtil.toPixelFromDIP(maxWidth));
+  private static float getDynamicAsFloat(Dynamic dynamic) {
+    return (float) PixelUtil.toPixelFromDIP(dynamic.asDouble());
   }
 
-  @ReactProp(name = ViewProps.HEIGHT, defaultFloat = YogaConstants.UNDEFINED)
-  public void setHeight(float height) {
+  @ReactProp(name = ViewProps.WIDTH)
+  public void setWidth(Dynamic width) {
     if (isVirtual()) {
       return;
     }
-    setStyleHeight(
-      YogaConstants.isUndefined(height) ? height : PixelUtil.toPixelFromDIP(height));
+
+    if (width != null && dynamicIsPercent(width)) {
+      setStyleWidthPercent(getDynamicAsPercent(width));
+    } else {
+      setStyleWidth(width == null ? YogaConstants.UNDEFINED : getDynamicAsFloat(width));
+    }
+
+    width.recycle();
   }
 
-  @ReactProp(name = ViewProps.MIN_HEIGHT, defaultFloat = YogaConstants.UNDEFINED)
-  public void setMinHeight(float minHeight) {
+  @ReactProp(name = ViewProps.MIN_WIDTH)
+  public void setMinWidth(Dynamic minWidth) {
     if (isVirtual()) {
       return;
     }
-    setStyleMinHeight(
-      YogaConstants.isUndefined(minHeight) ? minHeight : PixelUtil.toPixelFromDIP(minHeight));
+
+    if (minWidth != null && dynamicIsPercent(minWidth)) {
+      setStyleMinWidthPercent(getDynamicAsPercent(minWidth));
+    } else {
+      setStyleMinWidth(minWidth == null ? YogaConstants.UNDEFINED : getDynamicAsFloat(minWidth));
+    }
+
+    minWidth.recycle();
   }
 
-  @ReactProp(name = ViewProps.MAX_HEIGHT, defaultFloat = YogaConstants.UNDEFINED)
-  public void setMaxHeight(float maxHeight) {
+  @ReactProp(name = ViewProps.MAX_WIDTH)
+  public void setMaxWidth(Dynamic maxWidth) {
     if (isVirtual()) {
       return;
     }
-    setStyleMaxHeight(
-      YogaConstants.isUndefined(maxHeight) ? maxHeight : PixelUtil.toPixelFromDIP(maxHeight));
+
+    if (maxWidth != null && dynamicIsPercent(maxWidth)) {
+      setStyleMaxWidthPercent(getDynamicAsPercent(maxWidth));
+    } else {
+      setStyleMaxWidth(maxWidth == null ? YogaConstants.UNDEFINED : getDynamicAsFloat(maxWidth));
+    }
+
+    maxWidth.recycle();
+  }
+
+  @ReactProp(name = ViewProps.HEIGHT)
+  public void setHeight(Dynamic height) {
+    if (isVirtual()) {
+      return;
+    }
+
+    if (height != null && dynamicIsPercent(height)) {
+      setStyleHeightPercent(getDynamicAsPercent(height));
+    } else {
+      setStyleHeight(height == null ? YogaConstants.UNDEFINED : getDynamicAsFloat(height));
+    }
+
+    height.recycle();
+  }
+
+  @ReactProp(name = ViewProps.MIN_HEIGHT)
+  public void setMinHeight(Dynamic minHeight) {
+    if (isVirtual()) {
+      return;
+    }
+
+    if (minHeight != null && dynamicIsPercent(minHeight)) {
+      setStyleMinHeightPercent(getDynamicAsPercent(minHeight));
+    } else {
+      setStyleMinHeight(minHeight == null ? YogaConstants.UNDEFINED : getDynamicAsFloat(minHeight));
+    }
+
+    minHeight.recycle();
+  }
+
+  @ReactProp(name = ViewProps.MAX_HEIGHT)
+  public void setMaxHeight(Dynamic maxHeight) {
+    if (isVirtual()) {
+      return;
+    }
+
+    if (maxHeight != null && dynamicIsPercent(maxHeight)) {
+      setStyleMaxHeightPercent(getDynamicAsPercent(maxHeight));
+    } else {
+      setStyleMaxHeight(maxHeight == null ? YogaConstants.UNDEFINED : getDynamicAsFloat(maxHeight));
+    }
+
+    maxHeight.recycle();
   }
 
   @ReactProp(name = ViewProps.FLEX, defaultFloat = 0f)
@@ -104,12 +159,19 @@ public class LayoutShadowNode extends ReactShadowNode {
     super.setFlexShrink(flexShrink);
   }
 
-  @ReactProp(name = ViewProps.FLEX_BASIS, defaultFloat = 0f)
-  public void setFlexBasis(float flexBasis) {
+  @ReactProp(name = ViewProps.FLEX_BASIS)
+  public void setFlexBasis(Dynamic flexBasis) {
     if (isVirtual()) {
       return;
     }
-    super.setFlexBasis(flexBasis);
+
+    if (flexBasis != null && dynamicIsPercent(flexBasis)) {
+      setFlexBasisPercent(getDynamicAsPercent(flexBasis));
+    } else {
+      setFlexBasis(flexBasis == null ? 0 : getDynamicAsFloat(flexBasis));
+    }
+
+    flexBasis.recycle();
   }
 
   @ReactProp(name = ViewProps.ASPECT_RATIO, defaultFloat = YogaConstants.UNDEFINED)
@@ -186,12 +248,21 @@ public class LayoutShadowNode extends ReactShadowNode {
       ViewProps.MARGIN_RIGHT,
       ViewProps.MARGIN_TOP,
       ViewProps.MARGIN_BOTTOM,
-  }, defaultFloat = YogaConstants.UNDEFINED)
-  public void setMargins(int index, float margin) {
+  })
+  public void setMargins(int index, Dynamic margin) {
     if (isVirtual()) {
       return;
     }
-    setMargin(ViewProps.PADDING_MARGIN_SPACING_TYPES[index], PixelUtil.toPixelFromDIP(margin));
+
+    if (margin != null && dynamicIsPercent(margin)) {
+      setMarginPercent(ViewProps.PADDING_MARGIN_SPACING_TYPES[index], getDynamicAsPercent(margin));
+    } else {
+      setMargin(
+          ViewProps.PADDING_MARGIN_SPACING_TYPES[index],
+          margin == null ? YogaConstants.UNDEFINED : getDynamicAsFloat(margin));
+    }
+
+    margin.recycle();
   }
 
   @ReactPropGroup(names = {
@@ -202,14 +273,22 @@ public class LayoutShadowNode extends ReactShadowNode {
       ViewProps.PADDING_RIGHT,
       ViewProps.PADDING_TOP,
       ViewProps.PADDING_BOTTOM,
-  }, defaultFloat = YogaConstants.UNDEFINED)
-  public void setPaddings(int index, float padding) {
+  })
+  public void setPaddings(int index, Dynamic padding) {
     if (isVirtual()) {
       return;
     }
-    setPadding(
-        ViewProps.PADDING_MARGIN_SPACING_TYPES[index],
-        YogaConstants.isUndefined(padding) ? padding : PixelUtil.toPixelFromDIP(padding));
+
+    if (padding != null && dynamicIsPercent(padding)) {
+      setPaddingPercent(
+          ViewProps.PADDING_MARGIN_SPACING_TYPES[index], getDynamicAsPercent(padding));
+    } else {
+      setPadding(
+          ViewProps.PADDING_MARGIN_SPACING_TYPES[index],
+          padding == null ? YogaConstants.UNDEFINED : getDynamicAsFloat(padding));
+    }
+
+    padding.recycle();
   }
 
   @ReactPropGroup(names = {
@@ -231,14 +310,21 @@ public class LayoutShadowNode extends ReactShadowNode {
       ViewProps.RIGHT,
       ViewProps.TOP,
       ViewProps.BOTTOM,
-  }, defaultFloat = YogaConstants.UNDEFINED)
-  public void setPositionValues(int index, float position) {
+  })
+  public void setPositionValues(int index, Dynamic position) {
     if (isVirtual()) {
       return;
     }
-    setPosition(
-      ViewProps.POSITION_SPACING_TYPES[index],
-      YogaConstants.isUndefined(position) ? position : PixelUtil.toPixelFromDIP(position));
+
+    if (position != null && dynamicIsPercent(position)) {
+      setPositionPercent(ViewProps.POSITION_SPACING_TYPES[index], getDynamicAsPercent(position));
+    } else {
+      setPosition(
+          ViewProps.POSITION_SPACING_TYPES[index],
+          position == null ? YogaConstants.UNDEFINED : getDynamicAsFloat(position));
+    }
+
+    position.recycle();
   }
 
   @ReactProp(name = ViewProps.POSITION)

ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java

@@ -11,6 +11,7 @@ package com.facebook.react.uimanager;
 
 import javax.annotation.Nullable;
 
+import java.util.Arrays;
 import java.util.ArrayList;
 
 import com.facebook.yoga.YogaAlign;
@@ -23,6 +24,7 @@ import com.facebook.yoga.YogaMeasureFunction;
 import com.facebook.yoga.YogaNode;
 import com.facebook.yoga.YogaOverflow;
 import com.facebook.yoga.YogaPositionType;
+import com.facebook.yoga.YogaValue;
 import com.facebook.yoga.YogaWrap;
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.uimanager.annotations.ReactPropertyHolder;
@@ -72,7 +74,8 @@ public class ReactShadowNode {
   private float mAbsoluteRight;
   private float mAbsoluteBottom;
   private final Spacing mDefaultPadding = new Spacing(0);
-  private final Spacing mPadding = new Spacing(YogaConstants.UNDEFINED);
+  private final float[] mPadding = new float[Spacing.ALL + 1];
+  private final boolean[] mPaddingIsPercent = new boolean[Spacing.ALL + 1];
   private final YogaNode mYogaNode;
 
   public ReactShadowNode() {
@@ -82,6 +85,7 @@ public class ReactShadowNode {
         node = new YogaNode();
       }
       mYogaNode = node;
+      Arrays.fill(mPadding, YogaConstants.UNDEFINED);
     } else {
       mYogaNode = null;
     }
@@ -514,38 +518,62 @@ public class ReactShadowNode {
     mYogaNode.setDirection(direction);
   }
 
-  public final float getStyleWidth() {
-    return mYogaNode.getWidth().value;
+  public final YogaValue getStyleWidth() {
+    return mYogaNode.getWidth();
   }
 
   public void setStyleWidth(float widthPx) {
     mYogaNode.setWidth(widthPx);
   }
 
+  public void setStyleWidthPercent(float percent) {
+    mYogaNode.setWidthPercent(percent);
+  }
+
   public void setStyleMinWidth(float widthPx) {
     mYogaNode.setMinWidth(widthPx);
   }
 
+  public void setStyleMinWidthPercent(float percent) {
+    mYogaNode.setMinWidthPercent(percent);
+  }
+
   public void setStyleMaxWidth(float widthPx) {
     mYogaNode.setMaxWidth(widthPx);
   }
 
-  public final float getStyleHeight() {
-    return mYogaNode.getHeight().value;
+  public void setStyleMaxWidthPercent(float percent) {
+    mYogaNode.setMaxWidthPercent(percent);
+  }
+
+  public final YogaValue getStyleHeight() {
+    return mYogaNode.getHeight();
   }
 
   public void setStyleHeight(float heightPx) {
     mYogaNode.setHeight(heightPx);
   }
 
+  public void setStyleHeightPercent(float percent) {
+    mYogaNode.setHeightPercent(percent);
+  }
+
   public void setStyleMinHeight(float widthPx) {
     mYogaNode.setMinHeight(widthPx);
   }
 
+  public void setStyleMinHeightPercent(float percent) {
+    mYogaNode.setMinHeightPercent(percent);
+  }
+
   public void setStyleMaxHeight(float widthPx) {
     mYogaNode.setMaxHeight(widthPx);
   }
 
+  public void setStyleMaxHeightPercent(float percent) {
+    mYogaNode.setMaxHeightPercent(percent);
+  }
+
   public void setFlex(float flex) {
     mYogaNode.setFlex(flex);
   }
@@ -562,6 +590,10 @@ public class ReactShadowNode {
     mYogaNode.setFlexBasis(flexBasis);
   }
 
+  public void setFlexBasisPercent(float percent) {
+    mYogaNode.setFlexBasisPercent(percent);
+  }
+
   public void setStyleAspectRatio(float aspectRatio) {
     mYogaNode.setAspectRatio(aspectRatio);
   }
@@ -594,12 +626,16 @@ public class ReactShadowNode {
     mYogaNode.setMargin(YogaEdge.fromInt(spacingType), margin);
   }
 
+  public void setMarginPercent(int spacingType, float percent) {
+    mYogaNode.setMarginPercent(YogaEdge.fromInt(spacingType), percent);
+  }
+
   public final float getPadding(int spacingType) {
     return mYogaNode.getLayoutPadding(YogaEdge.fromInt(spacingType));
   }
 
-  public final float getStylePadding(int spacingType) {
-    return mYogaNode.getPadding(YogaEdge.fromInt(spacingType)).value;
+  public final YogaValue getStylePadding(int spacingType) {
+    return mYogaNode.getPadding(YogaEdge.fromInt(spacingType));
   }
 
   public void setDefaultPadding(int spacingType, float padding) {
@@ -608,7 +644,14 @@ public class ReactShadowNode {
   }
 
   public void setPadding(int spacingType, float padding) {
-    mPadding.set(spacingType, padding);
+    mPadding[spacingType] = padding;
+    mPaddingIsPercent[spacingType] = false;
+    updatePadding();
+  }
+
+  public void setPaddingPercent(int spacingType, float percent) {
+    mPadding[spacingType] = percent;
+    mPaddingIsPercent[spacingType] = !YogaConstants.isUndefined(percent);
     updatePadding();
   }
 
@@ -618,28 +661,31 @@ public class ReactShadowNode {
           spacingType == Spacing.RIGHT ||
           spacingType == Spacing.START ||
           spacingType == Spacing.END) {
-        if (YogaConstants.isUndefined(mPadding.getRaw(spacingType)) &&
-          YogaConstants.isUndefined(mPadding.getRaw(Spacing.HORIZONTAL)) &&
-          YogaConstants.isUndefined(mPadding.getRaw(Spacing.ALL))) {
+        if (YogaConstants.isUndefined(mPadding[spacingType]) &&
+            YogaConstants.isUndefined(mPadding[Spacing.HORIZONTAL]) &&
+            YogaConstants.isUndefined(mPadding[Spacing.ALL])) {
           mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mDefaultPadding.getRaw(spacingType));
-        } else {
-          mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mPadding.getRaw(spacingType));
+          continue;
         }
       } else if (spacingType == Spacing.TOP || spacingType == Spacing.BOTTOM) {
-        if (YogaConstants.isUndefined(mPadding.getRaw(spacingType)) &&
-          YogaConstants.isUndefined(mPadding.getRaw(Spacing.VERTICAL)) &&
-          YogaConstants.isUndefined(mPadding.getRaw(Spacing.ALL))) {
+        if (YogaConstants.isUndefined(mPadding[spacingType]) &&
+            YogaConstants.isUndefined(mPadding[Spacing.VERTICAL]) &&
+            YogaConstants.isUndefined(mPadding[Spacing.ALL])) {
           mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mDefaultPadding.getRaw(spacingType));
-        } else {
-          mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mPadding.getRaw(spacingType));
+          continue;
         }
       } else {
-        if (YogaConstants.isUndefined(mPadding.getRaw(spacingType))) {
+        if (YogaConstants.isUndefined(mPadding[spacingType])) {
           mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mDefaultPadding.getRaw(spacingType));
-        } else {
-          mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mPadding.getRaw(spacingType));
+          continue;
         }
       }
+
+      if (mPaddingIsPercent[spacingType]) {
+        mYogaNode.setPaddingPercent(YogaEdge.fromInt(spacingType), mPadding[spacingType]);
+      } else {
+        mYogaNode.setPadding(YogaEdge.fromInt(spacingType), mPadding[spacingType]);
+      }
     }
   }
 
@@ -651,6 +697,10 @@ public class ReactShadowNode {
     mYogaNode.setPosition(YogaEdge.fromInt(spacingType), position);
   }
 
+  public void setPositionPercent(int spacingType, float percent) {
+    mYogaNode.setPositionPercent(YogaEdge.fromInt(spacingType), percent);
+  }
+
   public void setPositionType(YogaPositionType positionType) {
     mYogaNode.setPositionType(positionType);
   }

ReactAndroid/src/main/java/com/facebook/react/views/text/frescosupport/FrescoBasedReactTextInlineImageShadowNode.java

@@ -20,7 +20,10 @@ import android.net.Uri;
 import com.facebook.common.util.UriUtil;
 import com.facebook.yoga.YogaConstants;
 import com.facebook.drawee.controller.AbstractDraweeControllerBuilder;
+import com.facebook.react.bridge.Dynamic;
+import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
 import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.bridge.ReadableType;
 import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.views.text.ReactTextInlineImageShadowNode;
@@ -74,13 +77,23 @@ public class FrescoBasedReactTextInlineImageShadowNode extends ReactTextInlineIm
    * Besides width/height, all other layout props on inline images are ignored
    */
   @Override
-  public void setWidth(float width) {
-    mWidth = width;
+  public void setWidth(Dynamic width) {
+    if (width.getType() == ReadableType.Number) {
+      mWidth = (float) width.asDouble();
+    } else {
+      throw new JSApplicationIllegalArgumentException(
+          "Inline images must not have percentage based width");
+    }
   }
 
   @Override
-  public void setHeight(float height) {
-    mHeight = height;
+  public void setHeight(Dynamic height) {
+    if (height.getType() == ReadableType.Number) {
+      mHeight = (float) height.asDouble();
+    } else {
+      throw new JSApplicationIllegalArgumentException(
+          "Inline images must not have percentage based height");
+    }
   }
 
   public @Nullable Uri getUri() {

ReactAndroid/src/main/java/com/facebook/yoga/YogaValue.java

@@ -19,7 +19,7 @@ public class YogaValue {
   public final float value;
   public final YogaUnit unit;
 
-  YogaValue(float value, YogaUnit unit) {
+  public YogaValue(float value, YogaUnit unit) {
     this.value = value;
     this.unit = unit;
   }