Why is my variable not properly being passed in React Native?

Question

I have App.js as follows:

import React from 'react';

import Home from "./components/Home";
import Chat from "./components/Chat";

import {
    Router,
    Scene
} from "react-native-router-flux";

import {
  Platform
} from 'react-native';

class App extends React.Component {
    render() {
        return (
            <Router>
                <Scene key="root" style={{paddingTop: Platform.OS === 'ios' ? 64: 54}}>
                    <Scene key="home" component={Home} title="Home" />
                    <Scene key="chat" component={Chat} title="Chat" />
                </Scene>
            </Router>
        );
    }
}

export default App

then I home Home.js as follows:

import React from "react";

import {
    View,
    Text,
    StyleSheet,
    TextInput,
    TouchableOpacity
} from "react-native";

import {
  Actions
} from "react-native-router-flux";

class Home extends React.Component {
  state = {
    name: ""
  };
    render() {
        return (
            <View>
                <Text style={styles.title}>
                    Enter your name:
                </Text>
                <TextInput
                  style={styles.nameInput}
                  placeholder="John Snow"
                  onChangeText={(text) => {
                    this.setState({
                      name: text
                    });
                  }}
                  value={this.state.name}
                />
            <TouchableOpacity onPress={() => {
                // navigate to the second screen, and to pass it the name
                Actions.chat({
                  name: this.state.name
                });

            }}
            >
              <Text style={styles.buttonText}>
                Next
              </Text>
            </TouchableOpacity>
            </View>
        )
    }
}

var styles = StyleSheet.create({
  title: {
    marginTop: 20,
    marginLeft: 20,
    fontSize: 20
  },
  nameInput: {
    padding: 5,
    height: 40,
    borderWidth: 2,
    borderColor: "black",
    margin: 20
  },
  buttonText: {
    marginLeft: 20,
    fontSize: 20
  }
});

export default Home;

Finally I have Chat.js as follows:

import React from "react";
import PropTypes from "prop-types";

import {
    View,
    Text
} from "react-native";

class Chat extends React.Component {
    render() {
        return (
            <View>
                <Text>
                    Hello {this.props.name}
                </Text>
            </View>
        )
    }
}

Chat.defaultProps = {
  name: "John"
};

Chat.propTypes = {
  name: PropTypes.string
};

export default Chat;

When I enter a name and click next, I get:

Hello chat

ie the name does not appear.

What am I doing wrong?

Edit:

In Home.js, when I do:

console.log(this.state.name);

I get the name as expected.

But in chat.js when I do:

console.log(this.props);

I get:

which is consistent with the output, but otherwise I'm mystified as to where 'chat' comes from.

Answer 1

Using react-native-router-flux, this.props.name points to the name of the scene key. So in this case, the name of your scene key is 'chat' in App.js.

I believe if you change the name of the prop in Actions.Chat in Home.js to something different from name, i.e. person, and reference person with this.props.person in Chat.js, you should be fine.