Skip to content

feat(android): background-size, position and repeat styles #52282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
intergalacticspacehighway wants to merge 11 commits into from
Closed

feat(android): background-size, position and repeat styles #52282

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9128da3
android changes
intergalacticspacehighway Jun 26, 2025
00e2191
merge main
intergalacticspacehighway Sep 29, 2025
d65e112
add background image drawable
intergalacticspacehighway Sep 29, 2025
34c041c
remove background size keyword
intergalacticspacehighway Sep 29, 2025
bcf8e10
Merge branch 'main' into feat/background-styles-android
intergalacticspacehighway Sep 29, 2025
46772a0
nit cleanup
intergalacticspacehighway Sep 29, 2025
7c449aa
Update packages/react-native/ReactAndroid/src/main/java/com/facebook/…
intergalacticspacehighway Sep 30, 2025
478dc99
Update packages/react-native/ReactAndroid/src/main/java/com/facebook/…
intergalacticspacehighway Sep 30, 2025
a6f8253
move update path and canvas save call
intergalacticspacehighway Sep 30, 2025
0b8a3a3
add division by zero defence check for rounded values
intergalacticspacehighway Sep 30, 2025
540aa4f
Merge branch 'main' into feat/background-styles-android
intergalacticspacehighway Oct 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions ...tive/ReactAndroid/src/main/java/com/facebook/react/uimanager/BackgroundStyleApplicator.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ import com.facebook.react.uimanager.drawable.MIN_OUTSET_BOX_SHADOW_SDK_VERSION
import com.facebook.react.uimanager.drawable.OutlineDrawable
import com.facebook.react.uimanager.drawable.OutsetBoxShadowDrawable
import com.facebook.react.uimanager.style.BackgroundImageLayer
import com.facebook.react.uimanager.style.BackgroundPosition
import com.facebook.react.uimanager.style.BackgroundRepeat
import com.facebook.react.uimanager.style.BackgroundSize
import com.facebook.react.uimanager.style.BorderInsets
import com.facebook.react.uimanager.style.BorderRadiusProp
import com.facebook.react.uimanager.style.BorderRadiusStyle
Expand Down Expand Up @@ -76,6 +79,36 @@ public object BackgroundStyleApplicator {
}
}

@JvmStatic
public fun setBackgroundSize(
view: View,
backgroundSizes: List<BackgroundSize>?
): Unit {
if (ReactNativeFeatureFlags.enableNewBackgroundAndBorderDrawables()) {
ensureBackgroundDrawable(view).backgroundSize = backgroundSizes
}
}

@JvmStatic
public fun setBackgroundPosition(
view: View,
backgroundPositions: List<BackgroundPosition>?
): Unit {
if (ReactNativeFeatureFlags.enableNewBackgroundAndBorderDrawables()) {
ensureBackgroundDrawable(view).backgroundPosition = backgroundPositions
}
}

@JvmStatic
public fun setBackgroundRepeat(
view: View,
backgroundRepeats: List<BackgroundRepeat>?
): Unit {
if (ReactNativeFeatureFlags.enableNewBackgroundAndBorderDrawables()) {

@intergalacticspacehighway intergalacticspacehighway Jun 26, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only enabled for new drawables as it is true by default now.

ensureBackgroundDrawable(view).backgroundRepeat = backgroundRepeats
}
}

@JvmStatic
@ColorInt
public fun getBackgroundColor(view: View): Int? {
Expand Down
16 changes: 7 additions & 9 deletions .../react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/LengthPercentage.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,24 @@ public data class LengthPercentage(
) {
public companion object {
@JvmStatic
public fun setFromDynamic(dynamic: Dynamic): LengthPercentage? {
public fun setFromDynamic(dynamic: Dynamic, allowNegative: Boolean = false): LengthPercentage? {

@intergalacticspacehighway intergalacticspacehighway Jun 26, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did not like this change, but we need to support negative values for background-position. lmk if I should take some other approach!

@jorge-cab jorge-cab Sep 23, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is fine.. I'll think about it a bit

return when (dynamic.type) {
ReadableType.Number -> {
val value = dynamic.asDouble()
if (value >= 0f) {
LengthPercentage(value.toFloat(), LengthPercentageType.POINT)
} else {
null
if (value < 0 && !allowNegative) {
return null
}
LengthPercentage(value.toFloat(), LengthPercentageType.POINT)
}
ReadableType.String -> {
val s = dynamic.asString()
if (s != null && s.endsWith("%")) {
try {
val value = s.substring(0, s.length - 1).toFloat()
if (value >= 0f) {
LengthPercentage(value, LengthPercentageType.PERCENT)
} else {
null
if (value < 0 && !allowNegative) {
return null
}
LengthPercentage(value, LengthPercentageType.PERCENT)
} catch (e: NumberFormatException) {
FLog.w(ReactConstants.TAG, "Invalid percentage format: $s")
null
Expand Down
3 changes: 3 additions & 0 deletions packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,9 @@ public object ViewProps {
public const val ENABLED: String = "enabled"
public const val BACKGROUND_COLOR: String = "backgroundColor"
public const val BACKGROUND_IMAGE: String = "experimental_backgroundImage"
public const val BACKGROUND_SIZE: String = "experimental_backgroundSize"
public const val BACKGROUND_POSITION: String = "experimental_backgroundPosition"
public const val BACKGROUND_REPEAT: String = "experimental_backgroundRepeat"
public const val FOREGROUND_COLOR: String = "foregroundColor"
public const val COLOR: String = "color"
public const val FONT_SIZE: String = "fontSize"
Expand Down
Loading
Loading