I am using the react-native-layout-grid package for displaying a grid layout. I want to add images in the grid layout instead of text/string. How can i do it?
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
} from 'react-native';
import GridLayout from 'react-native-layout-grid';
export default class App extends Component<{}> {
renderGridItem = (item) => (
<View style={styles.item}>
<View style={styles.flex} />
<Text style={styles.name}>
{item.name}
</Text>
</View>
);
render() {
const items = [];
for (let x = 1; x <= 30; x++) {
items.push({
name: `Grid ${x}`
});
}
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Grid Layout
</Text>
<View style={styles.flex}>
<GridLayout
items={items}
itemsPerRow={3}
renderItem={this.renderGridItem}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
///styles///
});
In renderGridItem add the images Eg:---
renderGridItem = (item) => (
<View style={styles.item}>
<View style={styles.flex} />
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>
<Text style={styles.name}>
{item.name}
</Text>
</View>
);
working eg: https://snack.expo.io/@msbot01/petrified-tortillas