Skip to content

Commit

Permalink
Fix text, textinput padding
Browse files Browse the repository at this point in the history
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
  • Loading branch information
andreicoman11 authored and Facebook Github Bot committed Sep 19, 2016
1 parent 4941cbc commit bdff10b
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 10 deletions.
Expand Up @@ -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;
Expand All @@ -24,8 +26,6 @@
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 =
Expand Down Expand Up @@ -59,10 +59,10 @@ public void setText(ReactTextUpdate update) {
}
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) {
Expand Down
Expand Up @@ -82,10 +82,10 @@ public void measure(
(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);
Expand Down

0 comments on commit bdff10b

Please sign in to comment.