Align TextField and Text in ReactNative? - react-native

Question

I'm trying to align my component TextInput that uses a TextField from #ubaids/react-native-material-textfield and a Text but i couldn’t. The result i have is in the image below :
I added alignItems: 'center' in the container but i didn't work. My code is:
<View style={styles.container}>
<View style={styles.input}>
<TextInput
containerStyle={{ height: 20, marginVertical: 10 }}
label=""
value=""
keyboardType="phone-pad"
/>
</View>
<View style={styles.label}>
<Text style={[styles.text, { textTransform: 'uppercase' }]}>Text</Text>
</View>
</View>
container: {
flexDirection: 'row',
alignItems: 'center'
},
input: {
flex: 0.2
},
label: {
paddingTop: 20,
paddingHorizontal: 10
},

Answer 1

You should try and add justifyContent to your container‘s Styling:
container: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
}
And also, you don't need the view above the Text with the styles.label.
This way, both your TextInput and your Text components will be aligned on both axis

Answer 2

You have to set display css property to inline-block for both input and label style:
text: {
fontWeight: "bold",
fontSize: "1.5rem",
marginVertical: "1em",
},
container: {
flexDirection: "row",
alignItems: "center"
},
input: {
flex: 0.2,
display: 'inline-block'
},
label: {
// paddingTop: 20,
paddingHorizontal: 10,
display: 'inline-block'
}
As you can see I commented paddingTop: 20 in label (but if you need, you can add it again but you have to add it to input also).
Here a codesandbox.

Answer 3

Already answered but I'd like to add a bit more on the topic and different ways to do it depending on your use case.
You can add adjustsFontSizeToFit={true} (currently undocumented) to Text Component to auto adjust the size inside a parent node.
<Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>
You can also add the following in your Text Component:
<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>