React Native Prop Not Being Passed To Child Component - reactjs

Question

I am using react-native-router-flux as a router. This is my very first RN app in which I have a Home screen, and a chat screen. My home screen is working fine, and I am able to successfully navigate to to the chat screen upon button press. However, my home screen has an enough form and the value that the use enters (name) I want to pass to the chat screen as a prop.
Main App component
import React, { Component } from 'react';
import Home from './components/Home';
import Chat from './components/Chat';
import {
Router,
Stack,
Scene,
} from 'react-native-router-flux';
class App extends Component {
render() {
return (
<Router>
<Stack key='root'>
<Scene key='home' component={Home} title='Home' />
<Scene key='chat' component={Chat} title='Chat' />
</Stack>
</Router>
)
}
}
export default App;
Home component
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
TouchableOpacity,
} from 'react-native';
import {
Actions,
} from 'react-native-router-flux';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
}
}
render() {
return (
<View>
<Text style={styles.title}>
Enter your name:
</Text>
<TextInput
style={styles.nameInput}
placeholder='why so serious??'
onChangeText={(text) => {
this.setState({name: text})
}}
value={this.state.name}
/>
<TouchableOpacity
onPress={() => {
Actions.chat({
name: this.state.name,
})
}}
>
<Text style={styles.buttonText}>
Next
</Text>
</TouchableOpacity>
</View>
)
}
}
const 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;
if I alert this.state.value on the onPress() function, the value is being captured and alerted.
However,
Actions.chat({
name: this.state.name,
})
}}
isn't recieving this input value. When the app goes to the chat screen it just says "hello"
Chat component
import React, { Component } from 'react';
import {
View,
Text,
} from 'react-native';
class Chat extends Component {
render() {
return (
<View>
<Text>
Hello {this.props.name}
</Text>
</View>
)
}
}
export default Chat;
Am I simply over looking something here? any help is appreciated in passing prop from home to chat component.
edit:
In the chat component when i alert(this.props.name) it alert Hello chat. The key from <Scene key='chat' component={Chat} title='Chat' /> in the app component is being passed down instead of the input value from the home component. Not sure why this is happening

Answer 1

seems like name is reserved prop for action key you can do something like that
Actions.chat({
userName: this.state.name,
})
and in your chat class
class Chat extends Component {
render() {
return (
<View>
<Text>
Hello {this.props.userName}
</Text>
</View>
)
}
}