title: React Native Text Input fields not taking full width even though flex: 1
body: <p>I am making a form on formik and want it to take the full screen width. I have tried flex: 1, changing the flex direction, and changing the padding. When text goes wider than the input field it expands to fit it. I don't want to set the width because I want it to change with the width of the phone screen. Here is a picture of what it looks like right now <a href="https://i.stack.imgur.com/wuwC9.png" rel="nofollow noreferrer">https://i.stack.imgur.com/wuwC9.png</a></p>
  <p>Here is my styling code:</p>
  <pre><code>const styles = StyleSheet.create({
    input: {
      padding: 10,
      fontSize: 18,
      borderRadius: 6,
      flex: 1,
      borderBottomColor: '#000',
      borderBottomWidth: 2,
      alignSelf: 'stretch',
      flexDirection: 'row',
    },
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    inner: {
      //padding: 20,
      flex: 1,
      // justifyContent: 'flex-end',
    },
  });
  </code></pre>
  <p>The Input field looks like this:</p>
  <pre><code> &lt;View style={styles.container}&gt;
        &lt;Formik
          initialValues={{
            first_name: '',
            last_name: '',
            address_1: '',
            address_2: '',
            city: '',
            state: '',
            postcode: '',
            country: 'CA',
            email: 'john.doe@example.com',
            phone: '647-274-8068',
          }}
          // Form submission action
          onSubmit={async (values) =&gt; {
            addData(values);
          }}&gt;
          {(props) =&gt; (
            &lt;KeyboardAvoidingView
              behavior={Platform.OS === 'ios' ? 'padding' : null}
              style={{flex: 1}}&gt;
              &lt;ScrollView style={styles.inner}&gt;
                &lt;TextInput
                  style={styles.input}
                  placeholder=&quot;first name&quot;
                  onChangeText={props.handleChange('first_name')}
                  value={props.values.first_name}
                /&gt;
                &lt;TextInput
                  style={styles.input}
                  placeholder=&quot;last name&quot;
                  onChangeText={props.handleChange('last_name')}
                  value={props.values.last_name}
                /&gt;
                &lt;TextInput
                  style={styles.input}
                  placeholder=&quot;Street Address&quot;
                  onChangeText={props.handleChange('address_1')}
                  value={props.values.address_1}
                /&gt;
                &lt;TextInput
                  style={styles.input}
                  placeholder=&quot;Unit&quot;
                  onChangeText={props.handleChange('address_2')}
                  value={props.values.address_2}
                /&gt;
                &lt;TextInput
                  style={styles.input}
                  placeholder=&quot;City&quot;
                  onChangeText={props.handleChange('city')}
                  value={props.values.city}
                /&gt;
                &lt;Picker
                  selectedValue={props.values.country}
                  onValueChange={props.handleChange('country')}&gt;
                  &lt;Picker.Item label=&quot;Canada&quot; value=&quot;CA&quot; /&gt;
                  &lt;Picker.Item label=&quot;USA&quot; value=&quot;US&quot; /&gt;
                &lt;/Picker&gt;
                &lt;Picker
                  selectedValue={props.values.state}
                  onValueChange={props.handleChange('state')}&gt;
                  {CA.map((item, index) =&gt; {
                    return &lt;Picker.Item label={item} value={index} key={index} /&gt;;
                  })}
                  &lt;Picker.Item label=&quot;Alberta&quot; value=&quot;AB&quot; /&gt;
                  &lt;Picker.Item label=&quot;British Columbia&quot; value=&quot;BC&quot; /&gt;
                  &lt;Picker.Item label=&quot;Manitoba&quot; value=&quot;MB&quot; /&gt;
                  &lt;Picker.Item label=&quot;New Brunswick&quot; value=&quot;NB&quot; /&gt;
                  &lt;Picker.Item label=&quot;Newfoundland and Labrador&quot; value=&quot;NL&quot; /&gt;
                  &lt;Picker.Item label=&quot;Northwest Territories&quot; value=&quot;NT&quot; /&gt;
                  &lt;Picker.Item label=&quot;Nova Scotia&quot; value=&quot;NS&quot; /&gt;
                  &lt;Picker.Item label=&quot;Nunavut&quot; value=&quot;NU&quot; /&gt;
                  &lt;Picker.Item label=&quot;Ontario&quot; value=&quot;ON&quot; /&gt;
                  &lt;Picker.Item label=&quot;Prince Edward Island&quot; value=&quot;PE&quot; /&gt;
                  &lt;Picker.Item label=&quot;Quebec&quot; value=&quot;QC&quot; /&gt;
                  &lt;Picker.Item label=&quot;Saskatchewan&quot; value=&quot;SK&quot; /&gt;
                  &lt;Picker.Item label=&quot;Yukon&quot; value=&quot;YT&quot; /&gt;
                &lt;/Picker&gt;
                &lt;TextInput
                  style={styles.input}
                  placeholder=&quot;Postal Code&quot;
                  onChangeText={props.handleChange('postcode')}
                  value={props.values.postcode}
                /&gt;
                &lt;Button
                  title=&quot;place order&quot;
                  color=&quot;maroon&quot;
                  onPress={props.handleSubmit}
                /&gt;
              &lt;/ScrollView&gt;
            &lt;/KeyboardAvoidingView&gt;
          )}
        &lt;/Formik&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>