[BUG] React-native - Style prop does not override component styling

[odusseys]

Environment

System:

• OS: macOS 13.0.1
• CPU: (8) arm64 Apple M1
• Memory: 127.94 MB / 16.00 GB
• Shell: 5.8.1 - /bin/zsh

Binaries:

• Node: 18.12.1 - /usr/local/bin/node
• Yarn: 1.22.19 - /usr/local/bin/yarn
• npm: 8.19.2 - /usr/local/bin/npm

npmPackages:

• styled-components: ^6.0.0-rc.3 => 6.0.0-rc.3

(note: using styled-components/native here)

Reproduction

const Container = styled.View`
  padding: 16px;
`

const Test = () => {
  return (
    <Container style={{padding: 0}}>
      <Text>test</Text>
    </Container>
  )
}

Steps to reproduce

Create and display the component above

Expected Behavior

Padding on the container is 0.

Actual Behavior

Padding on the container is 16px.

[abumalick]

This issue is also in 6.0.7. Here are some remarks about the bug:

• It does overrides for some properties (background-color) and it does not override for other properties (border-color, border-width, padding)
• on android it seems that border-color override is working as expected (but not border-width and padding)

I pushed a reproduction repository built with expo here: https://github.com/abumalick/expo-styled-component-6-ios-bug It includes instructions.

[AlekseyBurachik]

Any updates here? Have the same issue

[Lenovis]

After updating styled-components to version ^6.0.4, we encountered issues with overriding native params on Android. The specific problems include:

1. Background Color Override:

   • Previously, the background color wasn't correctly overridden, and the default white was used instead of our theme's white.
   • A workaround was implemented by creating a separate whiteMain color in our theme.

2. BorderRadius Prop:

   • Passing borderRadius through the theme with string parameters like 'rounded', 'roundedXl', etc., results in an error on Android.
   • The error message is: "Error while updating property 'borderRadius' of a view managed by: RCTView java.lang.String cannot be cast to java.lang.Double."

Environment:

• OS: macOS 14.1
• CPU: (10) arm64 Apple M1 Pro
• Memory: 131.38 MB / 16.00 GB
• Shell: 5.9 - /bin/zsh

Binaries:

• Node: 21.1.0 - /opt/homebrew/bin/node
• Yarn: 1.22.19 - /opt/homebrew/bin/yarn
• npm: 10.2.0 - /opt/homebrew/bin/npm
• Watchman: 2023.10.23.00 - /opt/homebrew/bin/watchman

npmPackages:

• babel-plugin-styled-components: ^2.1.4 => 2.1.4
• styled-components: 6.0.4 => 6.0.4 (same issue persists on 6.1.1)

Steps to Reproduce:

1. Update styled-components to version 6.0.4 or 6.1.1.
2. Observe issues with background color override and borderRadius prop on Android.

Expected Behavior:

• Background color should be overridden according to the theme.
• borderRadius prop should accept string parameters without throwing errors on Android when overridden.

Additional Information:

• Any other relevant details, code snippets, or context that might help in resolving the issue.

[DiegoskiMolinoski]

I'm facing the same issue as @Lenovis with the borderRadius param after updating to 6.1.8 version