Dynamic id transition page for each individual element of the array

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>);
}

Nensi Kasundra · Answer 1 · 2022-04-20T11:02:48.423

0

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>
  );
}

edited Apr 20 '22 at 11:02

answered Apr 19 '22 at 11:26

Nensi Kasundra

1,980
6
21
34

Thanks a lot, but it doesn't work. Gives an error: `The action 'NAVIGATE' with payload {"name":"BoxesDetailsComponent"} was not handled by any navigator` I need to do so, like we turn to `API`, we get all values at once and separate values on id (here ve got array in different file). And for each id we make a dynamic page, like `useParams` in plain React. And the whole page changes in detail. How can this be done here? – Apr 19 '22 at 13:54
You have to define your component in the stack navigator and after that you can perform above thing – Nensi Kasundra Apr 20 '22 at 05:12
Can you show me please how it all can be done? Because i don't know where to put stack navigator – Apr 20 '22 at 07:28
Please check the above navigator code. you can also check the attached link for your reference. https://reactnavigation.org/docs/nesting-navigators/ – Nensi Kasundra Apr 20 '22 at 11:05

Dynamic id transition page for each individual element of the array

1 Answers1