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

[facuescobar]

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

2. 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-

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[facuescobar]

This issue has not been fixed, here's a new demo

https://snack.expo.io/SkUA0PWff

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[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

[a6051529]

I also face the same problem，
listItem: { padding: 15, paddingLeft: 0 }
paddingLeft is not working.

[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?

[murtraja]

Even I faced this issue while removing padding completely with native-base CardItem component. CardItem used padding<Dir>, and I tried to override it with padding, it did not work. Had to manually use padding<Dir>:0 instead of padding:0