Multiple View elements with image inside need to be displayed in two column layout.
I am using following code (basically, getting dimension(x) of window and setting View width = x/2).
Parent container is flex: row
.
But this does not seem to be working. I am getting only one image in a row instead of two like shown in image. What I am doing wrong?
const window = Dimensions.get('window');
const imageWidth = (window.width/3)+30;
const imageHeight = window.width/3;
export default class Brochures extends Component {
render() {
const brochuresView = brochuresData.map( Brochure );
return (
<ScrollView style={styles.container}>
{brochuresView}
</ScrollView>
);
}
}
const Brochure = ( data ) => {
const {child, image} = styles;
return (
<View key={data.id} style={child}>
<Image
style={image}
source={{uri: data.url}}
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
flexWrap: 'wrap'
},
child: {
width: window.width/2,
alignItems: 'center',
height: imageHeight+5,
marginTop: 10
},
image: {
width: imageWidth,
height: imageHeight
}
});
ScrollView takes a contentContainerStyle
prop vs the normal style
prop that will describe the styling.
From the docs:
These styles will be applied to the scroll view content container which wraps all of the child views. Example:
return ( <ScrollView contentContainerStyle={styles.contentContainer}> </ScrollView> ); ... const styles = StyleSheet.create({ contentContainer: { paddingVertical: 20 } });
So basically the only change you need with your code will be this:
<ScrollView contentContainerStyle={styles.container}>
vs this:
<ScrollView style={styles.container}>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With