Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove ReactTextView Legacy Background Path (#46171)

Browse Source 
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46171

## This Diff

This removes the legacy path from ReactTextView and its view manager.

## This Stack

This removes the non-Style-applicator background management paths of the different native components. There have been multiple conflicting changes, and bugs added bc harder to reason about, which motivates making this change as soon as possible. This also lets us formalize guarantees that BaseViewManager may safely manipulate background styling of all built in native components.

There is one still known issue, where BackgroundStyleApplicator does not propagate I18nManager derived layout direction to borders (compared to Android derived root direction). This is mostly an issue for apps that with LTR and RTL context, or force a layout direction, which I would guess is relatively rare, so my plan is to forward fix this later this by enabling set_android_layout_direction which will solve that problem mopre generically.

Changelog: [Internal]

Reviewed By: cortinico

Differential Revision: D61658083

fbshipit-source-id: b753d4eb45091aa31ea870a684c35b71c1ee5036
This commit is contained in:
Nick Gerleman
2024-09-16 19:14:53 -07:00
committed by Facebook GitHub Bot
parent 6291ff0281
commit b4d28293a6
2 changed files with 30 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextAnchorViewManager.java
+14 -49
View File
@@ -18,12 +18,10 @@ import androidx.annotation.Nullable;
import com.facebook.common.logging.FLog;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.common.ReactConstants;
import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
import com.facebook.react.uimanager.BackgroundStyleApplicator;
import com.facebook.react.uimanager.BaseViewManager;
import com.facebook.react.uimanager.LengthPercentage;
import com.facebook.react.uimanager.LengthPercentageType;
import com.facebook.react.uimanager.PixelUtil;
import com.facebook.react.uimanager.Spacing;
import com.facebook.react.uimanager.ViewDefaults;
import com.facebook.react.uimanager.ViewProps;
@@ -153,36 +151,20 @@ public abstract class ReactTextAnchorViewManager<T extends View, C extends React
},
defaultFloat = Float.NaN)
public void setBorderRadius(ReactTextView view, int index, float borderRadius) {
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
@Nullable
LengthPercentage radius =
Float.isNaN(borderRadius)
? null
: new LengthPercentage(borderRadius, LengthPercentageType.POINT);
BackgroundStyleApplicator.setBorderRadius(view, BorderRadiusProp.values()[index], radius);
} else {
if (!Float.isNaN(borderRadius)) {
borderRadius = PixelUtil.toPixelFromDIP(borderRadius);
}
if (index == 0) {
view.setBorderRadius(borderRadius);
} else {
view.setBorderRadius(borderRadius, index - 1);
}
}
@Nullable
LengthPercentage radius =
Float.isNaN(borderRadius)
? null
: new LengthPercentage(borderRadius, LengthPercentageType.POINT);
BackgroundStyleApplicator.setBorderRadius(view, BorderRadiusProp.values()[index], radius);
}
@ReactProp(name = "borderStyle")
public void setBorderStyle(ReactTextView view, @Nullable String borderStyle) {
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
@Nullable
BorderStyle parsedBorderStyle =
borderStyle == null ? null : BorderStyle.fromString(borderStyle);
BackgroundStyleApplicator.setBorderStyle(view, parsedBorderStyle);
} else {
view.setBorderStyle(borderStyle);
}
@Nullable
BorderStyle parsedBorderStyle =
borderStyle == null ? null : BorderStyle.fromString(borderStyle);
BackgroundStyleApplicator.setBorderStyle(view, parsedBorderStyle);
}
@ReactPropGroup(
@@ -197,14 +179,7 @@ public abstract class ReactTextAnchorViewManager<T extends View, C extends React
},
defaultFloat = Float.NaN)
public void setBorderWidth(ReactTextView view, int index, float width) {
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
BackgroundStyleApplicator.setBorderWidth(view, LogicalEdge.values()[index], width);
} else {
if (!Float.isNaN(width)) {
width = PixelUtil.toPixelFromDIP(width);
}
view.setBorderWidth(SPACING_TYPES[index], width);
}
BackgroundStyleApplicator.setBorderWidth(view, LogicalEdge.values()[index], width);
}
@ReactPropGroup(
@@ -217,11 +192,7 @@ public abstract class ReactTextAnchorViewManager<T extends View, C extends React
},
customType = "Color")
public void setBorderColor(ReactTextView view, int index, @Nullable Integer color) {
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
BackgroundStyleApplicator.setBorderColor(view, LogicalEdge.ALL, color);
} else {
view.setBorderColor(SPACING_TYPES[index], color);
}
BackgroundStyleApplicator.setBorderColor(view, LogicalEdge.ALL, color);
}
@ReactProp(name = ViewProps.INCLUDE_FONT_PADDING, defaultBoolean = true)
@@ -264,17 +235,11 @@ public abstract class ReactTextAnchorViewManager<T extends View, C extends React
@ReactProp(name = ViewProps.BOX_SHADOW, customType = "BoxShadow")
public void setBoxShadow(ReactTextView view, @Nullable ReadableArray shadows) {
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
BackgroundStyleApplicator.setBoxShadow(view, shadows);
}
BackgroundStyleApplicator.setBoxShadow(view, shadows);
}
@Override
public void setBackgroundColor(T view, @ColorInt int backgroundColor) {
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
BackgroundStyleApplicator.setBackgroundColor(view, backgroundColor);
} else {
super.setBackgroundColor(view, backgroundColor);
}
BackgroundStyleApplicator.setBackgroundColor(view, backgroundColor);
}
}
packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextView.java
+16 -52
View File
@@ -36,7 +36,6 @@ import com.facebook.react.bridge.WritableArray;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.common.ReactConstants;
import com.facebook.react.internal.SystraceSection;
import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
import com.facebook.react.uimanager.BackgroundStyleApplicator;
import com.facebook.react.uimanager.LengthPercentage;
import com.facebook.react.uimanager.LengthPercentageType;
@@ -53,7 +52,6 @@ import com.facebook.react.uimanager.style.Overflow;
import com.facebook.react.views.text.internal.span.ReactTagSpan;
import com.facebook.react.views.text.internal.span.TextInlineImageSpan;
import com.facebook.react.views.text.internal.span.TextInlineViewPlaceholderSpan;
import com.facebook.react.views.view.ReactViewBackgroundManager;
import com.facebook.yoga.YogaMeasureMode;
import java.util.ArrayList;
import java.util.Collections;
@@ -80,7 +78,6 @@ public class ReactTextView extends AppCompatTextView implements ReactCompoundVie
private boolean mShouldAdjustSpannableFontSize;
private Overflow mOverflow = Overflow.VISIBLE;
private ReactViewBackgroundManager mReactBackgroundManager;
private Spannable mSpanned;
public ReactTextView(Context context) {
@@ -94,12 +91,6 @@ public class ReactTextView extends AppCompatTextView implements ReactCompoundVie
* ReactTextView is recycled.
*/
private void initView() {
if (mReactBackgroundManager != null) {
// make sure old background manager doesn't have any references back to this View
mReactBackgroundManager.cleanup();
}
mReactBackgroundManager = new ReactViewBackgroundManager(this);
mNumberOfLines = ViewDefaults.NUMBER_OF_LINES;
mAdjustsFontSizeToFit = false;
mLinkifyMaskType = 0;
@@ -118,9 +109,7 @@ public class ReactTextView extends AppCompatTextView implements ReactCompoundVie
// Set default field values
initView();
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
BackgroundStyleApplicator.reset(this);
}
BackgroundStyleApplicator.reset(this);
// Defaults for these fields:
// https://github.com/aosp-mirror/platform_frameworks_base/blob/master/core/java/android/widget/TextView.java#L1061
@@ -396,12 +385,8 @@ public class ReactTextView extends AppCompatTextView implements ReactCompoundVie
setText(getSpanned());
}
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
if (mOverflow != Overflow.VISIBLE) {
BackgroundStyleApplicator.clipToPaddingBox(this, canvas);
}
} else {
mReactBackgroundManager.maybeClipToPaddingBox(canvas);
if (mOverflow != Overflow.VISIBLE) {
BackgroundStyleApplicator.clipToPaddingBox(this, canvas);
}
super.onDraw(canvas);
@@ -709,28 +694,16 @@ public class ReactTextView extends AppCompatTextView implements ReactCompoundVie
@Override
public void setBackgroundColor(int color) {
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
BackgroundStyleApplicator.setBackgroundColor(this, color);
} else {
mReactBackgroundManager.setBackgroundColor(color);
}
BackgroundStyleApplicator.setBackgroundColor(this, color);
}
public void setBorderWidth(int position, float width) {
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
BackgroundStyleApplicator.setBorderWidth(
this, LogicalEdge.values()[position], PixelUtil.toDIPFromPixel(width));
} else {
mReactBackgroundManager.setBorderWidth(position, width);
}
BackgroundStyleApplicator.setBorderWidth(
this, LogicalEdge.values()[position], PixelUtil.toDIPFromPixel(width));
}
public void setBorderColor(int position, @Nullable Integer color) {
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
BackgroundStyleApplicator.setBorderColor(this, LogicalEdge.values()[position], color);
} else {
mReactBackgroundManager.setBorderColor(position, color);
}
BackgroundStyleApplicator.setBorderColor(this, LogicalEdge.values()[position], color);
}
public void setBorderRadius(float borderRadius) {
@@ -738,26 +711,18 @@ public class ReactTextView extends AppCompatTextView implements ReactCompoundVie
}
public void setBorderRadius(float borderRadius, int position) {
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
@Nullable
LengthPercentage radius =
Float.isNaN(borderRadius)
? null
: new LengthPercentage(
PixelUtil.toDIPFromPixel(borderRadius), LengthPercentageType.POINT);
BackgroundStyleApplicator.setBorderRadius(this, BorderRadiusProp.values()[position], radius);
} else {
mReactBackgroundManager.setBorderRadius(borderRadius, position);
}
@Nullable
LengthPercentage radius =
Float.isNaN(borderRadius)
? null
: new LengthPercentage(
PixelUtil.toDIPFromPixel(borderRadius), LengthPercentageType.POINT);
BackgroundStyleApplicator.setBorderRadius(this, BorderRadiusProp.values()[position], radius);
}
public void setBorderStyle(@Nullable String style) {
if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) {
BackgroundStyleApplicator.setBorderStyle(
this, style == null ? null : BorderStyle.fromString(style));
} else {
mReactBackgroundManager.setBorderStyle(style);
}
BackgroundStyleApplicator.setBorderStyle(
this, style == null ? null : BorderStyle.fromString(style));
}
public void setSpanned(Spannable spanned) {
@@ -810,7 +775,6 @@ public class ReactTextView extends AppCompatTextView implements ReactCompoundVie
mOverflow = parsedOverflow == null ? Overflow.VISIBLE : parsedOverflow;
}
mReactBackgroundManager.setOverflow(overflow);
invalidate();
}
}