CODEWITHSUNDEEP
reactjsreact-native
tinto mathew
tinto mathew

Reputation: 266

Adding item click event in react native Grid View

Please find my code below and help me for adding item click listener for the items in the grid view. Please find the link which I followed library link.

And I need to display the name in an alert when the user clicks on each item in the gridlist. Styles are not included in the code

Thanks in Advance

import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableWithoutFeedback
} from 'react-native';
import GridLayout from 'react-native-layout-grid';

class HomeScreen extends Component {

renderGridItem = (props) => (
<View style={styles.item}  >
  <View style={styles.flex} />
  <Text style={styles.name} >
    {props.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={2}
        renderItem={this.renderGridItem}>
      </GridLayout>
    </View>
  </View>
);
}
}


export default HomeScreen;

Upvotes: 1

Views: 2079

Answers (2)

Laurie Williams
Laurie Williams

Reputation: 393

Why don't you wrap renderGridItem in a TouchableWithoutFeedback?

renderGridItem = (props) => (
  <TouchableWithoutFeedback onPress={()=> Alert.alert(props.name)}>
    <View style={styles.item}  >
     <View style={styles.flex} />
       <Text style={styles.name} >
       {props.name}
       </Text>
     </View>
    <TouchableWithoutFeedback />
  );

Also you will need to import Alert from react-native.

Upvotes: 1

Poptocrack
Poptocrack

Reputation: 3009

Instead of using <View> in your renderGridItem, you could use one of the touchables component (react native doc).

For example with <TouchableOpacity >:

renderGridItem = (props) => (
  <TouchableOpacity style={styles.item} onPress={() => this.showAlert(props.name)}>
    <View style={styles.flex} />
    <Text style={styles.name} >
      {props.name}
    </Text>
  </TouchableOpacity>
);

showAlert = (name) => {
   Alert.alert(
    'Alert Title',
    `The user name is: ${name}`,
    [
      {text: 'OK', onPress: () => console.log('OK Pressed')},
    ],
    { cancelable: false }
  )
}

Upvotes: 4

Related Questions