title: React Native - NativeBase components not taking up full width on iOS
body: <p>In the iOS version of my react native app built with NativeBase, everything is too skinny, unless a specific width is given. See images below. I have given the header and footer a width of 100% so it is fine, but I haven't done that for the inputs and they are too skinny. The header and footer are that skinny when not given a width too.</p>
  
  <p><a href="https://i.stack.imgur.com/xek6q.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xek6q.png" alt="enter image description here"></a></p>
  
  <p>code:</p>
  
  <pre><code>import React from 'react'
  import {
    Container,
    Header,
    Form,
    Item,
    Input,
    Label,
    Content,
    Footer,
    FooterTab,
    Button,
    Left,
    Right,
    Body
  } from 'native-base'
  
  import { Text, Image } from 'react-native'
  
  export const Volcalc = () =&gt; {
    return (
      &lt;Container style={styles.container}&gt;
        &lt;Header style={styles.header}&gt;
          &lt;Left&gt;
            &lt;Image resizeMode={Image.resizeMode.contain} style={styles.thumbnail} source={require('./img/logo_red_nowords.png')} /&gt;
  
          &lt;/Left&gt;
          &lt;Body&gt;
          &lt;/Body&gt;
          &lt;Right /&gt;
        &lt;/Header&gt;
  
        &lt;Content&gt;
  
          &lt;Form&gt;
            &lt;Item stackedLabel bordered &gt;
              &lt;Label&gt;height&lt;/Label&gt;
              &lt;Input /&gt;
            &lt;/Item&gt;
            &lt;Item stackedLabel &gt;
              &lt;Label&gt;width&lt;/Label&gt;
              &lt;Input /&gt;
            &lt;/Item&gt;
          &lt;/Form&gt;
  
        &lt;/Content&gt;
  
        &lt;Footer &gt;
          &lt;FooterTab style={styles.footer}&gt;
            &lt;Button full&gt;
              &lt;Text&gt;Footer 1&lt;/Text&gt;
            &lt;/Button&gt;
          &lt;/FooterTab&gt;
        &lt;/Footer&gt;
      &lt;/Container&gt;
    )
  }
  
  const $mainColor = '#00d1b2'
  const styles = {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: $mainColor
    },
  
    header: {
      width: '100%',
      backgroundColor: $mainColor
    },
    footer: {
      width: '100%',
      backgroundColor: $mainColor
    },
  
    thumbnail: {
      width: 35,
      height: 35
    }
  }
  </code></pre>
  
  <p>I'm pretty sure I'm supposed to be able to add <code>input</code>s and <code>header</code>, without specifying width, and it should take up the full width like Android does when not specifying. What could be wrong with my project that is causing this? </p>