Padding is not overriding paddingTop, paddingLeft, paddingHorizontal, etc...

Is this a bug report?

Yes, padding attribute is not overriding individual padding attributes like paddingTop, paddingLeft, paddingVertical, etc…

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS Sierra 10.12.6 Node: 7.9.0 Yarn: 0.23.2 npm: 4.5.0 Watchman: 4.7.0 Xcode: Xcode 8.2.1 Build version 8C1002 Android Studio: 2.3 AI-162.3871768

Packages: (wanted => installed) react: 16.0.0-beta.5 => 16.0.0-beta.5 react-native: 0.49.3 => 0.49.3

Steps to Reproduce

1. Create default styles for a wrapper component and assign padding values

const ScreenStyles = {
  paddingTop: 0,
  paddingLeft: 10,
  paddingRight: 10,
  paddingBottom: 10,
};

You also can try with paddingHorizontal and paddingVertical

1. Declare new styles for custom screen, extending from ScreenStyles:

const CustomScreenStyles = StyleSheet.create({
  screen: {
    ...ScreenStyles,
    padding: 50,
  }
});

Expected Behavior

Extended padding attribute must override individual values like paddingTop, paddingLeft, paddingVertical, etc…

Actual Behavior

padding attribute is not overriding individual padding attributes like paddingTop, paddingLeft, paddingVertical, etc…

Reproducible Demo

https://snack.expo.io/rkPlT3s3-

[vdpdev]

This issue is still reproducible but in array (<View style={[someStyle, someAnotherStyle]} />) react-native version 0.54.0

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  defaultStyle: {
    paddingTop: 8,
  },
  customStyle: {
    padding: 24,
  },
});

<View style={[styles.defaultStyle, styles.customStyle]}><Text>some text</Text></View>

Actual result - component, that are receiving style, have paddingTop equals to 8 Expected result - component, that are receiving style, will have paddingTop equals to 24

[devth]

This is still an issue. Makes it hard to control layout when multiple styles are being merged (incorrectly). @facuescobar can you re-open it?