Add padding to images in React Native?
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.
dozo
Updated on June 25, 2022Comments
-
dozo almost 2 years
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.