Side effects of ReactNativeViewViewConfig.js

React Native version:

System:
    OS: macOS 10.15
    CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz
    Memory: 46.58 MB / 16.00 GB
    Shell: 3.0.2 - /usr/local/bin/fish
  Binaries:
    Node: 12.9.1 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.10.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.2 => 0.61.2 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce

1. Render a View: <View style={{ width: 100, height: 100, backgroundColor: 'red' }} backgroundColor="blue" />

Expected behavior

The View should have red background.

Actual behavior

The background color is blue. The prop backgroundColor overrides backgroundColor in style.

This happens because ReactNativeRenderer uses validAttributes from ReactNativeViewConfig to know if a prop is valid or not. validAttributes both have view style properties directly in the root, as well as inside the style property.

It is really troublesome for us when passing props with the same name as style props to our styled components.

Is this intentional @rickhanlonii? I can’t find it anywhere in the documentation.

[christianbach]

@rickhanlonii I did some digging and this todo comment caught my eye

  // Unfortunately, the current setup declares style properties as top-level
  // props. This makes it so we allow style properties in the `style` prop.
  // TODO: Move style properties into a `style` prop and disallow them as
  // top-level props on the native side.

https://github.com/facebook/react-native/blob/91f139b94118fe8db29728ea8ad855fc4a13f743/Libraries/ReactNative/getNativeComponentAttributes.js#L72

[rickhanlonii]

Re-opening this because I don’t think the concerns have been resolved.