react native styling component - react-native

Question

I am trying to style a component but cant figure out how to do a couple of things.
1) I want to apply a background color to 100% of my component
return (
<TouchableWithoutFeedback
style={styles.touchable}
onPress={() =>
this.props.navigation.navigate('Quotes', { name: this.props.name })}
>
<View style={styles.viewStyle}>
<Image
source={this.props.image}
key={this.props.image}
style={styles.imageStyle}
/>
<Text style={styles.textStyle}> {this.props.name} </Text>
</View>
</TouchableWithoutFeedback>
);
}
}
const styles = {
imageStyle: {
height: 100,
width: 100
},
touchable: {
width: '100%',
backgroundColor: 'black'
},
viewStyle: {
height:100,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
backgroundColor: 'black'
},
textStyle: {
marginLeft: 20,
width: 120,
fontWeight: 'bold',
fontSize: 15
}
}
I tried to apply the background color to touchable tag a view tag but none of this work.
Moreover Id like to position my image at the top left of the component using justifyContent: flex-start. But my elements inside the view tag keeps staying centered.
How can I achieve these goals ?
The parent component is :
render() {
const {listStyle} = styles
return (
<ScrollView style={listStyle}>
{this.renderCharacters(this.props.matches)}
</ScrollView>
);
}
}
const styles = {
listStyle: {
width: '100%',
height: '100%'
}
}