React Native - Pass data to another component

Question

I’m having a question, I’m starting with React On and I’m building an app that contains some components and uses React-navigation. The doubt is as follows:

From this component that renders several items, when I click I want to receive this data in the Detail component.js.

import React, { Component } from 'React';
import {
    ScrollView,
    View,
    StyleSheet,
    TouchableOpacity,
    ActivityIndicator,
} from 'react-native';
import axios from 'axios';
import Itens from './Itens';
import InputSearch from './InputSearch';

export default class ListaItens extends Component {
    constructor(props){
        super(props);

        this.state = { listaItens: [] };
    }

    componentWillMount() {
        axios.get('http://ourikas.github.io/companies.json')
            .then(dados => this.setState({listaItens: dados.data}))
            .catch(() => this.setState('erro ao recuperar dados'));
    }

    onLearnMore = (item) => {
        this.props.navigation.navigate('DetalhesItem', { ...item });
    };

    render() {

        if(this.state.listaItens.length > 0){
        return(
            <View>
                <View>
                    <InputSearch />
                </View>

                <ScrollView>

                    {this.state.listaItens.map((item, i) => {
                        return (<View key={i}>
                            <TouchableOpacity onPress={() => this.props.navigation.navigate('DetalhesItem', this.onLearnMore(item))}>
                            <Itens key={item.id} item={item} />
                            </TouchableOpacity>
                        </View>)
                    })}
                </ScrollView>
            </View>

        );
    } return(<ActivityIndicator size="large" color="#666" style={styles.loadding} />);
    }
}

const styles = StyleSheet.create({
    loadding: {
        marginTop: 250
    }
});

Here is the component Detail.js

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

export default class DetalhesItem extends Component {

    constructor(props){
        super(props);
    }

    render(){

        const { name, email } = this.props.navigation.state.params;

        return(
            <Text>{ alert(email) }</Text>
        );
    }
}


Não sei se vai precisar, mais aqui esta o código do App.js

    import React, { Component } from 'react';
import {
  Platform,
  View,
} from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons';

import ListaItens from './src/components/ListaItens';
import DetalhesItem from './src/components/DetalhesItem';
import Categorias from './src/components/Categorias';

export default class App extends Component {
  render() {
    return (
      <Cenas />
    );
  }
}

const Cenas = StackNavigator({
    ListaItens: {
      screen: ListaItens,
      navigationOptions: {
        title: 'Bodokas',
      },
    },

    DetalhesItem: {
      screen: DetalhesItem,
      navigationOptions: {
        title: 'voltar',
      },
    }
});


// const TabNav = TabNavigator({

//   ListaItens: {
//     screen: ListaItens,
//     navigationOptions: {
//       tabBarLabel: 'todos',
//     }
//   },

//   Categorias: {
//     screen: Categorias,
//     navigationOptions: {
//       tabBarLabel: 'Categorias',
//     }
//   },

//   DetalhesItem: {
//     screen: DetalhesItem,
//     navigationOptions: {
//       tabBarLabel: 'mais',
//     }
//   }
// }, {
//   tabBarPosition: 'bottom'
// });

Answer 1

Speak guys, with the help of 2 people from the group React Native Brazil I managed to solve this problem.

I’ll leave the code here for you to base on or solve if you have the same problem.

Listitems:

onLearnMore = (item) => {
    this.props.navigation.navigate('DetalhesItem', item);
};

render() {

    if(this.state.listaItens.length > 0){
    return(
        <View>
            <View>
                <InputSearch />
            </View>

            <ScrollView>

                {this.state.listaItens.map((item, i) => {
                    return (<View key={i}>
                        <TouchableOpacity onPress={() => this.onLearnMore(item)}>
                        <Itens key={item.id} item={item} />
                        </TouchableOpacity>
                    </View>)
                })}
            </ScrollView>
        </View>

Detail:

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

export default class DetalhesItem extends Component {

constructor(props){
    super(props);
}

render(){

    const params = this.props.navigation.state.params;


    return(
        <View>
            <Text>{ params.name }</Text>
            <Text>{ params.description }</Text>
            <Text>{ params.contact.email }</Text>
        </View>
    );
}

}

App.js:

import React, { Component } from 'react';
import {


Platform,
  View,
} from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons';

import ListaItens from './src/components/ListaItens';
import DetalhesItem from './src/components/DetalhesItem';
import Categorias from './src/components/Categorias';

export default class App extends Component {
  render() {
    return (
      <Cenas />
    );
  }
}

const Cenas = StackNavigator({
    ListaItens: {
      screen: ListaItens,
      navigationOptions: {
        title: 'Bodokas',
      },
    },

    DetalhesItem: {
      screen: DetalhesItem,
      navigationOptions: {
        title: 'voltar',
      },
    }
});


// const TabNav = TabNavigator({

//   ListaItens: {
//     screen: ListaItens,
//     navigationOptions: {
//       tabBarLabel: 'todos',
//     }
//   },

//   Categorias: {
//     screen: Categorias,
//     navigationOptions: {
//       tabBarLabel: 'Categorias',
//     }
//   },

//   DetalhesItem: {
//     screen: DetalhesItem,
//     navigationOptions: {
//       tabBarLabel: 'mais',
//     }
//   }
// }, {
//   tabBarPosition: 'bottom'
// });

Possibly the errors were occurring because I was using Tabnavigator instead of Stack and also had some errors of passing an object an object as parameter to the navigate, so doing the function outside solved this.

Answer 2

use the function: getParam(nameParameter, defaultValue).

thus:this.props.navigation.getParam(paramName, defaultValue).

because if you use directly : "const { name, email } = this.props.navigation.state.params;" and there are no parameters called, the application will break.