React Native Text Input fields not taking full width even though flex: 1

Question

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 https://i.sstatic.net/wuwC9.png

Here is my styling 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',
  },
});

The Input field looks like this:

 <View style={styles.container}>
      <Formik
        initialValues={{
          first_name: '',
          last_name: '',
          address_1: '',
          address_2: '',
          city: '',
          state: '',
          postcode: '',
          country: 'CA',
          email: '[email protected]',
          phone: '647-274-8068',
        }}
        // Form submission action
        onSubmit={async (values) => {
          addData(values);
        }}>
        {(props) => (
          <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : null}
            style={{flex: 1}}>
            <ScrollView style={styles.inner}>
              <TextInput
                style={styles.input}
                placeholder="first name"
                onChangeText={props.handleChange('first_name')}
                value={props.values.first_name}
              />
              <TextInput
                style={styles.input}
                placeholder="last name"
                onChangeText={props.handleChange('last_name')}
                value={props.values.last_name}
              />
              <TextInput
                style={styles.input}
                placeholder="Street Address"
                onChangeText={props.handleChange('address_1')}
                value={props.values.address_1}
              />
              <TextInput
                style={styles.input}
                placeholder="Unit"
                onChangeText={props.handleChange('address_2')}
                value={props.values.address_2}
              />
              <TextInput
                style={styles.input}
                placeholder="City"
                onChangeText={props.handleChange('city')}
                value={props.values.city}
              />
              <Picker
                selectedValue={props.values.country}
                onValueChange={props.handleChange('country')}>
                <Picker.Item label="Canada" value="CA" />
                <Picker.Item label="USA" value="US" />
              </Picker>
              <Picker
                selectedValue={props.values.state}
                onValueChange={props.handleChange('state')}>
                {CA.map((item, index) => {
                  return <Picker.Item label={item} value={index} key={index} />;
                })}
                <Picker.Item label="Alberta" value="AB" />
                <Picker.Item label="British Columbia" value="BC" />
                <Picker.Item label="Manitoba" value="MB" />
                <Picker.Item label="New Brunswick" value="NB" />
                <Picker.Item label="Newfoundland and Labrador" value="NL" />
                <Picker.Item label="Northwest Territories" value="NT" />
                <Picker.Item label="Nova Scotia" value="NS" />
                <Picker.Item label="Nunavut" value="NU" />
                <Picker.Item label="Ontario" value="ON" />
                <Picker.Item label="Prince Edward Island" value="PE" />
                <Picker.Item label="Quebec" value="QC" />
                <Picker.Item label="Saskatchewan" value="SK" />
                <Picker.Item label="Yukon" value="YT" />
              </Picker>
              <TextInput
                style={styles.input}
                placeholder="Postal Code"
                onChangeText={props.handleChange('postcode')}
                value={props.values.postcode}
              />
              <Button
                title="place order"
                color="maroon"
                onPress={props.handleSubmit}
              />
            </ScrollView>
          </KeyboardAvoidingView>
        )}
      </Formik>
    </View>
  );
}

Answer 1

just try this with only one TextInput

return (
    <View style={styles.container}>
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : null}
        style={{ flex: 1, width: "100%" }}
      >
        <ScrollView style={styles.inner}>
          <TextInput
            style={styles.input}
            placeholder="Postal Code"
            value={"fdf"}
          />
        </ScrollView>
      </KeyboardAvoidingView>
    </View>
  );

It will surely work :)