diff --git a/packages/react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js b/packages/react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js index a77e5b42f71..2e6c9598658 100644 --- a/packages/react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js +++ b/packages/react-native/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js @@ -739,6 +739,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = { }, borderTopLeftRadius: true, borderTopColor: {process: require('../../StyleSheet/processColor').default}, + experimental_boxShadow: { + process: require('../../StyleSheet/processBoxShadow').default, + }, }, }; diff --git a/packages/react-native/ReactAndroid/api/ReactAndroid.api b/packages/react-native/ReactAndroid/api/ReactAndroid.api index c381214fd2d..ff4e2afa4ac 100644 --- a/packages/react-native/ReactAndroid/api/ReactAndroid.api +++ b/packages/react-native/ReactAndroid/api/ReactAndroid.api @@ -8025,10 +8025,13 @@ public class com/facebook/react/views/textinput/ReactTextInputManager : com/face public fun setAutoCapitalize (Lcom/facebook/react/views/textinput/ReactEditText;Lcom/facebook/react/bridge/Dynamic;)V public fun setAutoCorrect (Lcom/facebook/react/views/textinput/ReactEditText;Ljava/lang/Boolean;)V public fun setAutoFocus (Lcom/facebook/react/views/textinput/ReactEditText;Z)V + public synthetic fun setBackgroundColor (Landroid/view/View;I)V + public fun setBackgroundColor (Lcom/facebook/react/views/textinput/ReactEditText;I)V public fun setBorderColor (Lcom/facebook/react/views/textinput/ReactEditText;ILjava/lang/Integer;)V public fun setBorderRadius (Lcom/facebook/react/views/textinput/ReactEditText;IF)V public fun setBorderStyle (Lcom/facebook/react/views/textinput/ReactEditText;Ljava/lang/String;)V public fun setBorderWidth (Lcom/facebook/react/views/textinput/ReactEditText;IF)V + public fun setBoxShadow (Lcom/facebook/react/views/textinput/ReactEditText;Lcom/facebook/react/bridge/ReadableArray;)V public fun setCaretHidden (Lcom/facebook/react/views/textinput/ReactEditText;Z)V public fun setColor (Lcom/facebook/react/views/textinput/ReactEditText;Ljava/lang/Integer;)V public fun setContextMenuHidden (Lcom/facebook/react/views/textinput/ReactEditText;Z)V diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java index c96859ccb2c..e5cb44905c6 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java @@ -49,10 +49,19 @@ import com.facebook.react.bridge.ReactContext; import com.facebook.react.bridge.ReactSoftExceptionLogger; import com.facebook.react.common.ReactConstants; import com.facebook.react.common.build.ReactBuildConfig; +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; +import com.facebook.react.uimanager.PixelUtil; import com.facebook.react.uimanager.ReactAccessibilityDelegate; import com.facebook.react.uimanager.StateWrapper; import com.facebook.react.uimanager.UIManagerModule; import com.facebook.react.uimanager.events.EventDispatcher; +import com.facebook.react.uimanager.style.BorderRadiusProp; +import com.facebook.react.uimanager.style.BorderStyle; +import com.facebook.react.uimanager.style.LogicalEdge; +import com.facebook.react.uimanager.style.Overflow; import com.facebook.react.views.text.ReactTextUpdate; import com.facebook.react.views.text.ReactTypefaceUtils; import com.facebook.react.views.text.TextAttributes; @@ -122,6 +131,7 @@ public class ReactEditText extends AppCompatEditText { private boolean mDidAttachToWindow = false; private boolean mSelectTextOnFocus = false; private @Nullable String mPlaceholder = null; + private Overflow mOverflow = Overflow.VISIBLE; private final ReactViewBackgroundManager mReactBackgroundManager; @@ -1077,31 +1087,65 @@ public class ReactEditText extends AppCompatEditText { @Override public void setBackgroundColor(int color) { - mReactBackgroundManager.setBackgroundColor(color); + if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) { + BackgroundStyleApplicator.setBackgroundColor(this, color); + } else { + mReactBackgroundManager.setBackgroundColor(color); + } } public void setBorderWidth(int position, float width) { - mReactBackgroundManager.setBorderWidth(position, width); + if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) { + BackgroundStyleApplicator.setBorderWidth( + this, LogicalEdge.values()[position], PixelUtil.toDIPFromPixel(width)); + } else { + mReactBackgroundManager.setBorderWidth(position, width); + } } public void setBorderColor(int position, @Nullable Integer color) { - mReactBackgroundManager.setBorderColor(position, color); + if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) { + BackgroundStyleApplicator.setBorderColor(this, LogicalEdge.values()[position], color); + } else { + mReactBackgroundManager.setBorderColor(position, color); + } } public int getBorderColor(int position) { - return mReactBackgroundManager.getBorderColor(position); + if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) { + @Nullable + Integer borderColor = + BackgroundStyleApplicator.getBorderColor(this, LogicalEdge.values()[position]); + return borderColor == null ? Color.TRANSPARENT : borderColor; + } else { + return mReactBackgroundManager.getBorderColor(position); + } } public void setBorderRadius(float borderRadius) { - mReactBackgroundManager.setBorderRadius(borderRadius); + setBorderRadius(borderRadius, BorderRadiusProp.BORDER_RADIUS.ordinal()); } public void setBorderRadius(float borderRadius, int position) { - mReactBackgroundManager.setBorderRadius(borderRadius, position); + if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) { + @Nullable + LengthPercentage radius = + Float.isNaN(borderRadius) + ? null + : new LengthPercentage(borderRadius, LengthPercentageType.POINT); + BackgroundStyleApplicator.setBorderRadius(this, BorderRadiusProp.values()[position], radius); + } else { + mReactBackgroundManager.setBorderRadius(borderRadius, position); + } } public void setBorderStyle(@Nullable String style) { - mReactBackgroundManager.setBorderStyle(style); + if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) { + BackgroundStyleApplicator.setBorderStyle( + this, style == null ? null : BorderStyle.fromString(style)); + } else { + mReactBackgroundManager.setBorderStyle(style); + } } public void setLetterSpacingPt(float letterSpacingPt) { @@ -1248,12 +1292,20 @@ public class ReactEditText extends AppCompatEditText { } public void setOverflow(@Nullable String overflow) { + mOverflow = overflow == null ? Overflow.VISIBLE : Overflow.fromString(overflow); mReactBackgroundManager.setOverflow(overflow); } @Override public void onDraw(Canvas canvas) { - mReactBackgroundManager.maybeClipToPaddingBox(canvas); + if (ReactNativeFeatureFlags.enableBackgroundStyleApplicator()) { + if (mOverflow != Overflow.VISIBLE) { + BackgroundStyleApplicator.clipToPaddingBox(this, canvas); + } + } else { + mReactBackgroundManager.maybeClipToPaddingBox(canvas); + } + super.onDraw(canvas); } diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java index 7e0c3fccf16..cd5c6325ff7 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java @@ -29,6 +29,7 @@ import android.view.View; import android.view.ViewGroup; import android.view.inputmethod.EditorInfo; import android.widget.TextView; +import androidx.annotation.ColorInt; import androidx.annotation.Nullable; import androidx.autofill.HintConstants; import androidx.core.content.ContextCompat; @@ -44,9 +45,13 @@ import com.facebook.react.bridge.WritableNativeMap; import com.facebook.react.common.MapBuilder; import com.facebook.react.common.ReactConstants; import com.facebook.react.common.mapbuffer.MapBuffer; +import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags; import com.facebook.react.module.annotations.ReactModule; +import com.facebook.react.uimanager.BackgroundStyleApplicator; import com.facebook.react.uimanager.BaseViewManager; import com.facebook.react.uimanager.LayoutShadowNode; +import com.facebook.react.uimanager.LengthPercentage; +import com.facebook.react.uimanager.LengthPercentageType; import com.facebook.react.uimanager.PixelUtil; import com.facebook.react.uimanager.ReactStylesDiffMap; import com.facebook.react.uimanager.Spacing; @@ -58,6 +63,9 @@ import com.facebook.react.uimanager.ViewProps; import com.facebook.react.uimanager.annotations.ReactProp; import com.facebook.react.uimanager.annotations.ReactPropGroup; import com.facebook.react.uimanager.events.EventDispatcher; +import com.facebook.react.uimanager.style.BorderRadiusProp; +import com.facebook.react.uimanager.style.BorderStyle; +import com.facebook.react.uimanager.style.LogicalEdge; import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper; import com.facebook.react.views.scroll.ScrollEvent; import com.facebook.react.views.scroll.ScrollEventType; @@ -949,20 +957,37 @@ public class ReactTextInputManager extends BaseViewManager