CODEWITHSUNDEEP
androidreact-native
L.Learner
L.Learner

Reputation: 129

How to handle on click on GridView react native android?

I have implemented grid view in react native.It gets data from json and displays. Now I want to click the grid item and display the content on the basis of data on current position of grid.

Implemented grid view using

Upvotes: 1

Views: 1582

Answers (1)

agenthunt
agenthunt

Reputation: 8678

You can use any of the Touchable components with onPress handler.

For example TouchableHighlight.

You can pass the navigator as props as shown in renderScene section of the example below.

index.ios.js

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Navigator
} from 'react-native';

import GridView from 'react-native-grid-view';
import Movie from './Movie.js';
import MovieDetail from './MovieDetail.js';

class ReactNativeGridViewTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: ['hello', 'blabla', 'BatMan', 'SuperMan']
    };
  }
  onHandleItemPress(item){
    this.refs.navigator.push({
      id: 'detail',
      data:item
    });
  }
  renderItem(item) {
    return (
      <TouchableHighlight onPress={this.onHandleItemPress.bind(this, item)}>
        <View>
          <Movie item={item}/>
        </View>
      </TouchableHighlight>
    );
  }
  renderScene(route,navigator){
    switch(route.id){
      case 'master': return (
        <View style={styles.container}>
          <GridView
            items={this.state.movies}
            itemsPerRow={3}
            renderItem={this.renderItem.bind(this)}
          />
        </View>
       )
      case 'detail': return (<MovieDetail navigator={navigator} data={route.data}/>)
    }
  }
  render() {
    return (
      <Navigator ref="navigator" 
      initialRoute={{id: 'master'}}renderScene={this.renderScene.bind(this)}/>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('ReactNativeGridViewTest', () => ReactNativeGridViewTest);

Movie.js

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
} from 'react-native';

export default class Movie extends Component{
  render(){
    return (
      <View style={{width:40, height:40, margin: 20, backgroundColor:'red'}}>
         <Text>{this.props.item}</Text>
      </View>
    )
  }
}

MovieDetail.js

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
} from 'react-native';

export default class MovieDetail extends Component{
  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={()=> this.props.navigator.pop()}>
          <Text>Go Back </Text>
        </TouchableHighlight>
        <View style={{width:40, height:40, margin: 20, backgroundColor:'red'}}>
           <Text>{this.props.data}</Text>
        </View>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

You can also check out the working example on Github.

Upvotes: 2

Related Questions