'React native navigation in flatlist

I using the flatlist to display a list of data. I wish to pass the data into another pages, but i have no idea which kind of navigation I shd use.

import Routes from './src/Routes';


export default class App extends Component<Props> {
  render() {

    return (
      <View style={styles.container}>
        <StatusBar 
          backgroundColor="#1c313a"
          arStyle="light-content" 
        />
        <Routes/>
      </View>
    );
  }
}

import React, { Component } from 'react';
import {StyleSheet, View, StatusBar,Text} from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

import HomeScreen from '../pages/HomeScreen'
import YourActivitiesScreen from '../pages/YourActivitiesScreen'
import YourFavouriteScreen from '../pages/YourFavouriteScreen'


const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen 
        name="Home"
        component={HomeScreen}
        options={{ drawerLabel: 'Home' }}
      />
      <Drawer.Screen
        name="Your Activities"
        component={YourActivitiesScreen}
        options={{ drawerLabel: 'Your Activities' }}
      />
      <Drawer.Screen
        name="Your Favourite"
        component={YourFavouriteScreen}
        options={{ drawerLabel: 'Your Favourite' }}
      />
    </Drawer.Navigator>
  );
}

export default function SideMenu() {

  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

import React, { Component } from 'react';
import {Router, Stack, Scene} from 'react-native-router-flux';
import Login from './pages/Login';
import Signup from './pages/Signup';
import SideMenu from './components/SideMenu'


export default class Routes extends Component {
    render() {
        return(
            <Router>
                <Stack key="root" hideNavBar>
                    <Scene key="login" component={Login} title="Login" initial/>
                    <Scene key="signup" component={Signup} title="Signup" />
                    <Scene key="home" component={SideMenu} title="HomeScreen" />
                </Stack>
            </Router>
        );
    }
}

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    AsyncStorage,
    TouchableOpacity,
    FlatList,
    Button,
} from 'react-native';
import DetailsScreen from './Details';

import { createDrawerNavigator, SafeAreaView } from 'react-navigation';
class HomeScreen extends Component{

    constructor(props) {
        super(props);
        this.state = {
            activitiesList: [],   
        }
    };
    renderItem = (item) => {
       return (
         <TouchableOpacity
           onPress={() => {

           console.log('test')

          }}
          >
                <View style={styles.item}>
                  <Text style={styles.title}>{item.name}</Text>
                </View>
              </TouchableOpacity>
            );
          }

    render(){
        const listActivities = this.state.activitiesList

        return (
            <View>
                <View style={styles.container}>
                    <Text style={styles.heading}>UPCOMING ACTIVITIES</Text>
                </View>
                <View>
                    <SafeAreaView>
                        <FlatList
                            data = {listActivities}
                            renderItem={({ item }) => this.renderItem(item)}
                            keyExtractor={item => item.id}
                        />
                    </SafeAreaView>
                </View>
            </View>
        )
    }
}

I used the react-native-router-flux at the early part of system, which is login, signup and home. Now home display the flatlist, from the flatlist i have to make a onPress to navigate to another pages, the Actions in router-flux that i used before cannot work. Anyone have idea about it? or another better way navigate to to the details of flatlist?

Solution 1:^[1]

First off, I'd refactor all the code to use just one kind of navigator (in this case, going for react-navigation). So, we will have your router-flux code combined with your

//Your routes screen
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
//... add missing imports

const Stack = createStackNavigator();

//this will be your old router-flux
const Root = () => {
  return (
  <Stack.Navigator>
    <Stack.Screen name="login" component={Login} title="Login" initial/>
    <Stack.Screen name="signup" component={Signup} title="Signup" />
    <Stack.Screen name="home" component={SideMenu} title="HomeScreen" />
  </Stack.Navigator>
 )
} 

const Drawer = () => {
  return (
  <Drawer.Screen 
        name="Home"
        component={HomeScreen}
        options={{ drawerLabel: 'Home' }}
      />
  <Drawer.Screen
        name="Your Activities"
        component={YourActivitiesScreen}
        options={{ drawerLabel: 'Your Activities' }}
      />
  <Drawer.Screen
        name="Your Favourite"
        component={YourFavouriteScreen}
        options={{ drawerLabel: 'Your Favourite' }}
      />
  </Drawer.Navigator>
 )
}

const AppContainer = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Root" component={Root} />
        <Stack.Screen name="Drawer" component={Drawer} />
        //import your Details screen to use inside component
        <Stack.Screen name="Details" component={Details} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppContainer

You will wrap your App.js component with this AppContainer. What we just did was to nest the navigations, your Home will be reached first and your drawer will be all in the same. Also, there is one missing stack in your code that is the one for the Details.

Right after here you are going to use all the actions from react-navigation. All the screens will receive a navigation props. Once you want to navigate from your Root, you will call the navigation just like props.navigation.navigate("Home").

The same will apply to navigate to your Detail screen from the FlatList.

//Your Home Screen
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    AsyncStorage,
    TouchableOpacity,
    FlatList,
    Button,
    SafeAreaView
} from 'react-native';

class HomeScreen extends Component{

    constructor(props) {
        super(props);
        this.state = {
            activitiesList: [],   
        }
    };
    renderItem = (item) => {
       return (
         <TouchableOpacity
           onPress={() => {
           props.navigation.navigate("Details", { data: item })
           console.log('test')

          }}
          >
                <View style={styles.item}>
                  <Text style={styles.title}>{item.name}</Text>
                </View>
              </TouchableOpacity>
            );
          }

    render(){
        const listActivities = this.state.activitiesList

        return (
            <View>
                <View style={styles.container}>
                    <Text style={styles.heading}>UPCOMING ACTIVITIES</Text>
                </View>
                <View>
                    <SafeAreaView>
                        <FlatList
                            data = {listActivities}
                            renderItem={({ item }) => this.renderItem(item)}
                            keyExtractor={item => item.id}
                        />
                    </SafeAreaView>
                </View>
            </View>
        )
    }
}

Just added the navigation action to the code above. You have to access the params object in your Details Screen

//Details Screen
class DetailsScreen extends React.Component {
  render() {
    const { routes } = this.props;
    return (
      <View>
      //Your component
        <Text>{routes.data.name}</Text>
      </View>
    );
  }
}

Just a side note. If you have a problem when navigating to a nested stack you can navigate this way using params

navigation.navigate(<YourParent>, {
  screen: <YourDesiredScreen>,
  params: { <YourObject> },
});

I hope it helps, at least as a guide. I didn't tested it, that's why I asked you to upload your code to expo.

Solution 2:^[2]

I use react-navigation and couldn't be happier. All the navigation needed can be done with a simple:

this.props.navigation.navigate('ScreenName', {param1: 'Hello', param2: 'World'})

and then, when on the screen desired, get the param:

const { param1, param2 } = this.props.route.params;

More details here.

And, of course, if using function components it is even easier.

Solution 3:^[3]

This example is form my 1st react-native-expo project but I hope that it will help you.

Bottom code is for two stack screens where I have PlayersTab screen and Player so main focus is to access Player with parms from PlayersTab using react-navigation

Navigation is in props object all you need is to destructor it in component const PlayersList = ({ navigation }) => {//your code}

import { View, Text } from 'react-native';
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import PlayersList from '../personal_data_screen/PlayersList';
import PersonalDataScreenPlayer from'../personal_data_screen/PersonalDataScreenPlayer';

const Stack = createNativeStackNavigator();

const PersonalPlayerDataNavigator = ({ loginDataObject }) => {
return (
  <Stack.Navigator>
   <Stack.Screen options={{ headerShown: false }} name='PlayersTab'>
     {(props) => (
      <PlayersList {...props} loginDataObject={loginDataObject} />
     )}
   </Stack.Screen>
   <Stack.Screen options={{ headerShown: false }} name='Player'>
    {(props) => <PersonalDataScreenPlayer {...props} />}
   </Stack.Screen>
  </Stack.Navigator>
 );
};

export default PersonalPlayerDataNavigator;

FlatList witch is in PlayersTab looks like this

<FlatList
   data={Object.keys(friendList.data)}
   renderItem={renderItem}
   keyExtractor={keyExtractor}
   navigation={navigation}
 />

const renderItem = ({ item }) => (
<Item
  navigation={navigation}
  account_id={friendList.data[item].account_id}
  nickname={friendList.data[item].nickname}
/>

const Item = ({ nickname, account_id, navigation }) => (
<TouchableOpacity
  onPress={() => navigation.navigate('Player', { account_id: account_id })}>
  <View style={styles.itemView}>
    <Text style={styles.playerNicknameText}>{nickname}</Text>
  </View> 
</TouchableOpacity>

And code for Player screen

import React from 'react';
import { View, Text } from 'react-native';

const PersonalDataScreenPlayer = ({ route }) => {

return (
  <View
   style={{
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
   }}>
   <Text>{route.params.account_id}</Text>
 </View>
 );
};

export default PersonalDataScreenPlayer;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ian Vasco
Solution 2	Gabriel Amorim
Solution 3	Imra Ko?iš

'React native navigation in flatlist

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]