styling of background color in pixel phone - reactjs

Question

I want to put the logo of the company so that it stretches out from top left corner to the top right corner with width of 10. Below is my code. My image is not showing properly. It shows in the middle of the screen with width going outside of the phone.If I put position: absolute then the image disappears from the phone.
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ScrollView, TouchableOpacity, Linking, Button } from 'react-native';
import { connect } from 'react-redux';
import { getTheme } from 'react-native-material-kit';
import EvilIcon from 'react-native-vector-icons/EvilIcons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
import * as actions from '../actions';
import getDirections from 'react-native-google-maps-directions'
const theme = getTheme();
const styles = StyleSheet.create({
card: {
marginTop: 10,
paddingBottom: 20,
marginBottom: 20,
borderColor: 'lightgrey',
borderWidth: 0.5,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#4F6D7A',
height: 550,
alignSelf:'center',
width:500,
position: 'relative',
},
title1: {
top: 10,
left: 80,
fontSize: 24,
},
title2: {
top: 35,
left: 82,
fontSize: 18,
},
image: {
flex: 0,
height: 100,
width: 333,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
},
closeIcon: {
position: 'absolute',
top: 5,
left: 295,
color: 'rgba(233,166,154,0.8)',
backgroundColor: 'rgba(255,255,255,0)',
},
icon: {
position: 'absolute',
top: 15,
left: 0,
color: 'white',
backgroundColor: 'rgba(255,255,255,0)',
},
textArea: {
flexDirection: 'row',
paddingLeft: 20,
paddingTop: 10,
width: 260,
},
textIcons: {
color: '#26a69a',
},
actionArea: {
paddingTop: 10,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
},
title:{
justifyContent: 'center',
paddingTop: 10,
alignItems: 'center',
alignSelf: 'center',
fontWeight: 'bold',
fontSize: 22,
color: '#F5FCFF',
},
SerContent:{
fontWeight: 'bold',
fontSize: 16,
paddingTop: 10,
alignSelf: 'center',
color: '#F5FCFF'
},
underLineText: {
fontSize: 17,
textDecorationLine: 'underline',
color: '#F5FCFF',
fontWeight: 'bold',
textAlign: 'center',
},
dir:{
flexDirection:'row',
paddingTop: 30,
textAlign: 'center',
fontSize: 17,
alignSelf: 'center'
} ,
Address1:{
alignSelf: 'center',
marginRight: 20,
fontSize: 17,
fontWeight: 'bold',
color: '#F5FCFF',
},
toolbar: {
flexDirection: 'row', //Step 1
},
toolbarTitle:{
width: 10,
top: 0,
left: 0,
bottom: 0,
right: 0,
flex:1 ,
position:'absolute' //Step 3
},
});
class ServiceDetail extends Component {
handleClick = (link) => {
Linking.canOpenURL(link).then(suppported => {
if (supported) {
Linking.openURL(link);
} else {
console.log('Don\'t know how to open URI: ' + link);
}
});
};
render() {
var destUrl = 'https://www.google.com/maps/search/?api=1&query=' + this.props.services.destAddr1 + '+' + 'field'
var destUrl1 = 'https://www.google.com/maps/search/?api=1&query=' + this.props.services.destAddr2 + '+' + 'field'
return (
<ScrollView showsVerticalScrollIndicator={false}>
<View style={styles.container}>
<View style={styles.toolbar}>
<Image
resizeMode='contain'
style={styles.toolbarTitle}
source={require('../Resources/LogoWithDesc.jpg')} />
</View>
<SimpleIcon name={'close'} size={30} style={styles.closeIcon}
onPress={() => this.props.noneSelected()} />
<Text style={styles.title}>{this.props.services.ser}</Text>
<Text style={styles.SerContent} >Service is available in the following locations:</Text>
<View style={styles.dir}>
<Text style={styles.Address1}> {this.props.services.Location}:</Text>
<TouchableOpacity onPress={() => Linking.openURL(destUrl)}>
<Text style={styles.underLineText}>Directions</Text>
</TouchableOpacity>
</View>
<View style={styles.dir}>
<Text style={styles.Address1}>{this.props.services.SecondLoc}:</Text>
<TouchableOpacity onPress={() => Linking.openURL(destUrl1)}></TouchableOpacity>
<TouchableOpacity onPress={() => Linking.openURL(destUrl1)}>
<Text style={styles.underLineText}>Directions</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
);
}
}
const mapStateToProps = state => {
return {
services: state.serviceSelected
};
};
export default connect(mapStateToProps, actions)(ServiceDetail);
any help will be highly appreciated.

Answer 1

Please try increasing flex to Image and add the position property.
image: {
flex: 1,
height: 200,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
width: 333,
position: 'absolute',
},
Please apply the width of the container and add the position property.
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#4F6D7A',
height: 200,
alignSelf:'center'
width: 333,
position: 'relative',
},
you can also edit the layout using flexbox
https://facebook.github.io/react-native/docs/flexbox.html