React Native vertical text alignment when using explicit height

Question

I want to vertically center my text inside a view with an explicit height.

Center text vertically in react-native did not fully answer my question because they don't use explicit height.

When I use

  <View style={styles.rightContainer}>

            <Text style={styles.label2}>
              Centered
            </Text>

        </View>

  rightContainer: {
    marginRight: 10,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
   label2: {
    height: 40,
    backgroundColor: 'green',
    textAlignVertical: 'center',
  },

If I take away the explicit height,

  label2: {
    backgroundColor: 'green',
    textAlignVertical: 'center',
  },

it works.

I need to set the explicit height because I will convert this View to a tappable button.

How do I make this work? What am I misunderstanding about react-native layout?

Cant you use `marginTop:height/2`? – Auticcat Aug 24 '19 at 21:53 — Auticcat, Aug 24 '19 at 21:53

score 3 · Answer 1 · answered Aug 24 '19 at 22:10

It's because the 'textAlignVertical' property is Android-only. Check the documentation on Text.

You could add an extra container wrapping the text:

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      <View style={styles.rightContainer}>
        <View style={styles.labelContainer}>
          <Text style={styles.label}>Centered</Text>
        </View>
      </View>
    );
  }
}

const styles = {
  rightContainer: {
    marginRight: 10,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  labelContainer: {
    height: 40,
    backgroundColor: 'green',
    alignItems: 'center',
    justifyContent: 'center',
  },
  label2: {},
};

React Native vertical text alignment when using explicit height

1 Answers1