How to put padding around image in React-Native? - image

Question

I have a list that will display a certain number of images in a row. What I want is for there to be space between each image. I was trying to use padding but it has not worked.
Here is what I have:
class ImageList extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
require('./images/ex1.jpg'), require('./images/ex2.jpg'), require('./images/ex3.jpg')
])
};
}
render() {
return (
<View>
<ListView
contentContainerStyle={styles.list}
dataSource={this.state.dataSource}
renderRow={(rowData) => <Image source={rowData} style={styles.imageSize}/>}
/>
</View>
);
}
}
var styles = StyleSheet.create({
imageSize: {
//newWidth is the width of the device divided by 4.
//This is so that four images will display in each row.
width: newWidth,
height: newWidth,
padding: 2
},
list: {
flexDirection: 'row',
flexWrap: 'wrap'
}
});
In the main file the code is called:
class Main extends Component {
render(){
return(
<ScrollView>
<View style={{flex: 1}}>
<View>
<ImageList/>
</View>
</View>
</ScrollView>
);
}
};
I have tried putting padding in each View that I have to see if any it works. But so far nothing is working.
I have wrapped the rawData with a view like this:
render() {
return (
<View>
<ListView automaticallyAdjustContentInsets={false}
contentContainerStyle={styles.list}
dataSource={this.state.dataSource}
renderRow={(rowData) => <View style={{padding: 1}}><Image source={rowData} style={styles.imageSize}/></View>}
/>
</View>
But this has caused a problem. When I try to have more than 3 images, only the first 3 appear. The rest are nowhere to be found.