React Native Flatlist With Clickable Items

export default function Notifications(props) {

  const { navigation } = props
  const dbh = firebase.firestore();

  const [loading, setLoading] = useState(true); // Set loading to true on component mount
  const [deliveries, setDeliveries] = useState([]); // Initial empty array of users

  useEffect(() => {
    const subscriber = dbh
      .collection("deliveries")
      .onSnapshot((querySnapshot) => {
        const deliveries = [];

        querySnapshot.forEach((documentSnapshot) => {
          deliveries.push({
            ...documentSnapshot.data(),
            key: documentSnapshot.id,
          });
        });

        setDeliveries(deliveries);
        setLoading(false);
      });

    // Unsubscribe from events when no longer in use
    return () => subscriber();
  }, []);

  if (loading) {
    return <ActivityIndicator />;
  }

  return (
    <FlatList
      style={{ flex: 1 }}
      data={deliveries}
      renderItem={({ item }) => (
        <TouchableOpacity
        onPress={() => { 
          navigation.navigate('screenName', {
           //pass params here
          })
         }}>
                        
           <View style={styles.container}>
            <Text>DATE: {item.when}</Text>
            <Text>ZIP DONATEUR: {item.zip_donator}</Text>
            <Text>ZIP BENEFICIAIRE: {item.zip_tob_deliv}</Text>
          </View>
        </TouchableOpacity>
      )}
    />
  );
}

How to open screen wiith click on item in flatlist in react native?

2 things. First, you very rarely want to use TouchableWithoutFeedback. Users expect feedback when they touch something that they can interact with - such as a button.

If you are 100% sure you want it to be without feedback, then continue with that, but I think you likely will want TouchableOpacity instead.

The second thing is you are almost there. You need to add an onPress prop to your touchable tag. You will want to update your data source so that each 'item' in it contains the information you need to be able to navigate to your correct screen. It may be as simple as including another variable named 'screenName' or the like, or you could get as complicated as adding an entire function that you pass into your onPress event handler. Either way, you know your code better than I, but you just need to add a little data to your categories array.

EDIT:
Here is an example using the screenName approach mentioned above.

let categories = [ 
    {
        name : "Category 1",
        img : require("../Assets/Slika.jpg"),
        screenName: "PlayerScreen",
    },

    <TouchableOpacity
       onPress={() => {
          // navigate to screen named item.screenName
       }}
    >

React Native - Click item of Flatlist (after searched the list)

Add the keyboardShouldPersistTaps prop to FlatList.

<FlatList
  keyboardShouldPersistTaps={'handled'}
  data={...}      
  renderItem={...}
... />

A similar suggested was made in this Github issue. But, you're not using a ScrollView. Even though FlatList is not documented to have the keyboardShouldPersistTaps prop, it does have it, because FlatList is a 'convenience wrapper around <VirtualizedList>, and thus inherits its props (as well as those of <ScrollView>)'. source

Alternative: dismiss the keyboard in your TextInput search handler, this is how the Gmail app does search. Once your user is done typing and they press submit, Keyboard.dismiss(). This won't work if the user is not required to 'submit' though, like how most browser apps work.

React native Flatlist onclick navigation

If you want to know which Item was pressed in Flatlist you can easily use one of TouchableOpacity, TouchableNativeFeedback, TouchableHighlight or TouchableWithoutFeedback component available in react-native.

In you case you can do something like:

render() {
  const listActivities = this.state.activitiesList;
  function Item({ title }) {
    return (
      <TouchableOpacity
        onPress={() => {
          console.log(title, 'was pressed');
        }}
      >
        <View style={styles.item}>
          <Text style={styles.title}>{title}</Text>
        </View>
      </TouchableOpacity>
    );
  }
  return (
    <View>
      <View style={styles.container}>
        <Text style={styles.heading}>UPCOMING ACTIVITIES</Text>
      </View>
      <View>
        <SafeAreaView>
          <FlatList onPress={() => navigate(DetailsScreen)}
            data={listActivities}
            renderItem={({ item }) => <Item title={item.name} />}
            keyExtractor={item => item.id}
          />
        </SafeAreaView>
      </View>
    </View>
  );
}

You can read more on Official RN docs

On the side note consider declaring functions outside your render function for better performance in the long run to avoid redeclaring the function/Components again and again. like:

renderItem = (name) => {
  return (
    <TouchableOpacity
      onPress={() => {
        console.log(name, 'was pressed');
      }}
    >
      <View style={styles.item}>
        <Text style={styles.title}>{name}</Text>
      </View>
    </TouchableOpacity>
  );
}

render() {
  const listActivities = this.state.activitiesList;
  return (
    <View>
      <View style={styles.container}>
        <Text style={styles.heading}>UPCOMING ACTIVITIES</Text>
      </View>
      <View>
        <SafeAreaView>
          <FlatList onPress={() => navigate(DetailsScreen)}
            data={listActivities}
            renderItem={({ item }) => this.renderItem(item.name)}
            keyExtractor={item => item.id}
          />
        </SafeAreaView>
      </View>
    </View>
  );
}

Related Topics