React Native Android: How to display image and text in one row? - react-native

Question

I have tried to create react native app for android where child image and name will display in one line. You can check it on rawgit.
import React, { Component } from 'react'
import { AppRegistry, Text, View, Image } from 'react-native'
export default class App extends Component {
render() {
return (
<View>
<Text style={{ textAlign: 'left', fontSize: 15, backgroundColor:'grey'}}>
<Image source={{uri: 'https://leaderbord-552b1.firebaseapp.com/AdminLTE%202%20_%20User%20Profile_files/mount-carmel-logo.png'}} style={{width: 70, height: 70, borderRadius:70}} />
<Text style={{ backgroundColor:'lightblue', }}>Vindhyachal</Text>
</Text>
</View>
)
}
}
AppRegistry.registerComponent('App', () => App)
I am getting below output which is wrong, text is displaying at bottom instead of same line at middle.
Note:- I can't change the component structure because I am using it in react-native-material-ui-demo-app Drawer as below.
<Drawer.Section
divider
items={[
{ value: <Text style={{ textAlign: 'left', fontSize: 15, backgroundColor:'grey'}}>
<Image source={{uri: child.image'}} style={{width: 70, height: 70, borderRadius:70}} />
<Text style={{ backgroundColor:'lightblue', }}>{child.name}</Text>
</Text> },
{ value: <Text style={{ textAlign: 'left', fontSize: 15, backgroundColor:'grey'}}>
<Image source={{uri: child.image'}} style={{width: 70, height: 70, borderRadius:70}} />
<Text style={{ backgroundColor:'lightblue', }}>{child.name}</Text>
</Text> }
]}
/>
Below is screenshot of my app where I am facing this issue.
I'll be grateful if someone can help me out with this issue. Thanks in advance.

Answer 1

It can be achieved by two ways as follows:
1] With inner Text block removed (Just need to add alignSelf: "center" to your Text) as follows:
<View style={{flexDirection: 'row', textAlign: 'left', fontSize: 15, backgroundColor:'grey'}}>
<Image source={{uri: 'https://leaderbord-552b1.firebaseapp.com/AdminLTE%202%20_%20User%20Profile_files/mount-carmel-logo.png'}} style={{width: 70, height: 70, borderRadius:70}} />
<Text style={{ backgroundColor:'lightblue', alignSelf: "center" }}>Vindhyachal</Text>
</View>
2] Without Text removed using your existing Drawer.Section code (Need to provide float:"left" style and positioning your Text as absolute with top value) as follows:
<Text style={{ textAlign: 'left', fontSize: 15, backgroundColor:'grey', alignItems:"center", float:"left", position:"absolute"}}>
<Image source={{uri: 'https://leaderbord-552b1.firebaseapp.com/AdminLTE%202%20_%20User%20Profile_files/mount-carmel-logo.png'}} style={{width: 70, height: 70, borderRadius:70, float:"left"}} />
<Text style={{ backgroundColor:'lightblue', float:"left", position:"absolute", top:"45%"}}>{child.name}</Text>
</Text>

Answer 2

Here's an example I've used to handle what you need:
import React, { Component } from 'react';
import {
Text, View, Image
} from 'react-native';
import Dimensions from 'Dimensions';
const DeviceWidth = Dimensions.get('window').width;
const DeviceHeight = Dimensions.get('window').height;
class MyClass extends React.Component {
render() {
return (
<View style={{flexDirection:'row', width:DeviceWidth, height:DeviceWidth*0.5, alignItems:'center'}}>
<Image source={{uri : 'someUrl'}}
style={{width:DeviceWidth*0.5, height:DeviceWidth*0.5, resizeMode:'contain'}}/>
<Text>Next to Image</Text>
</View>
);
}
}
export default MyClass;

Answer 3

Here goes the updated code where moving the flex styling to the View tag. Sharing a URL where you can play with flex.
export default class App extends Component {
render() {
return (
<View style={{flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
<Text style={{ textAlign: 'left', fontSize: 15, backgroundColor:'grey'}}>
<Image source={{uri: 'https://leaderbord-552b1.firebaseapp.com/AdminLTE%202%20_%20User%20Profile_files/mount-carmel-logo.png'}} style={{width: 70, height: 70, borderRadius:70}} />
<Text style={{ backgroundColor:'lightblue', }}>Vindhyachal</Text>
</Text>
</View>
)
}
}
AppRegistry.registerComponent('App', () => App)