Fix extreme TextInput slowness on Android

gnprice · gnprice · commit 9c1eaeff8519 · 2018-06-10T22:58:01.000-07:00
This reverts 5898817 "Implement letterSpacing on Android >= 5.0". Testing shows that that commit is the cause of #19126, where in a controlled TextInput after some text is first added, then deleted, further interaction with the TextInput becomes extremely slow. Fixes #19126.
diff --git a/RNTester/js/TextExample.android.js b/RNTester/js/TextExample.android.js
@@ -360,45 +360,6 @@ class TextExample extends React.Component<{}> {
             magnetic potentialities rather than client-focused interfaces.
           </Text>
         </RNTesterBlock>
-        <RNTesterBlock title="Letter Spacing">
-          <View>
-            <Text style={{letterSpacing: 0}}>letterSpacing = 0</Text>
-            <Text style={{letterSpacing: 2, marginTop: 5}}>
-              letterSpacing = 2
-            </Text>
-            <Text style={{letterSpacing: 9, marginTop: 5}}>
-              letterSpacing = 9
-            </Text>
-            <View style={{flexDirection: 'row'}}>
-              <Text
-                style={{
-                  fontSize: 12,
-                  letterSpacing: 2,
-                  backgroundColor: 'fuchsia',
-                  marginTop: 5,
-                }}>
-                With size and background color
-              </Text>
-            </View>
-            <Text style={{letterSpacing: -1, marginTop: 5}}>
-              letterSpacing = -1
-            </Text>
-            <Text
-              style={{
-                letterSpacing: 3,
-                backgroundColor: '#dddddd',
-                marginTop: 5,
-              }}>
-              [letterSpacing = 3]
-              <Text style={{letterSpacing: 0, backgroundColor: '#bbbbbb'}}>
-                [Nested letterSpacing = 0]
-              </Text>
-              <Text style={{letterSpacing: 6, backgroundColor: '#eeeeee'}}>
-                [Nested letterSpacing = 6]
-              </Text>
-            </Text>
-          </View>
-        </RNTesterBlock>
         <RNTesterBlock title="Empty Text">
           <Text />
         </RNTesterBlock>
diff --git a/RNTester/js/TextExample.ios.js b/RNTester/js/TextExample.ios.js
@@ -583,34 +583,9 @@ exports.examples = [
           <Text style={{letterSpacing: 9, marginTop: 5}}>
             letterSpacing = 9
           </Text>
-          <View style={{flexDirection: 'row'}}>
-            <Text
-              style={{
-                fontSize: 12,
-                letterSpacing: 2,
-                backgroundColor: 'fuchsia',
-                marginTop: 5,
-              }}>
-              With size and background color
-            </Text>
-          </View>
           <Text style={{letterSpacing: -1, marginTop: 5}}>
             letterSpacing = -1
           </Text>
-          <Text
-            style={{
-              letterSpacing: 3,
-              backgroundColor: '#dddddd',
-              marginTop: 5,
-            }}>
-            [letterSpacing = 3]
-            <Text style={{letterSpacing: 0, backgroundColor: '#bbbbbb'}}>
-              [Nested letterSpacing = 0]
-            </Text>
-            <Text style={{letterSpacing: 6, backgroundColor: '#eeeeee'}}>
-              [Nested letterSpacing = 6]
-            </Text>
-          </Text>
         </View>
       );
     },
diff --git a/RNTester/js/TextInputExample.android.js b/RNTester/js/TextInputExample.android.js
@@ -576,31 +576,6 @@ exports.examples = [
       );
     },
   },
-  {
-    title: 'letterSpacing',
-    render: function() {
-      return (
-        <View>
-          <TextInput
-            style={[styles.singleLine, {letterSpacing: 0}]}
-            placeholder="letterSpacing = 0"
-          />
-          <TextInput
-            style={[styles.singleLine, {letterSpacing: 2}]}
-            placeholder="letterSpacing = 2"
-          />
-          <TextInput
-            style={[styles.singleLine, {letterSpacing: 9}]}
-            placeholder="letterSpacing = 9"
-          />
-          <TextInput
-            style={[styles.singleLine, {letterSpacing: -1}]}
-            placeholder="letterSpacing = -1"
-          />
-        </View>
-      );
-    },
-  },
   {
     title: 'Passwords',
     render: function() {
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java
@@ -88,7 +88,6 @@ 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 ELLIPSIZE_MODE = "ellipsizeMode";
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLetterSpacingSpan.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/CustomLetterSpacingSpan.java
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java
@@ -118,14 +118,6 @@ private static void buildSpannedFromShadowNode(
             new SetSpanOperation(
                 start, end, new BackgroundColorSpan(textShadowNode.mBackgroundColor)));
       }
-      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
-        if (textShadowNode.mLetterSpacing != Float.NaN) {
-          ops.add(new SetSpanOperation(
-            start,
-            end,
-            new CustomLetterSpacingSpan(textShadowNode.mLetterSpacing)));
-        }
-      }
       if (textShadowNode.mFontSize != UNSET) {
         ops.add(new SetSpanOperation(start, end, new AbsoluteSizeSpan(textShadowNode.mFontSize)));
       }
@@ -236,7 +228,6 @@ private static int parseNumericFontWeight(String fontWeightString) {
   }
 
   protected float mLineHeight = Float.NaN;
-  protected float mLetterSpacing = Float.NaN;
   protected boolean mIsColorSet = false;
   protected boolean mAllowFontScaling = true;
   protected int mColor;
@@ -247,7 +238,6 @@ private static int parseNumericFontWeight(String fontWeightString) {
   protected int mFontSize = UNSET;
   protected float mFontSizeInput = UNSET;
   protected float mLineHeightInput = UNSET;
-  protected float mLetterSpacingInput = Float.NaN;
   protected int mTextAlign = Gravity.NO_GRAVITY;
   protected int mTextBreakStrategy =
       (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) ? 0 : Layout.BREAK_STRATEGY_HIGH_QUALITY;
@@ -366,22 +356,12 @@ public void setLineHeight(float lineHeight) {
     markUpdated();
   }
 
-  @ReactProp(name = ViewProps.LETTER_SPACING, defaultFloat = Float.NaN)
-  public void setLetterSpacing(float letterSpacing) {
-    mLetterSpacingInput = letterSpacing;
-    mLetterSpacing = mAllowFontScaling
-      ? PixelUtil.toPixelFromSP(mLetterSpacingInput)
-      : PixelUtil.toPixelFromDIP(mLetterSpacingInput);
-    markUpdated();
-  }
-
   @ReactProp(name = ViewProps.ALLOW_FONT_SCALING, defaultBoolean = true)
   public void setAllowFontScaling(boolean allowFontScaling) {
     if (allowFontScaling != mAllowFontScaling) {
       mAllowFontScaling = allowFontScaling;
       setFontSize(mFontSizeInput);
       setLineHeight(mLineHeightInput);
-      setLetterSpacing(mLetterSpacingInput);
       markUpdated();
     }
   }
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java
@@ -33,7 +33,6 @@
 import android.widget.EditText;
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.bridge.ReactContext;
-import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.views.text.CustomStyleSpan;
 import com.facebook.react.views.text.ReactTagSpan;
@@ -82,7 +81,6 @@ public class ReactEditText extends EditText {
   private final InternalKeyListener mKeyListener;
   private boolean mDetectScrollMovement = false;
   private boolean mOnKeyPress = false;
-  private float mLetterSpacingPt = 0;
 
   private ReactViewBackgroundManager mReactBackgroundManager;
 
@@ -634,29 +632,6 @@ public void setBorderStyle(@Nullable String style) {
     mReactBackgroundManager.setBorderStyle(style);
   }
 
-  public void setLetterSpacingPt(float letterSpacingPt) {
-    mLetterSpacingPt = letterSpacingPt;
-    updateLetterSpacing();
-  }
-
-  @Override
-  public void setTextSize (float size) {
-    super.setTextSize(size);
-    updateLetterSpacing();
-  }
-
-  @Override
-  public void setTextSize (int unit, float size) {
-    super.setTextSize(unit, size);
-    updateLetterSpacing();
-  }
-
-  protected void updateLetterSpacing() {
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
-      setLetterSpacing(PixelUtil.toPixelFromSP(mLetterSpacingPt) / getTextSize());
-    }
-  }
-
   /**
    * This class will redirect *TextChanged calls to the listeners only in the case where the text
    * is changed by the user, and not explicitly set by JS.
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java
@@ -314,14 +314,6 @@ public void setOnKeyPress(final ReactEditText view, boolean onKeyPress) {
     view.setOnKeyPress(onKeyPress);
   }
 
-  // Sets the letter spacing as an absolute point size.
-  // This extra handling, on top of what ReactBaseTextShadowNode already does, is required for the
-  // correct display of spacing in placeholder (hint) text.
-  @ReactProp(name = ViewProps.LETTER_SPACING, defaultFloat = 0)
-  public void setLetterSpacing(ReactEditText view, float letterSpacing) {
-    view.setLetterSpacingPt(letterSpacing);
-  }
-
   @ReactProp(name = "placeholder")
   public void setPlaceholder(ReactEditText view, @Nullable String placeholder) {
     view.setHint(placeholder);
