Algolia and Hooks in React Native can't navigate to an other page

Question

I'm using algolia with react Native and Expo, I make a connectInfiniteHits and i want to navigate to an other page when the user press a hit, i have the following code:

import React from "react";
import { StyleSheet, Text, View, FlatList, Image, TouchableOpacity, AsyncStorage } from "react-native";
import { connectInfiniteHits } from "react-instantsearch-native";
import PropTypes from 'prop-types';
import { useNavigation } from '@react-navigation/native';

const navigation = (id) => {
    const navigation = useNavigation();

    AsyncStorage.setItem("RepID", id);
    navigation.navigate("RepProfile");
}

const InfiniteHitsRep = ({ hits, hasMore, refine }) => (
    
    <View style={styles.container}>
        <FlatList
            data={hits}
            onEndReached={() => hasMore && refine()}
            onEndReachedThreshold={0}
            keyExtractor={item => item.objectID}
            initialNumToRender={10}
            ItemSeparatorComponent={() => <View style={styles.separator} />}
            renderItem={({ item }) => (

                <TouchableOpacity onPress={() => navigation(item.rep_id)} style={{ flexDirection: 'row', alignItems: 'center' }}>
                    <Image style={styles.image} source={{ uri: item.rep_img_url }} />
                    <Text style={{ flex: 3 }}>{item.rep_title} {item.rep_first_name} {item.rep_last_name}</Text>
                    <Image style={styles.image} source={{ uri: item.house_img_url }} />
                </TouchableOpacity>
            )}
        />
    </View>
)
);

InfiniteHitsRep.propTypes = {
    hits: PropTypes.arrayOf(PropTypes.object).isRequired,
    hasMore: PropTypes.bool.isRequired,
    refine: PropTypes.func.isRequired,
};

export default connectInfiniteHits(InfiniteHitsRep);

const styles = StyleSheet.create({
    container: {
        padding: 16,
    },
    separator: {
        marginTop: 16,
        marginBottom: 16,
        height: 1,
        backgroundColor: "#DDDDDD",
    },
    image: {
        flex: 1,
        width: 50,
        height: 50,
        borderRadius: 5,
        backgroundColor: 'white',
        resizeMode: 'contain',
    }
});

And when I press a hit I have this error message: [![``` Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

  [1]: https://i.sstatic.net/yDYRg.png

Answer 1

Hooks can be used inside a function component only

Change your code to this

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  Image,
  TouchableOpacity,
  AsyncStorage,
} from "react-native";
import { connectInfiniteHits } from "react-instantsearch-native";
import PropTypes from "prop-types";
import { useNavigation } from "@react-navigation/native";

const InfiniteHitsRep = ({ hits, hasMore, refine }) => {

  const navigation = useNavigation(); // Call hook here

  const navigation = (id) => {
    AsyncStorage.setItem("RepID", id);
    navigation.navigate("RepProfile"); // Use Here
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={hits}
        onEndReached={() => hasMore && refine()}
        onEndReachedThreshold={0}
        keyExtractor={(item) => item.objectID}
        initialNumToRender={10}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => navigation(item.rep_id)}
            style={{ flexDirection: "row", alignItems: "center" }}
          >
            <Image style={styles.image} source={{ uri: item.rep_img_url }} />
            <Text style={{ flex: 3 }}>
              {item.rep_title} {item.rep_first_name} {item.rep_last_name}
            </Text>
            <Image style={styles.image} source={{ uri: item.house_img_url }} />
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

InfiniteHitsRep.propTypes = {
  hits: PropTypes.arrayOf(PropTypes.object).isRequired,
  hasMore: PropTypes.bool.isRequired,
  refine: PropTypes.func.isRequired,
};

export default connectInfiniteHits(InfiniteHitsRep);

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  separator: {
    marginTop: 16,
    marginBottom: 16,
    height: 1,
    backgroundColor: "#DDDDDD",
  },
  image: {
    flex: 1,
    width: 50,
    height: 50,
    borderRadius: 5,
    backgroundColor: "white",
    resizeMode: "contain",
  },
});