React-native: how to vertical center Text and Image

Question

In react native. I have a multiple lines text, and There will be a image at the end of the text.I want they can be vertical center, when they in same line。

now my code is not vertical center:like this

this is my demo.

app.tsx

<View style={styles.page}>
      <View>
        <Text style={styles.container}>
          this is msg this is msg this is msg
          <Image source={require('src/assets/img/arrow.png')} style={[styles.image]} />
        </Text>
      </View>
    </View>

app.style.tsx

import {StyleSheet} from 'react-native'

const styles = StyleSheet.create({
  page: {
    width: '100%',
    height: '100%',
    paddingVertical: 100,
    backgroundColor: 'grey',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    alignItems: 'center',
  },
  container: {
    maxWidth: 100,
    backgroundColor: 'green',
    lineHeight: 22,
    textAlignVertical: 'center',
  },
  image: {
    margin: 0,
    padding: 0,
    marginBottom: 0,
    marginTop: 0,
    width: 9,
    height: 22,
    resizeMode: 'contain',
    backgroundColor: 'red',
  },
})

export default styles

1.i want Text and Image can be vertical center. 2. Not affected by system font size settings still vertical center.

Answer 1

Try adding following styles to page

page: {
    width: '100%',
    height: '100%',
    display: 'flex',
    flexDirection:'row'
    alignItems:'center'
  }

if you want to horizontally center then add justifyContent:'center'