How to build a home screen using gridview in react native? - react-native

Question

I need to build a home screen with grid view in react-native. And that grid view should contain four Image buttons. Each image button should redirect to different pages. I am using the react-native-super-grid package.

Answer 1

If you need only 4 image button than no need to make a complex grid . Use below code only and if you need a complex gird than use this YouTube video link for better understanding.
import React, { Component } from 'react';
import { AppRegistry, View,Image } from 'react-native';
export default class FlexDirectionBasics extends Component {
render() {
return (
// Try setting `flexDirection` to `column`.
<View style={{flex: 1, }}>
<View style={{flex: 1, flexDirection: 'row', }}>
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
style={{flex:1}} />
<Image source={{uri: 'https://cdn-images-1.medium.com/max/512/1*qUlxDdY3T-rDtJ4LhLGkEg.png'}}
style={{flex:1}} />
</View>
<View style={{flex: 1, flexDirection: 'row', }}>
<Image source={{uri: 'https://rawgit.com/gorangajic/react-icons/master/react-icons.svg'}}
style={{flex:1}} />
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
style={{flex:1}} />
</View>
</View>
);
}
};
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);
Let me know if need more discussion

Answer 2

Here is the code according to user package.
RenderItem function is work such as loop.
when you put 4 objects in sections array RenderItem will make a loop for 4 time.
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Image style={styles.img} source={require('./assets/3.jpg')} />
<SuperGridSectionList
itemDimension={130}
sections={[
{
// all your style and data will be here according to your grid package
data: [
{ name: '1' }, { name: '2' },
{ name: '3' }, { name: '4' },
]
}
]}
style={styles.gridView}
renderItem={({ item }) => (
<View style={styles.buttonContainer}>
<TouchableOpacity style={styles.button} onPress={() => { alert("clicked me") }}>
<Image source={require("./assets/set2.png")} />
</TouchableOpacity>
</View>

Answer 3

You can install "npm install react-native-super-grid" and try this. You can change itemDimension then it will change number of icons should display on screen. This is only sample you can change what ever you needs.
import React, { Component } from "react";
import {
StyleSheet,
View,
Text,
TouchableOpacity,
PixelRatio,
Image
} from "react-native";
import { Container, Header, Content } from "native-base";
import GridView from "react-native-super-grid";
const buttons = [
{
name: "test1",
image: require("./src/icons/test1.png"),
key: 1
},
{
name: "test2",
image: require("./src/icons/test2.png"),
key: 2
},
{
name: "test3",
image: require("./src/icons/test3.png"),
key: 3
},
{
name: "test4",
image: require("./src/icons/test4.png"),
key: 4
},
];
class Home extends Component {
constructor(props) {
super(props);
}
onPress(){
}
render() {
return (
<Container style={styles.container}>
<Content contentContainerStyle={styles.contentContainerStyle}>
<GridView
itemDimension={180}
items={buttons}
renderItem={item => (
<View style={styles.gridCompenentContainer}>
<TouchableOpacity
onPress={this.onPress.bind(this)}
activeOpacity={0.8}
style={styles.touchView}
>
<Image
style={{ width: 60, height: 60 }}
source={item.image}
/>
</TouchableOpacity>
<View style={styles.textView}>
<Text style={styles.text}>{item.name} </Text>
</View>
</View>
)}
/>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff"
},
contentContainerStyle: {
backgroundColor: "#fff",
justifyContent: "center"
},
gridCompenentContainer: {
width: 160,
height: 140,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
},
touchView: {
width: 80,
justifyContent: "center",
alignItems: "center",
height: 80,
borderRadius: 40,
backgroundColor: "#0099cc"
},
textView: {
width: 140,
height: 50,
justifyContent: "center",
alignItems: "center"
},
text: {
width: 140,
fontSize: 12,
textAlign: "center",
color: "#0099cc"
}
});
export default Home;

Answer 4

thara### please refer this to get know how to implement react navigation or official documentation React Navigation.
You can add route for button press event. like
onPress={() =>
this.props.navigation.navigate('screen2');
}
https://facebook.github.io/react-native/docs/navigation#react-navigation