0

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!

B33Gs
  • 1
  • 2

2 Answers2

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

Hamed
  • 317
  • 1
  • 8
  • it worked for me, thanks bro – Mohamed Ahmed Oct 20 '21 at 14:41
  • Thanks for the feedback. I'll give that a go tomorrow. Before I was trying to console.log, I was using this.renderActions to return which was a separate component (and was imported), but the component wouldn't render. console logging was my attempt at trouble shooting. – B33Gs Oct 20 '21 at 23:42
0

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} />;
        }
      }
B33Gs
  • 1
  • 2