How to navigate between components in different files and pass data react native

Question

I am making an app for now it has 2 components. My directory structure is as follows:

-app
    -components
        -Dashboard
            -index.js
        -Home
            -index.js
-App.js

This is my Dashboard/index.js:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import { Header,  Icon, SearchBar, ListItem } from 'react-native-elements';


class Dashboard extends Component{
  operate() 
  {
    console.log('hello')
  }
  render() {

    return (

      <View style={styles.container}>
        <Header
          leftComponent={{ icon: 'menu', color: '#fff' }}
          centerComponent={{ text: 'App', style: { color: '#fff' } }}
          rightComponent={{ icon: 'home', color: '#fff' }}
        />
            <View>
                <Button title='back' onPress={() => this.operate()}/>
                <Button title='bookmark' onPress={() => this.operate()}/>
            </View>
            <View>
            <Text>
              This is Dashboard Screen
            </Text>
          </View>

      </View>
    );
  }
}

export default Dashboard;

This is my Home/index.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import { Header,  Icon, SearchBar, ListItem } from 'react-native-elements';


class Home extends Component{
  operate() 
  {
    console.log('hello')
  }
  render() {

    return (

      <View style={styles.container}>
        <Header
          leftComponent={{ icon: 'menu', color: '#fff' }}
          centerComponent={{ text: 'App', style: { color: '#fff' } }}
          rightComponent={{ icon: 'home', color: '#fff' }}
        />
            <View>
              <Text>
                This is HOME
              </Text>
            </View>
            <View>
            <Button
              title="Go to Details... again"
              onPress={() => this.props.navigation.navigate('Dashboard')}
            />  
            </View>
            <View>
            {
              list.map((l, i) => (
                <ListItem 
                  key={i}
                  title={l.name}
                />
              ))
            }
          </View>

      </View>
    );
  }
}

const list = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  }
]



export default Home;

And this is my App.js

import React, {Component} from 'react';
import { createStackNavigator, createAppContainer } from "react-navigation";
import Home from './app/components/Home'
import Dashboard from './app/components/Dashboard'


const AppNavigator = createStackNavigator({
  home: {
    screen: Home
  },
  dashboard: {
    screen: Dashboard
  }
});

export default createAppContainer(AppNavigator);

So I am stuck here. I followed different tutorials for this. I am displaying the list.name on my home and when any name is pressed the user can go to Dashboard with rest of the details of associated with that name. But I am unable to navigate to Dashboard and hence I have no idea how to pass that data. So my question is this -How do I navigate between these component and pass the data as well?

Thanks

Answer 1

In react-navigation there is a params parameter that can get passed between screens.

The sending screen uses the following to navigate:

this.props.navigation.navigate('Details', {
    itemId: 86,
    name: 'anything you want here',
    moreDetail: {name: 'can be object'},
});

Then on the other screen use the following to retrieve the data:

const { navigation } = this.props;
const itemId = navigation.getParam('itemId', 'NO-ID-DEFAULT');
const otherParam = navigation.getParam('name', 'some default value');
const details = navigation.getParam('moreDetail', {});

Also reason you cannot even navigate right now is because you have:

onPress={() => this.props.navigation.navigate('Dashboard')}

while it should be:

onPress={() => this.props.navigation.navigate('dashboard')}

Since you defined as lowercase in App.js

Reference on how to navigate: https://reactnavigation.org/docs/en/navigating.html

Reference on how to pass params: https://reactnavigation.org/docs/en/params.html

Answer 2

First, you must add the onPress() in your ListItem so that you will be able to press the name and pass the value as well.

list.map((l, i) => (
  <ListItem 
    key={i}
    title={l.name}
    onPress={()=>this._navigateToDashboard(l.name)}
  />
))

When the name is pressed, it will trigger the _navigateToDashboard() function and the l.name is the value that will be passed. The following code is how you're going to get the value in the function.

_navigateToDashboard(name){
    // navigate the dashboard screen and pass the value 
    this.props.navigation.navigate('dashboard', { any_variable_name:name })
}

From your dashboard, you can retrieve the passed data like this :

var name = this.props.navigation.state.params.any_variable_name;