Search code examples
react-nativereact-native-flexbox

Flex box not expected result in react native?

I am designing the UI of react native app using flex-box. But It code is not showing the expected result?

Problem

Margin property for InnerContainer2 is margin:'5%' not covering the equal space vertically.

Code:

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.innerContainer1}>
          <View style={styles.innerContainer2}>
            <Text style={styles.welcome}>This is live reload</Text>
          </View>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'grey'
  },
  innerContainer1: {
    flex: 1,
    width: '80%',
    margin: '10%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightgrey'
  },
  innerContainer2: {
    flex: 1,
    width: '80%',
    margin: '5%',
    height: 'auto',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'grey'
  },
  welcome: {
    textAlign: 'center',
    margin: 10,
  }
});

Expected Output

enter image description here

Actual Output

enter image description here

Solution

  • okay, 2 things:

    1) Margin/Padding doesn't really play well with 'percentage values' because it interferes with other components height and width. So, always use the exact value. If you are worried about other screen sizes then you can use the Dimensions Library to calculate the exact width and height of any screen and assign a margin from there.

    2) Flex is generally used when you have to assign a ratio for two components inside a parent element. This example will make the child components take 50% ratio of their parent element.

    eg:

    Parent component => flex: 1

    child(A) Component => flex :0.5

    child(B) Component => flex :0.5

    Other than than I made a few adjustment to your style class. It is working as intended. Hope you understand or you can ask me :)

      const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'grey',
  },
  innerContainer1: {
    // flex: 1, used when you have to assign a ratio for two components inside a parent element
    width: '80%',
    height: '80%',
    margin: 10,
    justifyContent: 'center',
    //  alignItems: 'center',      It gives the desired result when used in the parent component.
    backgroundColor: 'lightgrey',
  },
  innerContainer2: {
    // flex: 1, used when you have to assign a ratio for two components inside a parent element.
    width: '80%',
    margin: 30,
    height: '80%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  welcome: {
    textAlign: 'center',
    margin: 10,
  },
});

    References:

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

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