having some issue with flexbox layout in react-native - flexbox

Question

I am trying to make this highlighted line to stretch full width. I have tried many possible ways to come around it but could not get it as desired.
Here is my code from render() method.
return (
<ScrollView style={{backgroundColor: 'rgba(255,255,255,1)'}}>
<View style={styles.container}>
<Image style={styles.image} source={{uri: imageURI}} />
<View style={styles.content}>
<Text style={styles.title}>{news.title}</Text>
<View style={styles.itemIcons}>
<View style={styles.companyView}>
<Image
source={{uri: news.category[0].sourceImage}}
style={ styles.iconsImage} />
<Text style={styles.iconsText}>{news.category_name}</Text>
</View>
<Text style={styles.iconsTextRight}>{this.formatDate(news.pubDate)}</Text>
</View>
<Text style={styles.description}>{description}</Text>
</View>
</View>
</ScrollView>
);
And here are my styles for this.
container: {
flex: 1,
alignItems: 'center',
},
content: {
flex: 1,
flexDirection: 'column',
padding: 10
},
image: {
width: width,
height: custom_height,
// padding: 10
},
title: {
marginBottom: 15
},
itemIcons: {
flex: 1,
flexDirection: 'row',
alignSelf: 'stretch',
marginBottom: 15
},
iconsImage: {
height: 25,
width: 30,
marginRight: 10,
},
iconsText: {
fontSize: 12,
color: "#686666",
alignSelf: 'flex-end'
},
companyView: {flex:1,flexDirection:'row'},
dateView: {flex:1,alignSelf: 'flex-end'},
iconsTextRight: {
fontSize: 12,
color: "#686666",
alignSelf: 'flex-end'
},
description: {
padding: 2,
fontSize: 12,
color: '#323'
}

Answer 1

Change container style to
container: {
flex: 1,
}
Then the view will be aligned as per your requirement.

Answer 2

try this in itemIcons class
justify-content:'space-between'

Answer 3

I couldn't work with whole of your code, but as per the screenshot you posted, I was able to achieve this.
<View style={{flex:1}}>
<View style={{flexDirection:'row',paddingTop:100,justifyContent:'space-between',alignItems:'center'}}>
<View style={{flexDirection:'row',alignItems:'center'}}>
<Image source={require('./images/tiger.jpg')} style={{width:40,height:40}} />
<Text>Roche</Text>
</View>
<Text>25 Mar 2016, 18:16</Text>
</View>
</View>
Try to replicate this in your code and see if it works.