Add padding to images in React Native?

Question

I am trying to add padding to some images in a react native app I am working on. The images are resized based on the device width so that four are displayed in each row. In this.props.images there are 9 images which are displayed without any padding.

I have tried wrapping the Image in a view with a padding of 1 like this:

renderRow(rowData){
 const {uri} = rowData;
return(
<View style={{padding: 1}}>
  <Image style={styles.imageSize} source={{uri: uri}} />
</View>
)
}

But when I try that only the first three images appear with padding. The rest of the images do not appear.

My entire code is here:

class ImageList extends Component {
componentWillMount(){
const ds = new ListView.DataSource({
  rowHasChanged: (r1, r2) => r1 !== r2
});
this.dataSource = ds.cloneWithRows(this.props.images);
}

renderRow(rowData){
 const {uri} = rowData;

 return(
  <Image style={styles.imageSize} source={{uri: uri}} />
 )
}

  render() {
    return (
      <View>
        <ListView
          contentContainerStyle={styles.list}
          dataSource={this.dataSource}
          renderRow={this.renderRow}
        />
      </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'
    }
});

How can add padding and have all my images appear properly?

Here is an image of how I would like my app to display the images.

But here is how it is displayed when I wrap the return from the renderRow function in a with padding. There is padding which is what I want but only the first 3 pictures are showed. I want all 9 pictures with padding to show.

Answer 1

I was able to solve my problem by using the suggestion provided by Thomas in the comment section.

What I did was add alignSelf: 'flex-start'

Here is what the code looks like:

renderRow(rowData){
 const {uri} = rowData;
return(
<View style={{padding: 1, alignSelf: 'flex-start'}}>
  <Image style={styles.imageSize} source={{uri: uri}} />
</View>
)
}

The pictures are now displaying correctly.