Fix android letter spacing

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

@@ -70,6 +70,7 @@ public class ViewProps {
  public static final String FONT_STYLE = "fontStyle";
  public static final String FONT_FAMILY = "fontFamily";
  public static final String LINE_HEIGHT = "lineHeight";
+ public static final String LETTER_SPACING = "letterSpacing";
  public static final String NEEDS_OFFSCREEN_ALPHA_COMPOSITING = "needsOffscreenAlphaCompositing";
  public static final String NUMBER_OF_LINES = "numberOfLines";
  public static final String LINE_BREAK_MODE = "ellipsizeMode";

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java

@@ -304,6 +304,7 @@ private static int parseNumericFontWeight(String fontWeightString) {
  }
 
  private float mLineHeight = Float.NaN;
+ private float mLetterSpacing = Float.NaN;
  private boolean mIsColorSet = false;
  private int mColor;
  private boolean mIsBackgroundColorSet = false;
@@ -360,6 +361,15 @@ public ReactTextShadowNode(boolean isVirtual) {
  }
  }
 
+ public float getLetterSpacing() {
+ return mLetterSpacing;
+ }
+
+ public int getFontSize() {
+ return mFontSize;
+ }
+
+
  // Returns a line height which takes into account the requested line height
  // and the height of the inline images.
  public float getEffectiveLineHeight() {
@@ -418,6 +428,12 @@ public void setLineHeight(int lineHeight) {
  markUpdated();
  }
 
+ @ReactProp(name = ViewProps.LETTER_SPACING, defaultFloat = UNSET)
+ public void setLetterSpacing(float letterSpacing) {
+ mLetterSpacing = letterSpacing == UNSET ? Float.NaN : letterSpacing;
+ markUpdated();
+ }
+
  @ReactProp(name = ViewProps.TEXT_ALIGN)
  public void setTextAlign(@Nullable String textAlign) {
  if (textAlign == null || "auto".equals(textAlign)) {
@@ -588,6 +604,8 @@ public void onCollectExtraUpdates(UIViewOperationQueue uiViewOperationQueue) {
  UNSET,
  mContainsImages,
  getPadding(),
+ getLetterSpacing(),
+ getFontSize(),
  getEffectiveLineHeight(),
  getTextAlign()
  );

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextUpdate.java

@@ -29,13 +29,17 @@ public class ReactTextUpdate {
  private final float mPaddingRight;
  private final float mPaddingBottom;
  private final float mLineHeight;
+ private final float mLetterSpacing;
+ private final int mFontSize;
  private final int mTextAlign;
 
  public ReactTextUpdate(
  Spannable text,
  int jsEventCounter,
  boolean containsImages,
  Spacing padding,
+ float letterSpacing,
+ int fontSize,
  float lineHeight,
  int textAlign) {
  mText = text;
@@ -45,6 +49,8 @@ public ReactTextUpdate(
  mPaddingTop = padding.get(Spacing.TOP);
  mPaddingRight = padding.get(Spacing.END);
  mPaddingBottom = padding.get(Spacing.BOTTOM);
+ mLetterSpacing = letterSpacing;
+ mFontSize = fontSize;
  mLineHeight = lineHeight;
  mTextAlign = textAlign;
  }
@@ -77,6 +83,14 @@ public float getPaddingBottom() {
  return mPaddingBottom;
  }
 
+ public float getLetterSpacing() {
+ return mLetterSpacing;
+ }
+
+ public int getFontSize() {
+ return mFontSize;
+ }
+
  public float getLineHeight() {
  return mLineHeight;
  }

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java

@@ -18,6 +18,7 @@
 import android.widget.TextView;
 
 import com.facebook.csslayout.FloatUtil;
+import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.ReactCompoundView;
 
 public class ReactTextView extends TextView implements ReactCompoundView {
@@ -30,6 +31,7 @@ public class ReactTextView extends TextView implements ReactCompoundView {
  private int mDefaultGravityVertical;
  private boolean mTextIsSelectable;
  private float mLineHeight = Float.NaN;
+ private float mLetterSpacing = Float.NaN;
  private int mTextAlign = Gravity.NO_GRAVITY;
 
  public ReactTextView(Context context) {
@@ -54,6 +56,19 @@ public void setText(ReactTextUpdate update) {
  (int) Math.ceil(update.getPaddingRight()),
  (int) Math.ceil(update.getPaddingBottom()));
 
+ float nextLetterSpacing = update.getLetterSpacing();
+ int fontSize = update.getFontSize();
+ if (!FloatUtil.floatsEqual(mLetterSpacing, nextLetterSpacing)) {
+ mLetterSpacing = nextLetterSpacing;
+ if(Float.isNaN(mLetterSpacing)) {
+ setLetterSpacing((float)0.0);
+ } else {
+ //calculate EM from proper font pixels
+ setLetterSpacing(1+(mLetterSpacing-PixelUtil.toDIPFromPixel(fontSize))/PixelUtil.toDIPFromPixel(fontSize));
+ }
+ }
+
+
  float nextLineHeight = update.getLineHeight();
  if (!FloatUtil.floatsEqual(mLineHeight, nextLineHeight)) {
  mLineHeight = nextLineHeight;

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputShadowNode.java

@@ -87,6 +87,9 @@ public void measure(
  (int) Math.ceil(getPadding().get(Spacing.END)),
  (int) Math.ceil(getPadding().get(Spacing.BOTTOM)));
 
+ editText.setLetterSpacing(getLetterSpacing());
+
+
  if (mNumberOfLines != UNSET) {
  editText.setLines(mNumberOfLines);
  }
@@ -129,6 +132,8 @@ public void onCollectExtraUpdates(UIViewOperationQueue uiViewOperationQueue) {
  mJsEventCount,
  mContainsImages,
  getPadding(),
+ getLetterSpacing(),
+ getFontSize(),
  getEffectiveLineHeight(),
  mTextAlign
  );