Flexbox View does not wrap Image in React Native - react-native

Question

When I have an Image inside a View with 'flex: 1' the View does not wrap the Image.
When I paste my code into react-native-web-player it works as expected..
The right image is what I expected, while the left is the actual result:
import * as React from 'react';
import { AppRegistry, View, Image, Text, StyleSheet } from 'react-native';
import SplitView from './components/SplitView';
function PurchaseLine() {
// tslint:disable-next-line:max-line-length
const imgUrl =
'https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369';
return (
<View style={styles.container}>
<Image source={{ uri: imgUrl }} style={styles.img} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red'
},
img: {
width: 45,
height: 62
}
});
export default class Datakasse extends React.Component<object, object> {
render() {
return (
<View>
<PurchaseLine />
</View>
);
}
}
AppRegistry.registerComponent('Datakasse', () => Datakasse);
UPDATE:
"height: 100%" or "flex: 1" on the outermost container, and not setting "flex: 1" on PurchaseLine's container seems to work.. Confused why I can't set the latter tho..
import * as React from 'react';
import { AppRegistry, View, Image, Text, StyleSheet } from 'react-native';
import SplitView from './components/SplitView';
function PurchaseLine() {
// tslint:disable-next-line:max-line-length
const imgUrl =
'https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369';
return (
<View style={styles.container}>
<Image source={{ uri: imgUrl }} style={styles.img} />
<Text>1 x Jacket</Text>
<Text>$99.99</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'red',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 10
},
img: {
width: 45,
height: 62
}
});
export default class Datakasse extends React.Component<object, object> {
render() {
return (
<View style={{ height: '100%', backgroundColor: 'blue' }}>
<PurchaseLine />
</View>
);
}
}
AppRegistry.registerComponent('Datakasse', () => Datakasse);

Answer 1

You can make use of a react-native "hack" and define the width as null like { width: null }. This will make it stretch at 100%. See also the example here based on your code
UPDATE:
the alignSelf what you are looking for. Sample here
UPDATE:
Try this example by setting flex on the parent element and remove from child. Your parent element wasnt defined as flex component so the child had issues. Check here
i removed the flex from container and added here
<View style={{flex: 1}}>