1

I have a TextInput inside a View which has alignItems='center'. With this settings the TextInput takes the length of the text types in the TextInput.

    <View style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }} >
        <TextInput />
        <Text>This is React Native</Text>
    </View>

Screenshots are below

enter image description here enter image description here

Whereas what I want to achieve is align the children in the center and also stretch the width of the TextInput to match the parent

Like in this Image

enter image description here

How do I achieve this in react native ?

5
  • get width from dimensions and then set width of text input equal to the width you get from dimensions Jan 15, 2018 at 5:55
  • Isn't there a way to set this through style ?
    – rsanath
    Jan 15, 2018 at 6:02
  • It will be set through style Jan 15, 2018 at 6:04
  • I mean isn't there any implicit way to achieve this ?
    – rsanath
    Jan 15, 2018 at 7:21
  • 2
    Possible duplicate of 100% width in React Native Flexbox
    – Asons
    Jan 15, 2018 at 8:26

2 Answers 2

5
<View
    style={{
        flex: 1,
        justifyContent: "center",
    }}>
    <TextInput />
    <Text
        style={{
            alignSelf: "center",
        }}>
        This is React Native
  </Text>
</View>

Replace the above code with yours.

0
Import {Dimensions} from 'react-native';

var { height, width } = Dimensions.get('window');

<TextInput style={styles.textInput}/>

const styles = StyleSheet.create({
  textInput:{
    width:width;
  },  })

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.