Alignment of elements in flexWrap depends on number of elements

Question

I'm trying to vertically center some text in a box that's in a flexWrap. But it's slightly above or below center, depending on how many boxes there are (???). Watch all the Hellos move up as more boxes are added:

The Expo snack is here: https://snack.expo.io/@danbock/vertically-center-text

How can I make this text stay in the center regardless of the number of boxes?

Answer 1

import * as React from 'react';
import {
 Text,
 View,
 StyleSheet,
 TouchableWithoutFeedback,
 ScrollView,
} from 'react-native';
import { Constants } from 'expo';
export default class App extends React.Component {
 render() {
   return (
     <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
       <View style={styles.surface}>
         <Text style={styles.text}>Hello</Text>
       </View>
     </View>
   );
 }
}
const styles = StyleSheet.create({
 surface: {
   alignItems: 'center',
   aspectRatio: 1,
   elevation: 2,
   justifyContent: 'center',
   margin: '5%',
   width: '40%',
   backgroundColor: '#eeeeee',
 },
 text: {
   textAlign: 'center',
   marginHorizontal: 'center',
   marginVertical: 'center',
 },
});