update Android text to support color longs

facebook · Mar 15, 2024 · c95136e · c95136e
1 parent b3a8eba
commit c95136e
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 40 deletions.
diff --git a/...ct-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactStylesDiffMap.java b/...ct-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactStylesDiffMap.java
@@ -72,6 +72,10 @@ public int getInt(String name, int restoreNullToDefaultValue) {
     return mBackingMap.isNull(name) ? restoreNullToDefaultValue : mBackingMap.getInt(name);
   }
 
+  public long getLong(String name, long restoreNullToDefaultValue) {
+    return mBackingMap.isNull(name) ? restoreNullToDefaultValue : mBackingMap.getLong(name);
+  }
+
   @Nullable
   public String getString(String name) {
     return mBackingMap.getString(name);

diff --git a/...ve/ReactAndroid/src/main/java/com/facebook/react/views/text/BasicTextAttributeProvider.kt b/...ve/ReactAndroid/src/main/java/com/facebook/react/views/text/BasicTextAttributeProvider.kt
@@ -20,11 +20,11 @@ internal interface BasicTextAttributeProvider {
 
   val isBackgroundColorSet: Boolean
 
-  val backgroundColor: Int
+  val backgroundColor: Long
 
   val isColorSet: Boolean
 
-  val color: Int
+  val color: Long
 
   val fontStyle: Int
 
@@ -44,5 +44,5 @@ internal interface BasicTextAttributeProvider {
 
   val textShadowRadius: Float
 
-  val textShadowColor: Int
+  val textShadowColor: Long
 }
diff --git a/...ive/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java b/...ive/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java
@@ -427,9 +427,9 @@ protected Spannable spannedFromShadowNode(
   protected TextAttributes mTextAttributes;
 
   protected boolean mIsColorSet = false;
-  protected int mColor;
+  protected long mColor;
   protected boolean mIsBackgroundColorSet = false;
-  protected int mBackgroundColor;
+  protected long mBackgroundColor;
 
   protected @Nullable AccessibilityRole mAccessibilityRole = null;
   protected @Nullable Role mRole = null;
@@ -444,7 +444,7 @@ protected Spannable spannedFromShadowNode(
   protected float mTextShadowOffsetDx = 0;
   protected float mTextShadowOffsetDy = 0;
   protected float mTextShadowRadius = 0;
-  protected int mTextShadowColor = DEFAULT_TEXT_SHADOW_COLOR;
+  protected long mTextShadowColor = Color.pack(DEFAULT_TEXT_SHADOW_COLOR);
 
   protected boolean mIsUnderlineTextDecorationSet = false;
   protected boolean mIsLineThroughTextDecorationSet = false;
@@ -580,12 +580,12 @@ public void setFontSize(float fontSize) {
   }
 
   @Override
-  public int getColor() {
+  public long getColor() {
     return mColor;
   }
 
   @ReactProp(name = ViewProps.COLOR, customType = "Color")
-  public void setColor(@Nullable Integer color) {
+  public void setColor(@Nullable Long color) {
     mIsColorSet = (color != null);
     if (mIsColorSet) {
       mColor = color;
@@ -599,12 +599,12 @@ public boolean isColorSet() {
   }
 
   @Override
-  public int getBackgroundColor() {
+  public long getBackgroundColor() {
     return mBackgroundColor;
   }
 
   @ReactProp(name = ViewProps.BACKGROUND_COLOR, customType = "Color")
-  public void setBackgroundColor(@Nullable Integer color) {
+  public void setBackgroundColor(@Nullable Long color) {
     // Background color needs to be handled here for virtual nodes so it can be incorporated into
     // the span. However, it doesn't need to be applied to non-virtual nodes because non-virtual
     // nodes get mapped to native views and native views get their background colors get set via
@@ -795,12 +795,12 @@ public void setTextShadowRadius(float textShadowRadius) {
   }
 
   @Override
-  public int getTextShadowColor() {
+  public long getTextShadowColor() {
     return mTextShadowColor;
   }
 
   @ReactProp(name = PROP_SHADOW_COLOR, defaultInt = DEFAULT_TEXT_SHADOW_COLOR, customType = "Color")
-  public void setTextShadowColor(int textShadowColor) {
+  public void setTextShadowColor(long textShadowColor) {
     if (textShadowColor != mTextShadowColor) {
       mTextShadowColor = textShadowColor;
       markUpdated();

diff --git a/.../ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java b/.../ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java
@@ -7,6 +7,7 @@
 
 package com.facebook.react.views.text;
 
+import android.graphics.Color;
 import android.text.Layout;
 import android.text.Spannable;
 import android.text.TextUtils;
@@ -106,12 +107,12 @@ public void setSelectable(ReactTextView view, boolean isSelectable) {
   }
 
   @ReactProp(name = "selectionColor", customType = "Color")
-  public void setSelectionColor(ReactTextView view, @Nullable Integer color) {
+  public void setSelectionColor(ReactTextView view, @Nullable Long color) {
     if (color == null) {
       view.setHighlightColor(
           DefaultStyleValuesUtil.getDefaultTextColorHighlight(view.getContext()));
     } else {
-      view.setHighlightColor(color);
+      view.setHighlightColor(Color.toArgb(color));
     }
   }
 
@@ -180,11 +181,9 @@ public void setBorderWidth(ReactTextView view, int index, float width) {
         "borderBottomColor"
       },
       customType = "Color")
-  public void setBorderColor(ReactTextView view, int index, Integer color) {
-    float rgbComponent =
-        color == null ? YogaConstants.UNDEFINED : (float) ((int) color & 0x00FFFFFF);
-    float alphaComponent = color == null ? YogaConstants.UNDEFINED : (float) ((int) color >>> 24);
-    view.setBorderColor(SPACING_TYPES[index], rgbComponent, alphaComponent);
+  public void setBorderColor(ReactTextView view, int index, Long color) {
+    long borderColor = color == null ? 0 : color;
+    view.setBorderColor(SPACING_TYPES[index], borderColor);
   }
 
   @ReactProp(name = ViewProps.INCLUDE_FONT_PADDING, defaultBoolean = true)

diff --git a/.../react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java b/.../react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java
@@ -626,12 +626,16 @@ public void setBackgroundColor(int color) {
     mReactBackgroundManager.setBackgroundColor(color);
   }
 
+  public void setBackgroundColor(long color) {
+    mReactBackgroundManager.setBackgroundColor(color);
+  }
+
   public void setBorderWidth(int position, float width) {
     mReactBackgroundManager.setBorderWidth(position, width);
   }
 
-  public void setBorderColor(int position, float color, float alpha) {
-    mReactBackgroundManager.setBorderColor(position, color, alpha);
+  public void setBorderColor(int position, long color) {
+    mReactBackgroundManager.setBorderColor(position, color);
   }
 
   public void setBorderRadius(float borderRadius) {

diff --git a/...t-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextAttributeProps.java b/...t-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextAttributeProps.java
@@ -7,6 +7,7 @@
 
 package com.facebook.react.views.text;
 
+import android.graphics.Color;
 import android.os.Build;
 import android.text.Layout;
 import android.text.TextUtils;
@@ -72,7 +73,7 @@ public class TextAttributeProps implements EffectiveTextAttributeProvider {
 
   private static final String PROP_TEXT_TRANSFORM = "textTransform";
 
-  private static final int DEFAULT_TEXT_SHADOW_COLOR = 0x55000000;
+  private static final long DEFAULT_TEXT_SHADOW_COLOR = Color.pack(0x55000000);
   private static final int DEFAULT_JUSTIFICATION_MODE =
       (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) ? 0 : Layout.JUSTIFICATION_MODE_NONE;
   private static final int DEFAULT_BREAK_STRATEGY = Layout.BREAK_STRATEGY_HIGH_QUALITY;
@@ -81,9 +82,9 @@ public class TextAttributeProps implements EffectiveTextAttributeProvider {
   protected float mLineHeight = Float.NaN;
   protected boolean mIsColorSet = false;
   protected boolean mAllowFontScaling = true;
-  protected int mColor;
+  protected long mColor;
   protected boolean mIsBackgroundColorSet = false;
-  protected int mBackgroundColor;
+  protected long mBackgroundColor;
 
   protected int mNumberOfLines = ReactConstants.UNSET;
   protected int mFontSize = ReactConstants.UNSET;
@@ -100,7 +101,7 @@ public class TextAttributeProps implements EffectiveTextAttributeProvider {
   protected float mTextShadowOffsetDx = 0;
   protected float mTextShadowOffsetDy = 0;
   protected float mTextShadowRadius = 0;
-  protected int mTextShadowColor = DEFAULT_TEXT_SHADOW_COLOR;
+  protected long mTextShadowColor = DEFAULT_TEXT_SHADOW_COLOR;
 
   protected boolean mIsUnderlineTextDecorationSet = false;
   protected boolean mIsLineThroughTextDecorationSet = false;
@@ -152,10 +153,10 @@ public static TextAttributeProps fromMapBuffer(MapBuffer props) {
       MapBuffer.Entry entry = iterator.next();
       switch (entry.getKey()) {
         case TA_KEY_FOREGROUND_COLOR:
-          result.setColor(entry.getIntValue());
+          result.setColor(entry.getLongValue());
           break;
         case TA_KEY_BACKGROUND_COLOR:
-          result.setBackgroundColor(entry.getIntValue());
+          result.setBackgroundColor(entry.getLongValue());
           break;
         case TA_KEY_OPACITY:
           break;
@@ -200,7 +201,7 @@ public static TextAttributeProps fromMapBuffer(MapBuffer props) {
           result.setTextShadowRadius((float) entry.getDoubleValue());
           break;
         case TA_KEY_TEXT_SHADOW_COLOR:
-          result.setTextShadowColor(entry.getIntValue());
+          result.setTextShadowColor(entry.getLongValue());
           break;
         case TA_KEY_TEXT_SHADOW_OFFSET_DX:
           result.setTextShadowOffsetDx((float) entry.getDoubleValue());
@@ -239,14 +240,14 @@ public static TextAttributeProps fromReadableMap(ReactStylesDiffMap props) {
     result.setLetterSpacing(getFloatProp(props, ViewProps.LETTER_SPACING, Float.NaN));
     result.setAllowFontScaling(getBooleanProp(props, ViewProps.ALLOW_FONT_SCALING, true));
     result.setFontSize(getFloatProp(props, ViewProps.FONT_SIZE, ReactConstants.UNSET));
-    result.setColor(props.hasKey(ViewProps.COLOR) ? props.getInt(ViewProps.COLOR, 0) : null);
+    result.setColor(props.hasKey(ViewProps.COLOR) ? props.getLong(ViewProps.COLOR, 0) : null);
     result.setColor(
         props.hasKey(ViewProps.FOREGROUND_COLOR)
-            ? props.getInt(ViewProps.FOREGROUND_COLOR, 0)
+            ? props.getLong(ViewProps.FOREGROUND_COLOR, 0)
             : null);
     result.setBackgroundColor(
         props.hasKey(ViewProps.BACKGROUND_COLOR)
-            ? props.getInt(ViewProps.BACKGROUND_COLOR, 0)
+            ? props.getLong(ViewProps.BACKGROUND_COLOR, 0)
             : null);
     result.setFontFamily(getStringProp(props, ViewProps.FONT_FAMILY));
     result.setFontWeight(getStringProp(props, ViewProps.FONT_WEIGHT));
@@ -257,7 +258,7 @@ public static TextAttributeProps fromReadableMap(ReactStylesDiffMap props) {
     result.setTextShadowOffset(
         props.hasKey(PROP_SHADOW_OFFSET) ? props.getMap(PROP_SHADOW_OFFSET) : null);
     result.setTextShadowRadius(getFloatProp(props, PROP_SHADOW_RADIUS, 1));
-    result.setTextShadowColor(getIntProp(props, PROP_SHADOW_COLOR, DEFAULT_TEXT_SHADOW_COLOR));
+    result.setTextShadowColor(getLongProp(props, PROP_SHADOW_COLOR, DEFAULT_TEXT_SHADOW_COLOR));
     result.setTextTransform(getStringProp(props, PROP_TEXT_TRANSFORM));
     result.setLayoutDirection(getStringProp(props, ViewProps.LAYOUT_DIRECTION));
     result.setAccessibilityRole(getStringProp(props, ViewProps.ACCESSIBILITY_ROLE));
@@ -326,6 +327,14 @@ private static int getIntProp(ReactStylesDiffMap mProps, String name, int defaul
     }
   }
 
+  private static long getLongProp(ReactStylesDiffMap mProps, String name, long defaultvalue) {
+    if (mProps.hasKey(name)) {
+      return mProps.getLong(name, defaultvalue);
+    } else {
+      return defaultvalue;
+    }
+  }
+
   private static float getFloatProp(ReactStylesDiffMap mProps, String name, float defaultvalue) {
     if (mProps.hasKey(name)) {
       return mProps.getFloat(name, defaultvalue);
@@ -425,11 +434,11 @@ private void setFontSize(float fontSize) {
   }
 
   @Override
-  public int getColor() {
+  public long getColor() {
     return mColor;
   }
 
-  private void setColor(@Nullable Integer color) {
+  private void setColor(@Nullable Long color) {
     mIsColorSet = (color != null);
     if (mIsColorSet) {
       mColor = color;
@@ -442,11 +451,11 @@ public boolean isColorSet() {
   }
 
   @Override
-  public int getBackgroundColor() {
+  public long getBackgroundColor() {
     return mBackgroundColor;
   }
 
-  private void setBackgroundColor(Integer color) {
+  private void setBackgroundColor(Long color) {
     // TODO: Don't apply background color to anchor TextView since it will be applied on the View
     // directly
     // if (!isVirtualAnchor()) {
@@ -687,11 +696,11 @@ private void setTextShadowRadius(float textShadowRadius) {
   }
 
   @Override
-  public int getTextShadowColor() {
+  public long getTextShadowColor() {
     return mTextShadowColor;
   }
 
-  private void setTextShadowColor(int textShadowColor) {
+  private void setTextShadowColor(long textShadowColor) {
     if (textShadowColor != mTextShadowColor) {
       mTextShadowColor = textShadowColor;
     }

diff --git a/.../react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutUtils.kt b/.../react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutUtils.kt
@@ -339,7 +339,7 @@ internal object TextLayoutUtils {
         textAttributeProvider.textShadowOffsetDx != 0f ||
             textAttributeProvider.textShadowOffsetDy != 0f
     val hasTextShadowRadius = textAttributeProvider.textShadowRadius != 0f
-    val hasTextShadowColorAlpha = Color.alpha(textAttributeProvider.textShadowColor) != 0
+    val hasTextShadowColorAlpha = Color.alpha(textAttributeProvider.textShadowColor) != 0f
 
     if ((hasTextShadowOffset || hasTextShadowRadius) && hasTextShadowColorAlpha) {
       ops.add(

diff --git a/...d/src/main/java/com/facebook/react/views/text/internal/span/ReactBackgroundColorSpan.java b/...d/src/main/java/com/facebook/react/views/text/internal/span/ReactBackgroundColorSpan.java
@@ -7,6 +7,7 @@
 
 package com.facebook.react.views.text.internal.span;
 
+import android.graphics.Color;
 import android.text.style.BackgroundColorSpan;
 
 /*
@@ -16,4 +17,8 @@ public class ReactBackgroundColorSpan extends BackgroundColorSpan implements Rea
   public ReactBackgroundColorSpan(int color) {
     super(color);
   }
+
+  public ReactBackgroundColorSpan(long color) {
+    super(Color.toArgb(color));
+  }
 }
diff --git a/...d/src/main/java/com/facebook/react/views/text/internal/span/ReactForegroundColorSpan.java b/...d/src/main/java/com/facebook/react/views/text/internal/span/ReactForegroundColorSpan.java
@@ -7,13 +7,31 @@
 
 package com.facebook.react.views.text.internal.span;
 
+import android.graphics.Color;
 import android.text.style.ForegroundColorSpan;
+import android.text.TextPaint;
+import androidx.annotation.NonNull;
 
 /*
  * Wraps {@link ForegroundColorSpan} as a {@link ReactSpan}.
  */
 public class ReactForegroundColorSpan extends ForegroundColorSpan implements ReactSpan {
+  private long mColor = 0;
+
   public ReactForegroundColorSpan(int color) {
     super(color);
   }
+
+  public ReactForegroundColorSpan(long color) {
+    super(Color.toArgb(color));
+    this.mColor = color;
+  }
+
+  @Override
+  public void updateDrawState(@NonNull TextPaint tp) {
+    super.updateDrawState(tp);
+    if (mColor != 0) {
+      tp.setColor(mColor);
+    }
+  }
 }
diff --git a/...actAndroid/src/main/java/com/facebook/react/views/text/internal/span/ShadowStyleSpan.java b/...actAndroid/src/main/java/com/facebook/react/views/text/internal/span/ShadowStyleSpan.java
@@ -7,14 +7,23 @@
 
 package com.facebook.react.views.text.internal.span;
 
+import android.graphics.Color;
+import android.graphics.ColorSpace;
 import android.text.TextPaint;
 import android.text.style.CharacterStyle;
 
 public class ShadowStyleSpan extends CharacterStyle implements ReactSpan {
   private final float mDx, mDy, mRadius;
-  private final int mColor;
+  private final long mColor;
 
   public ShadowStyleSpan(float dx, float dy, float radius, int color) {
+    mDx = dx;
+    mDy = dy;
+    mRadius = radius;
+    mColor = Color.pack(color);
+  }
+
+  public ShadowStyleSpan(float dx, float dy, float radius, long color) {
     mDx = dx;
     mDy = dy;
     mRadius = radius;