I am leaing react native and i tried to use react-native-grid-view for grid based layout. I want to show 3 images per row. But i am getting an error stating 'items.forEach is not a function'. What might be the issue?
Below is my code
const data = [
{image:require('./assets/img/Alcohol1.png'),price:1},
{image:require('./assets/img/Bakery1.png'), price:2},
{image:require('./assets/img/Beverages1.png'), price:3},
{image:require('./assets/img/Alcohol1.png'), price:4},
{image:require('./assets/img/FoodCupboard.png'), price:5},
{image:require('./assets/img/Health&Beauty.png'), price:6},
]
const ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 });
const CATEGORIES_PER_ROW = 3;
class Category extends Component{
render(){
console.log('props value',this.props.category);
retu(
<View style={styles.category}>
<Image source={this.props.category.image} style={styles.thumbnail} />
<View>
<Text
style={styles.price}
numberOfLines={3}>{this.props.category.price}</Text>
</View>
</View>
)
}
}
export default class Main extends Component{
constructor(props){
super(props);
this.state = {
isRefreshing:false,
dataSource: ds.cloneWithRows([]),
}
this.renderItem = this.renderItem.bind(this);
}
componentWillMount() {
console.log(data);
this.setState({
dataSource:ds.cloneWithRows(data),
isRefreshing:true
});
}
render() {
if (!this.state.isRefreshing) {
retu this.renderLoadingView();
}
retu (
<GridView
items={this.state.dataSource}
itemsPerRow={CATEGORIES_PER_ROW}
renderItem={this.renderItem}
style={styles.listView}
/>
);
}
renderLoadingView() {
retu (
<View>
<Text>
Loading Categories...
</Text>
</View>
);
}
renderItem(item){
console.log('item',item);
retu <Category category={item} />
}
}
