react native,child's width by percentage - react-native

Question

Here is my code. I want the product view to take up 90% width of its parent. However, the settings below are not working.
...any idea how to achieve it without using dimensions?
return (
<LazyloadScrollView
style={styles.container}
contentContainerStyle={styles.content}
name="scrollImage" >
{list.map((product, i) => <View key={i} style={styles.product}>
<LazyloadImage
host="scrollImage"
style={styles.image}
source={image}
animation={false}>
<View style={styles.id}>
<Text style={styles.idText}>{product.id}</Text>
</View>
</LazyloadImage>
</View>)
}
</LazyloadScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ffffff'
},
content: {
paddingTop: 20,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#eee'
},
product: {
flex: 0.9,
marginTop: 5,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#FFFFFF'
},

Answer 1

Why not use Dimensions? It will enable your app to be responsive.
If you don't want to use dimensions, try some style settings in the container and it's children, for example, make it full width with padding
container: {
backgroundColor: '#ffffff',
alignSelf: 'stretch',
padding: 30
}
I don't know if it works because you would have to post the rest of the code to test it but keep playing with the style and flex properties until you make it work, shouldn't take long.
Btw, always good to revisit the official layout props docs from react native
And css tricks guide to flexbox