React Native: Vertically and Horizontally align image and text in same row - react-native

Question

<View>
<Text>Hello</Text>
<Image source={require('./Vector.png')} />
</View>
I have the above View. I want to vertically and horizontally align image and text. Image should be on the right and text left in the same row. But I am not able to do align them correctly.

Answer 1

You can check here live dmeo here expo-snack:
Also the code is pretty ismple :
import * as React from 'react';
import { Text, View, StyleSheet,Image } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Hey</Text>
<Image source={{uri:'https://source.unsplash.com/random'}} style={{height:50,width:50}}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-between',
backgroundColor: '#ecf0f1',
padding: 8,
flexDirection:'row',
alignItems:'center'
}
});
hope it helps. feel free for doubts , and if you want the text and image to be not so distant you can have justifyContent: 'center',

Answer 2

For horizontal:
flexDirection: 'row',
For vertical:
flexDirection: 'column',

Answer 3

Use flexDirection: 'row' to make it in the same row & use justifyContent: 'center', alignItems: 'center' to align it vertically & horizontally.
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<Text>Hello</Text>
<Image style={{ width: 50, height: 50 }} source={require('./Vector.png')} />
</View>

Answer 4

You can simply do it by using flexDirection
Example :
<View
style={{
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<Text>Hello</Text>
<Image
style={{ width: 30, height: 30, resizeMode: "contain" }}
source={require("./Vector.png")}
/>
</View>
If you want to make the image right corner on the screen and text on the left corner try this. It can be done using position
<View
style={{
flex: 1,
flexDirection: "row"
}}
>
<Text style={{ position: "absolute", right: 0 }}>Hello</Text>
<Image
style={{
width: 30,
height: 30,
resizeMode: "contain",
position: "absolute",
left: 0
}}
source={require("./Vector.png")}
/>
</View>