React-native: Padding is not overriding paddingTop, paddingLeft, paddingHorizontal, etc...

Created on 11 Oct 2017 · 7Comments · Source: facebook/react-native

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

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

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

Source

facuescobar

👍3

Most helpful comment

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

vdpdev on 4 May 2018

👍4

All 7 comments

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.

stale[bot] on 10 Dec 2017

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

https://snack.expo.io/SkUA0PWff

facuescobar on 15 Dec 2017

stale[bot] on 13 Feb 2018

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

vdpdev on 4 May 2018

👍4

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

a6051529 on 25 May 2018

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

devth on 3 Aug 2018

👍2

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