How would you add a FlatList with clickable items that navigate to a component with their relative data (like name and image) in React Native

Question

I have a FlatList showing on DeviceList.js and on click of a FlatList item I want to navigate to the MainContainer.js component and pass the related data to detail component. As I am new to react native I am struggling hard to implement this functionality though I have implemented FlatList on main screen. FlatList has been implemented under DeviceList.js component with the click on navigation in Boat.js , and from this component I want to navigate to MainContainer.js component.

App.js

import React from 'react';
import { Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import LoginScreen from './Navigation/LoginScreen';
import DeviceList from './Navigation/DeviceList';
import MainContainer from './Navigation/MainContainer';
import TestPage from './Navigation/TestPage';


function LogoTitle() {
  return (
    <Image
      style={{ width: 46, height: 46, justifyContent: 'center', alignSelf: 'center', alignItems: 'center', position: 'absolute' }}
      source={require('./assets/icon.png')}
    />
  );
}

function App() {
  const Stack = createNativeStackNavigator();
  return (

    <NavigationContainer >

      <Stack.Navigator screenOptions={{ headerTitleAlign: 'center' }}>
        <Stack.Screen name="LoginScreen" component={LoginScreen} options={{ title: '', headerTitle: (props) => <LogoTitle {...props} initial/> }} />

        <Stack.Screen name="DeviceList" component={DeviceList} options={{ title: '', headerTitle: (props) => <LogoTitle {...props} /> }} />

        <Stack.Screen name="MainContainer" component={MainContainer} options={{ headerShown: false }} />

        <Stack.Screen name="TestPage" component={TestPage} options={{ headerTitle: (props) => <LogoTitle {...props} />, headerStyle: {} }} />
      </Stack.Navigator>

    </NavigationContainer>

  );
};



export default App;

Boat.js

import React from 'react'
import { View, Text, Image, StyleSheet, Alert } from 'react-native'
import { TouchableOpacity } from 'react-native';





class Boat extends React.Component {

    render() {
        const { name, boatImage } = this.props.boat
        return (

            <View style={styles.main_style}>
                <TouchableOpacity onPress={() => navigation.navigate("MainContainer")}>
                    {/* <TouchableOpacity onPress={() => Alert.alert(name + " has been clicked!")}> */}
                    <Image style={{ width: 150, height: 150, position: 'relative', }} source={{ uri: boatImage }} />
                    <Text>{name}</Text>
                    <View>
                    </View>
                </TouchableOpacity>
            </View >


        );
    }
}
export default Boat

DeviceList.js

import * as React from 'react';
import { StyleSheet, View, FlatList, Button } from 'react-native';
import { SearchBar } from 'react-native-screens';
import MapView from 'react-native-maps';
import Boat from '../Data/Boat'


const imgYacht = "https://test.com/imgCabincruise.jpg"
const imgCatamaran = "https://test.com/imgCatamaran.jpg"
const imgNarrowboat = "https://test.com/imgNarrowboat.jpg"
const imgCabincruise = "https://test.com/imgCabincruise.jpg"


const boats = [
  { name: "boat1", boatImage: imgYacht},

  { name: "boat2", boatImage: imgCabincruise},

  { name: "boat3", boatImage: imgNarrowboat},

  { name: "boat4", boatImage: imgCabincruise},

  { name: "boat5", boatImage: imgCatamaran},

  { name: "boat6", boatImage: imgYacht},
];


export default function App({ navigation }) {
  return (
    <View>

      <Button title="nextpage" onPress={() => navigation.navigate("MainContainer")} />
      <MapView/>

      <FlatList
        style={styles.scrollView}
        numColumns={2}
        data={boats}
        renderItem={({ item }) => (<Boat boat={item} />)}>
      </FlatList>

    </View>
  );
}

You want to navigate to a new page, and pass the params about the boat, so you can show info unique to that item. Check out this SO https://stackoverflow.com/questions/45388957/how-to-pass-parameters-to-screen-in-stacknavigator and this article https://medium.com/swlh/passing-params-with-react-navigation-dd86c5de024c — gwalshington, Oct 01 '22 at 18:02

score 0 · Accepted Answer · answered Oct 02 '22 at 08:18

0

Use params to pass information to the next screen like this :

navigation.navigate('MainContainer', 
          {
            itemId: 86,
            otherParam: 'anything you want here',
          });

For more info read the docs here navigation docs

answered Oct 02 '22 at 08:18

abdemirza

629
4
16

How would you add a FlatList with clickable items that navigate to a component with their relative data (like name and image) in React Native

1 Answers1