How to pass message from children Input to parent Chat in react-native-gifted-chat - react-native

Question

I got a chat based on react-native-gifted-chat, with a children InputBox component that has the layout for the input and some buttons plus the Send button.
I'm passing 2 functions to handle onSend and the camera, but I was wondering how to send the text that I'm writing on the InputBox to parent that contains the GiftedChat.
GiftedChat handles an array of messages, but how do I create a new text message based on the input and the button onPress ?
Here's my current code:
On Parent
constructor(props) {
super(props)
this.handleCameraPress = this.handleCameraPress.bind(this);
this.onSend = this.onSend.bind(this);
this.state = {
chatData: {},
messages: []
}
}
onSend(messages = []) {
alert('sending message');
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, messages),
}))
}
handleCameraPress() {
alert('camera tapped');
}
renderInputToolbar(props) {
return ( <InputBox
{...props}
messages={ this.messages }
onSend={ this.onSend }
handleCameraPress={ this.handleCameraPress }
containerStyle={ styles.inputToolbarStyle }
/>);
}
This is how the GiftedChat looks like:
<GiftedChat
style={{ zIndex: 1 }}
messages={this.state.messages}
bottomOffset={Platform.OS === "ios" ? 335 : 0}
maxComposerHeight={150}
isAnimated={true}
user={{ _id: 1 }}
renderInputToolbar={ this.renderInputToolbar.bind(this) }
/>
On Children
render() {
return (
<View style={ styles.container }>
<TouchableOpacity
activeOpacity={0.6}
style={styles.cameraButton}
onPress={ this.props.handleCameraPress }>
<Icon name='md-camera' style={ styles.cameraIcon } />
</TouchableOpacity>
<TextInput
style={ styles.textInput }
placeholder={i18n.t('chatInputPlaceholder')}
returnKeyType={'send'}
// onChangeText={ message => this.setState({ message })}
// value={this.props.message}
blurOnSubmit={false}
ref={'chatInputRef'}
/>
<Button
onPress={ this.props.onSend }
style={ styles.sendButton}>
<Icon name='md-send' style={ styles.sendIcon } />
</Button>
</View>
);
}
I have to I guess pass a this.props.message to this.props.onSend? And then merge it to parent's messages?

Answer 1

You have to create a state variable , which will be your current Message , and then in Gifted chat , you implement :
onInputTextChanged={text => {this.setState({typingMessage: text});}}
So now your "this.state.typingMessage" , will always have the value that you are writing in your InputToolbar
If you have a custom render you can access to Input Toolbar value like this with "props.text" :
renderSend(props) {
return (
<TouchableOpacity onPress={() => props.onSend({
_id: 10,
text: props.text,
createdAt: new Date(),
user: {
_id: 1,
name: 'Mike',
},
})}>
</TouchableOpacity>
);
}