How do I change the color/icon of the default action button

Question

Is it possible to change the icon or at least the color/style of the default action button?

I haven't found anything useable in the source code. I'm using the following code, which displays the default action button:

   onPressActionButton={this.handleActionButtonPress}

I want to change the circle + button in the left bottom corner.

Answer 1

Define custom Action buttons inside:

<GiftedChat
   ...
   renderActions={messages => this.micBtn(messages)}
   ...
/>

and then define the custom Button's appearance:

micBtn = (sendProps) => {
      return (
        <View flexDirection='row' onTouchStart={messages => this.micBtnPressed(sendProps.messages)}>
        <TouchableOpacity style={styles.myStyle} activeOpacity={0.5}>
        <Image
          source={{
            uri:
              'https://img.icons8.com/material-rounded/50/000000/microphone.png',
          }}
          style={styles.MicIconStyle}
        />
      </TouchableOpacity>
      </View>
      );
    }
  }
micBtnPressed(messages=[]){
    //do something useful here
    console.log("Current Inputbox content: ",messages)
  }

Finally, define styles, for example:

myStyle: {
    flexDirection: 'row',
    alignItems: 'center',
    //backgroundColor: '#485a96',
    borderWidth: 0.5,
    borderColor: '#fff',
    height: 40,
    width: 35,
    borderRadius: 5,
    margin: 5,
  },
  MicIconStyle: {
    padding: 5,
    marginRight: 10,
    height: 35,
    width: 35,
    resizeMode: 'contain',
  },

A final comment, I believe that by defining a custom Action button, you are also giving up (overriding) the onPressActionButton={this.handleActionButtonPress} directive, which only works when you use the default, uncustomized, button. Therefore, that's why I call the action method 'micBtnPressed' from inside my custom object.