title: How to fix marginHorizontal property in Flexbox not working?
body: <p>I'm setting up some screens for an app using React-Native, and I want to fully understand how Flexbox works. </p>
  
  <p>I'm trying to set the marginHorizontal property in style of textinput and button, but nothing happens.</p>
  
  <p>If I set the specific value of width I do not have any problem. </p>
  
  <p>Why marginHorizontal does not work properly?</p>
  
  <p>The first image is what I get using marginHorizontal (the size of the button doesn't change and the margin from board is not 10);</p>
  
  <p>The second image is what I get when I use width prop (the button size changes according the value of width).</p>
  
  <p>I just wonder why with the marginHorizontal prop, nothing happens.</p>
  
  <p><a href="https://i.stack.imgur.com/CahZJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CahZJ.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/nenLn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nenLn.png" alt="enter image description here"></a></p>
  
  <pre><code>import React, { Component } from 'react'
  import {Text, StyleSheet, View, TextInput, TouchableOpacity} from 'react-native'
  import Swiper from 'react-native-swiper';
  import {Button} from 'react-native-elements'
  
  const formInputColor = 'rgba(255, 255, 255, 0.2)'
  const formInputPlaceholderColor = 'rgba(255, 255, 255, 0.7)'
  
  export default class RegisterFormComponent extends Component{
  
    render(){
        return(
          &lt;Swiper 
            style={styles.wrapper}
            loop = {false}
          &gt;
  
          &lt;View style={styles.slide1}&gt;
  
            &lt;View style={styles.topContainer1}&gt;
  
            &lt;Text 
              style={styles.text}&gt;What's you mail?
            &lt;/Text&gt;
  
            &lt;TextInput
              placeholder = "Email"
              placeholderTextColor = {formInputPlaceholderColor}
              returnKeyType = "next"
              style = {styles.formInput}
            /&gt;
  
            &lt;Text 
              style={styles.underText}
              multiline={true}&gt;blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
            &lt;/Text&gt;
  
            &lt;Button
              style={styles.buttonStyle}
              //textStyle = {styles.buttonTextStyle}        
              //loading={false}
            &gt;
            &lt;/Button&gt;
  
            &lt;/View&gt;
  
            &lt;View style={styles.bottomContainer1}&gt;
            &lt;/View&gt;
  
          &lt;/View&gt;
  
  
          &lt;View style={styles.slide2}&gt;
  
          &lt;View style={styles.topContainer1}&gt;
  
              &lt;Text 
                style={styles.text}&gt;Choose your password
              &lt;/Text&gt;
  
              &lt;TextInput
                placeholder = "Password"
                placeholderTextColor = {formInputPlaceholderColor}
                secureTextEntry
                returnKeyType = "go"
                style = {styles.formInput}
              /&gt;
  
              &lt;/View&gt;
  
              &lt;View style={styles.bottomContainer1}&gt;
              &lt;/View&gt;
          &lt;/View&gt;
          &lt;View style={styles.slide3}&gt;
            &lt;Text style={styles.text}&gt;And simple&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/Swiper&gt;
        )
    }
  }
  
  const styles = StyleSheet.create({
    wrapper: {
      flex: 1
    },
    slide1: {
      flex: 1,
      backgroundColor: '#3498db',
    },
    buttonStyle: {
      backgroundColor: '#2980b9', 
      marginTop: 10, 
      height: 25,
      marginHorizontal: 10
    },
    buttonTextStyle: {
      fontSize: 10
    },
    topContainer1: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center'
    },
    logoStyle: {
      width: 100, 
      height: 100, 
    }, 
  
    bottomContainer1: {
      flex: 1,
    },
    formInput:{
      height: 40, 
      backgroundColor: formInputColor, 
      color: '#FFF',
      marginHorizontal: 10,
      paddingHorizontal: 10,
      textAlignVertical: 'top'
    },
    slide2: {
      flex: 1,
      backgroundColor: '#97CAE5'
    },
    slide3: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#92BBD9'
    },
    text: {
      color: '#000',
      fontSize: 20,
      padding: 10,
      fontWeight: 'bold'
    }, 
    underText: {
      color: 'black',
      fontSize: 12,
      marginTop: 8,
      textAlign: 'center',
      width: 300
    }
  })
  </code></pre>