How to center text vertically in its own frame in React Native?

user_949714 0
Viewed 37

The text is sticking to the top. How do we center it vertically

How it looks

 <View style={styles.formContainer}>
        <View style={styles.textInputBackground}>
          <Text style={styles.textInputLabelText}>Name</Text>
          <TextInput style={styles.textInput} />
        </View>
        <View style={styles.textInputBackground}>
          <Text style={styles.textInputLabelText}>Email</Text>
          <TextInput style={styles.textInput} />
        </View>
      </View>

const styles = StyleSheet.create({
  formContainer: {
    marginTop: 130,
  },
  textInputBackground: {
    marginTop: 12,
    backgroundColor: 'rgba(0, 0, 0, 0.08)',
    flexDirection: 'row',
    height: 46,
    marginLeft: 16,
    marginRight: 16,
    borderRadius: 8,
  },
  textInputLabelText: {
    backgroundColor: 'blue',
    color: 'red',
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
    textAlignVertical: 'center',
    flex: 2,
  },
  textInput: {
    flex: 12,
  },
})
react-native
2 Answers

Hi there I've updated your style. this will center your input

 textInputBackground: {
    marginTop: 12,
    backgroundColor: 'rgba(0, 0, 0, 0.08)',
    flexDirection: 'row',
    height: 46,
    marginLeft: 16,
    marginRight: 16,
    borderRadius: 8,
    alignItems:"center", // **<--- add this line**
  },
user_80006800

To make text center change style to this

textInputLabelText: {
backgroundColor: 'blue',
color: 'red',
justifyContent: 'center',
alignSelf: 'center', //just change alignItem to alignSelf
textAlign: 'center',
textAlignVertical: 'center',
flex: 2,
},
user_67203240
Related