React Native - issue with flexDirection - react-native

Question

I am trying to put a button (custom component made from TouchableOpacity inside View) and an image in a view.....and have them sit side by side.
See code below
<View
style={{
borderColor: 'black',
borderWidth: 1,
flex: 1,
flexDirection: 'row',
}}
>
<MyButton
to_extraStyle={{
backgroundColor: '#03A9F4',
width: 100,
height: 60,
alignSelf: 'flex-start',
}}
onPress={this._imagePickHandler}
>
CHOOSE PIC
</MyButton>
<Image
source={{ uri: this.state.localImgUrl }}
style={{
width: 100,
height: 60,
borderColor: 'black',
borderWidth: 1,
alignSelf: 'flex-end',
}}
/>
</View>
When I remove flexDirection: 'row' you can see both the image and the button....they sit on top of each other....but with flexDirection: 'row' included, the image disappears and you can only see the button.
Any ideas?

Answer 1

Use the value of width as %.
<View
style={{
borderColor: 'black',
borderWidth: 1,
flex: 1,
flexDirection: 'row'
}}
>
<MyButton
to_extraStyle={{
backgroundColor: '#03A9F4',
width: "50%",
height: 60,
}}
onPress={this._imagePickHandler}
>
CHOOSE PIC
</MyButton>
<Image
source={{ uri: this.state.localImgUrl }}
style={{
width: "50%",
height: 60,
borderColor: 'black',
borderWidth: 1,
}}
/>
</View>
Example
export default class App extends Component {
render() {
return (
<View style={s.container}
>
<TouchableOpacity style={s.touchable}>
<Text style={{color:"#ffffff"}}>Button </Text>
</TouchableOpacity>
<Image source={{uri: 'http://i.imgur.com/IGlBYaC.jpg'}} style={s.backgroundImage} />
</View>
);
}
}
const s = StyleSheet.create({
backgroundImage: {
width: "50%",
height: 60,
borderColor: 'black',
borderWidth: 1,
},
touchable: {
backgroundColor: '#03A9F4',
width: "50%",
height: 60,
justifyContent:"center",
alignItems:"center"
},
container: {
borderColor: 'white',
borderWidth: 1,
flex: 1,
flexDirection: 'row'
}
});

Answer 2

Remove alignSelf on both MyButton and Image and they will sit side by side.
If what you wanted to obtain with alignSelf is to align MyButton at the very left and Image at the very right then add justifyContent: 'space-between' to your view.