Dynamic id transition page for each individual element of the array - react-native

Question

I need your help. I have a separate file arrayOfBoxes, which contains an array of elements with fields id and title. There is also a Boxes component in which I iterate this array and there is a BoxesDetailsComponent component in which I want to have a transition to the details of each of the objects. The fact is that I use react-navigation together with bottom-tabs and unfortunately I don't know how to do it. Can you help with this task: how to use the details button in the Boxes component to switch to the BoxesDetailsComponent component by different id? Thanks a lot
arrayOfBoxes.js
export const arrayOfBoxes = [
{id: 1, title: "Box 1"},
{id: 2, title: "Box 2"},
{id: 3, title: "Box 3"} ]
Boxes.js
import {Button, FlatList, StyleSheet, Text, View} from 'react-native';
import {arrayOfBoxes} from "../array/arrayOfBoxes";
import {useState} from "react";
const Boxes = () => {
const [autoBoxes, setAutoBoxes] = useState(arrayOfBoxes);
return (<View>
<FlatList data={autoBoxes} renderItem={({item}) => {
return <View>
<Text>{item.title}</Text>
<Button title={'Details'} onPress={() => {//Go to BoxesDetails}}/>
</View>}}/>
</View>)
export default Boxes;
BoxesDetailsComponent.js
import { Text, View } from 'react-native';
const BoxesDetailsComponent = () => {
return (<View>
<Text>Boxes Details</Text>
</View>)
}
export default BoxesDetailsComponent;
App.js
import { StyleSheet } from 'react-native';
import {createBottomTabNavigator} from "#react-navigation/bottom-tabs";
import {NavigationContainer} from "#react-navigation/native";
import Boxes from "./components/Boxes";
import VacuumCleaner from "./components/VacuumCleaners";
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name={'Бокси'} component={Boxes}/>
<Tab.Screen name={'Пилососи'} component={VacuumCleaner}/>
</Tab.Navigator>
</NavigationContainer>);
}

Answer 1

You can get default navigation in the component and using this navigation you can navigate to the next screen. Please check the below code:
import { Button, FlatList, StyleSheet, Text, View } from 'react-native';
import { arrayOfBoxes } from "../array/arrayOfBoxes";
import { useState } from "react";
const Boxes = ({ navigation }) => {
const [autoBoxes, setAutoBoxes] = useState(arrayOfBoxes);
return (<View>
<FlatList data={autoBoxes} renderItem={({ item }) => {
return <View>
<Text>{item.title}</Text>
<Button title={'Details'} onPress={() => navigation.navigate('DetailsScreen')} />
</View>
}} />
</View>)
}
export default Boxes;
Your Navigator like below:
function Home() {
return (
<Tab.Navigator>
<Tab.Screen name={'Бокси'} component={Boxes}/>
<Tab.Screen name={'Пилососи'} component={VacuumCleaner}/>
</Tab.Navigator>
);
}
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
<Stack.Screen name="BoxesDetailsComponent" component={BoxesDetailsComponent} />
</Stack.Navigator>
</NavigationContainer>
);
}