I'm working with my Expo-React-Native project and I created my navigation with React Navigation. I have a list of Stores and a detail page for each one of them. This is how I'm doing it:
Stores.tsx
export default function Stores({ navigation }: any) { //... return (<FlatList data={data.allStores} renderItem={(store) => (<Store title={store.item.name} onPress={() => navigation.navigate("StoreDetail", { title: store.item.title, }) } /> )} keyExtractor={(store, index) => String(index)}></FlatList> );}StoreDetail.tsx
export default function StoreDetail({ route, navigation }: any) { return (<View style={styles.container}><ImageBackground style={styles.image} source={require("../assets/SampleStore.jpg")}><TouchableOpacity onPress={navigation.goBack()}><Ionicons style={styles.backIcon} name="md-arrow-round-back" size={30} color={colors.iceWhite} /></TouchableOpacity></ImageBackground><View style={styles.content}><PrimaryText textAlign={"center"} fontSize={30} margin={7}> {route.params?.title}</PrimaryText><TouchableOpacity style={styles.button}><PrimaryText color={colors.iceWhite} fontSize={16}> SACAR TURNO</PrimaryText></TouchableOpacity></View></View> );} // then the syles...And for the "wrapper" in which I manage my navigations I have this:
import React from "react";import { Ionicons } from "@expo/vector-icons";import colors from "../../assets/constants/style-variables";import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";import { createStackNavigator } from "@react-navigation/stack";import { NavigationContainer } from "@react-navigation/native";import Turnos from "../MisTurnos";import Stores from "../Stores";import User from "../User";import StoreDetail from "../StoreDetail";const Tab = createBottomTabNavigator();const StoreNav = createStackNavigator();function StoreStack() { return (<StoreNav.Navigator initialRouteName="Stores"><StoreNav.Screen name="StoreDetail" component={StoreDetail} /><StoreNav.Screen name="Stores" component={Stores} /></StoreNav.Navigator> );}export default function HomeNavigation() { return (<Tab.Navigator tabBarOptions={{ showLabel: false, style: { backgroundColor: colors.iceWhite }, }}><Tab.Screen name="Turnos" component={Turnos} options={{ tabBarIcon: ({ focused }) => (<Ionicons name="md-checkbox" size={20} color={focused ? colors.primary : colors.iconColor} /> ), }} /><Tab.Screen name="Stores" component={StoreStack} options={{ tabBarIcon: ({ focused }) => (<Ionicons name="md-basket" size={20} color={focused ? colors.primary : colors.iconColor} /> ), }} /><Tab.Screen name="User" component={User} options={{ tabBarIcon: ({ focused }) => (<Ionicons name="md-person" size={20} color={focused ? colors.primary : colors.iconColor} /> ), }} /></Tab.Navigator> );}The problem is that whenever I tap on a store, It'll simply do nothing, I checked if there was a problem with items overlapping, but I didn't find any. What am I missing here?