CODEWITHSUNDEEP
react-native
flix
flix

Reputation: 1974

react native - paddingTop with percentage value doesn't work

refer to react native padding top doc

paddingTop works like padding-top in CSS. See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top for more details.

and on css link there's some percentage in padding-top, but it doesn't work in react native,

how can I add percentage in paddingTop react native?

Upvotes: 2

Views: 4880

Answers (4)

Rai Akhtar Ali
Rai Akhtar Ali

Reputation: 1

const styles = StyleSheet.create({
  wrapper: {
    flex:1,
    paddingLeft: 24,
    paddingRight: 24,
    backgroundColor: 'green',
    paddingBottom:"5%"
  },
  inner: {
    flex:1,
    justifyContent: 'space-between',
    backgroundColor: 'blue',
    marginTop:"10%"
  },
});

Upvotes: 0

tuan.tran
tuan.tran

Reputation: 1881

React Native supports a percentage value since v0.42.3 (changelog). You can refer to this commit.

Upvotes: 5

Aruna
Aruna

Reputation: 147

in React Native, for paddingTop: "5%" only the % is working, number, number in string are not working with the latest as on 17 April 2019.

Upvotes: 0

JainZz
JainZz

Reputation: 612

Can't specify percentage in react native css.

To specify percentage by getting the screen size and convert it into percentage.

Sample example:

const { height } = Dimensions.get('window');

paddingTop: height * 0.1 // 10 percentage of the screen height

Upvotes: 2

Related Questions