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

user_7488471 0
Viewed 5283
<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.

react-native
4 Answers

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',

user_113553030

For horizontal:

flexDirection: 'row',

For vertical:

flexDirection: 'column',
user_105003300

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>
user_94325590

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>
user_78676130
Related