Add support to measure shadow nodes in the FabricUIManager

Summary: In this diff I added support to be able to measure C++ shadowNode in Android. As an example I implemented the measurement of TextViews Reviewed By: shergin Differential Revision: D9583972 fbshipit-source-id: 1344782d4c586c94a4576b18a4acfa4775e46952
facebook · Sep 18, 2018 · 5c0da01 · 5c0da01
1 parent 52dd7db
commit 5c0da01
Show file tree

Hide file tree

Showing 14 changed files with 851 additions and 11 deletions.
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/PixelUtil.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/PixelUtil.java
@@ -31,6 +31,13 @@ public static float toPixelFromDIP(double value) {
     return toPixelFromDIP((float) value);
   }
 
+  /**
+   * Convert from PX to SP
+   */
+  public static float toSPFromPixel(float value) {
+    return value / DisplayMetricsHolder.getScreenDisplayMetrics().scaledDensity;
+  }
+
   /**
    * Convert from SP to PX
    */

diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewManager.java
@@ -10,7 +10,9 @@
 import android.view.View;
 import com.facebook.react.bridge.BaseJavaModule;
 import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.bridge.ReadableNativeMap;
 import com.facebook.react.touch.JSResponderHandler;
 import com.facebook.react.touch.ReactInterceptingViewGroup;
 import com.facebook.react.uimanager.annotations.ReactProp;
@@ -202,4 +204,16 @@ public void receiveCommand(T root, int commandId, @Nullable ReadableArray args)
   public Map<String, String> getNativeProps() {
     return ViewManagerPropertyUpdater.getNativeProps(getClass(), getShadowNodeClass());
   }
+
+  public float[] measure(
+      ReactContext context,
+      T view,
+      ReadableNativeMap localData,
+      ReadableNativeMap props,
+      float width,
+      int widthMode,
+      float height,
+      int heightMode) {
+    return null;
+  }
 }
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java
@@ -11,6 +11,7 @@
 import android.graphics.drawable.Drawable;
 import android.os.Build;
 import android.text.Layout;
+import android.text.Spannable;
 import android.text.Spanned;
 import android.text.TextUtils;
 import android.view.Gravity;
@@ -36,6 +37,7 @@ public class ReactTextView extends TextView implements ReactCompoundView {
   private TextUtils.TruncateAt mEllipsizeLocation = TextUtils.TruncateAt.END;
 
   private ReactViewBackgroundManager mReactBackgroundManager;
+  private Spannable mSpanned;
 
   public ReactTextView(Context context) {
     super(context);
@@ -255,4 +257,12 @@ public void setBorderRadius(float borderRadius, int position) {
   public void setBorderStyle(@Nullable String style) {
     mReactBackgroundManager.setBorderStyle(style);
   }
+
+  public void setSpanned(Spannable spanned) {
+    mSpanned = spanned;
+  }
+
+  public Spannable getSpanned() {
+    return mSpanned;
+  }
 }
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java
@@ -9,11 +9,14 @@
 
 import android.text.Spannable;
 import com.facebook.react.common.MapBuilder;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.ReadableNativeMap;
 import com.facebook.react.common.annotations.VisibleForTesting;
 import com.facebook.react.module.annotations.ReactModule;
 import com.facebook.react.uimanager.ThemedReactContext;
 import java.util.Map;
 import javax.annotation.Nullable;
+import com.facebook.yoga.YogaMeasureMode;
 
 /**
  * Concrete class for {@link ReactTextAnchorViewManager} which represents view managers of anchor
@@ -66,4 +69,25 @@ protected void onAfterUpdateTransaction(ReactTextView view) {
   public @Nullable Map getExportedCustomDirectEventTypeConstants() {
     return MapBuilder.of("topTextLayout", MapBuilder.of("registrationName", "onTextLayout"));
   }
+
+  public float[] measure(
+    ReactContext context,
+    ReactTextView view,
+    ReadableNativeMap localData,
+    ReadableNativeMap props,
+    float width,
+    int widthMode,
+    float height,
+    int heightMode) {
+
+    // TODO: should widthMode and heightMode be a YogaMeasureMode?
+    return TextLayoutManager.measureText(context,
+      view,
+      localData,
+      props,
+      width,
+      YogaMeasureMode.fromInt(widthMode),
+      height,
+      YogaMeasureMode.fromInt(heightMode));
+  }
 }