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>
  );
}

need your full render component, the textinput's placing depends on parent UI... edit and paste your whole component — mainak
– mainak, Commented Aug 7, 2020 at 15:37

mainak · Accepted Answer · 2020-08-07 15:47:11Z

2

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 :)

answered Aug 7, 2020 at 15:47

mainak

2,3312 gold badges12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aurangzaib Rana · Accepted Answer · 2020-08-07 15:43:27Z

1

you need to give some width to your textArea to its wrapper

you will give width in

percentage

width: '100%'

with respect to dimension of screen

import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
width: windowWidth;

answered Aug 7, 2020 at 15:43

Aurangzaib Rana

4,2601 gold badge16 silver badges27 bronze badges

1 Comment

tendai Over a year ago

Although it should be noted that this literally sticks to the screen's width - for instance if using a tablet and you adjust you app's screen width, fields that were using screen width will spill into the screen's sides because to them, the tablet's screen width hasn't changed

Rohit Chahal · Accepted Answer · 2021-10-27 07:28:40Z

0

try this in textinput style

padding : 0

answered Oct 27, 2021 at 7:28

Rohit Chahal

1212 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related