gifted-chat renderAction prop won't call a function - react-native

Question

I'm trying to make a custom menu to share pictures and location using the renderAction prop in gifted-chat. I can't get it to call a function. renderActions={console.log('hello')} outputs as expected, for some reason functions aren't being called.
I've looked at code examples, and I can't find anything that I'm missing - but obviously I'm missing something.
here's the code. If there's any extra info that would be helpful, please let me know and I'll add it. Still new to stack.
renderActions > console.log() doesn't get called
renderActions() {
console.log('renderActions called');
}
renderAction={console.log()} get's called.
renderActions={this.renderActions} does not get called.
I've tried passing it in every way I can think of:
{() = > this.renderActions()}, {this.renderActions.bind(this)}, {this.renderActions} ... nothing seems to work.
render() {
let bgColor = this.props.route.params.bgColor;
return (
<View style={[styles.bodyContent]}>
<GiftedChat
renderBubble={this.renderBubble.bind(this)}
renderSystemMessage={this.renderSystemMessage.bind(this)}
renderInputToolbar={this.renderInputToolbar.bind(this)}
renderActions={() => this.renderActions()}
messages={this.state.messages}
onSend={(messages) => this.addMessage(messages)}
user={{
_id: this.state.uid,
}}
/>
{Platform.OS === 'android' ? (
<KeyboardAvoidingView behavior="height" />
) : null}
</View>
);
}
Any help would be greatly appreciated. I'm sure I'm missing something obvious, but I'm completely stumped. Thank you!

Answer 1

render action is not supposed to console log, if you see what it returns you will see it returns JSX
import {GiftedChat, InputToolbar} from 'react-native-gifted-chat';
// custom action
const customAction = () => {
return(
<View>
<Text>Custom Action</Text>
</View>
);
}
<GiftedChat
renderInputToolbar={props => {
return (
<InputToolbar
{...props}
containerStyle={styles.chatWithoutBorder}
renderComposer={() => <CustomComposer {...props} />}
renderActions={ <CustomAction /> }
renderSend={() => <CustomSend {...props} />}
/>
);
}}
/>
all these custom components are actually normal components you can create it on your own, all you need is to send props for it
and for the footer below the message box, you will need this renderAccessory as described here in the https://github.com/FaridSafi/react-native-gifted-chat

Answer 2

Thanks to my tutor, I have an answer!
The renderInputToolbar={} prop overwrites renderActions={}. I ended up not using the renderActions prop in the <GiftedChat /> component. Instead passing it as a prop to the <InputToolbar />.
Here's the code:
` <GiftedChat
renderBubble={this.renderBubble.bind(this)}
renderSystemMessage={this.renderSystemMessage.bind(this)}
renderInputToolbar={this.renderInputToolbar.bind(this)}
//renderActions={this.renderActions.bind(this)}
messages={this.state.messages}
onSend={(messages) => this.addMessage(messages)}
user={{
_id: this.state.uid,
}}
/>`
Then the renderInputToolbar method:
renderInputToolbar() {
if (this.state.onlineStatus == false) {
} else {
return <InputToolbar renderActions={this.renderActions} />;
}
}