React-Native: Margin with percentage value

Question

I'm trying to use percentage value for margin style attribute on my React Native project but it seems to reduce the height of one of my View component. If I replace percentage value by an absolute value, there is no more issue and it works fine. Did you try to use percentage value as margin in React Native ? Here is a little sample of code to reproduce this issue:

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.scene}>
        <View style={styles.card}>
          <View style={styles.container}>
            <Text>Hello World</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    scene: {
        backgroundColor: '#F9E8D5',
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        flexDirection: 'column'
    },
    card: {
        backgroundColor: '#E6D5C3',
        flex: 0.2,
        flexDirection: 'column',
        marginTop: '20%' // Replace by 20
    },
    container: {
        backgroundColor: '#FFFFFF',
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center'
    }
});

Thank you very much !

Conceal

as you use percentage then it applies to the "box" you are working ( not the screen height). In your code, you will get 20% of the box with backgroundColor="#e6d5c3" – Wallis

@Wallis no that's not true marginTop: '20%' is "20% of the height of the containing box which is the scene". The padding apply fine the question is why it mess up the height of the "container" view ( on android and Ios but not on the web) – Lonnalonnard

Answer 1

A component's height and width determine its size on the screen.

The simplest way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.

Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.

Use flex in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use flex: 1.

The following references will be use for styling

1. https://facebook.github.io/react-native/docs/height-and-width.html

2. https://medium.com/the-react-native-log/tips-for-styling-your-react-native-apps-3f61608655eb

3. https://facebook.github.io/react-native/docs/layout-props.html#paddingtop

   Use Dimensions to calculate to get the height and width of the screen.

   var {height, width} = Dimensions.get('window');
   

   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
   

Stereography

get height like this let _height = Dimensions.get('window').height; – Bellow

It does not answer the question. It just provide a workaround using Dimensions.get("window") that is explicitly advised against in React Native documentation: Note: Although dimensions are available immediately, they may change (e.g due to device rotation) so any rendering logic or styles that depend on these constants should try to call this function on every render, rather than caching the value (for example, using inline styles rather than setting a value in a StyleSheet). – Lonnalonnard

Answer 2

This is a real bug but Facebook does not care.

https://github.com/facebook/react-native/issues/19164

Lonnalonnard