status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix text, textinput padding 

Summary:
The issue here is that on some devices (ie. Nexus 5X), under certain
circumstances, the text gets trimmed. A simple example is P56651885, where the
text is at the end of the line and some padding is set. Digging further with
P56659346, I found that only the paddings that have integer pixel values work
correctly: these are the values P56656483, and this is the screenshot of that
test: {F63510378}.

It turns out that when we set the padding directly on the TextView, we have to
convert from float to int, and use `ceil` in the process. We lose some precision
here, since the csslayout will use the float values to compute the layout of the
views. The ideal solution would be to just set the float values on the TextView,
but since we can't do that, we should avoid using `ceil` instead of `floor`
since it can have bad side-effects in some scenarios.
Going way back to D1881202 and D1710471, we started using `ceil` because that
is how android handles non-integer
density ratios: "This figure is the factor by which you should multiply the dp
units on order to get the actual pixel count for the current screen. (Then add
0.5f to round the figure up to the nearest whole number, when converting to an
integer.)", see https://developer.android.com/guide/practices/screens_support.html.

Reviewed By: emilsjolander

Differential Revision: D3876310

fbshipit-source-id: 701c05a8b1a045d4e06fc89ffe79162c1eecb62c
This commit is contained in:
Andrei Coman 2016-09-19 02:48:33 -07:00 committed by Facebook Github Bot
parent 4941cbcf1e
commit bdff10b4ea
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,8 @@
package com.facebook.react.views.text;
import javax.annotation.Nullable;
import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
@ -24,8 +26,6 @@ import com.facebook.react.uimanager.ReactCompoundView;
import com.facebook.react.uimanager.ViewDefaults;
import com.facebook.react.views.view.ReactViewBackgroundDrawable;
import javax.annotation.Nullable;
public class ReactTextView extends TextView implements ReactCompoundView {
private static final ViewGroup.LayoutParams EMPTY_LAYOUT_PARAMS =
@ -59,10 +59,10 @@ public class ReactTextView extends TextView implements ReactCompoundView {
}
setText(update.getText());
setPadding(
(int) Math.ceil(update.getPaddingLeft()),
(int) Math.ceil(update.getPaddingTop()),
(int) Math.ceil(update.getPaddingRight()),
(int) Math.ceil(update.getPaddingBottom()));
(int) Math.floor(update.getPaddingLeft()),
(int) Math.floor(update.getPaddingTop()),
(int) Math.floor(update.getPaddingRight()),
(int) Math.floor(update.getPaddingBottom()));
int nextTextAlign = update.getTextAlign();
if (mTextAlign != nextTextAlign) {

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

@ -82,10 +82,10 @@ public class ReactTextInputShadowNode extends ReactTextShadowNode implements
(int) Math.ceil(PixelUtil.toPixelFromSP(ViewDefaults.FONT_SIZE_SP)) : mFontSize);
mComputedPadding = spacingToFloatArray(getPadding());
editText.setPadding(
(int) Math.ceil(getPadding().get(Spacing.START)),
(int) Math.ceil(getPadding().get(Spacing.TOP)),
(int) Math.ceil(getPadding().get(Spacing.END)),
(int) Math.ceil(getPadding().get(Spacing.BOTTOM)));
(int) Math.floor(getPadding().get(Spacing.START)),
(int) Math.floor(getPadding().get(Spacing.TOP)),
(int) Math.floor(getPadding().get(Spacing.END)),
(int) Math.floor(getPadding().get(Spacing.BOTTOM)));
if (mNumberOfLines != UNSET) {
editText.setLines(mNumberOfLines);