textInputStyle does not affect whole input box

Issue Description

I am trying to add support for dark mode in my app, but I am having issues with the input bar in gifted chat. I found the textInputStyle property, however it does not seem to cover the whole input bar.

See:

How can I make the rest of the input bar with dark background color?

Steps to Reproduce / Code Snippets

Code I am using:

   return (
      <SafeAreaView style={ styles.container }>
         <GiftedChat
            inverted={true}
            placeholder="Nachricht"
            renderBubble={_renderBubble}
            renderTime={_renderTime}
            renderSend={_renderSend}
            messages={messages}
            onSend={_sendMessage}
            listViewProps={{ style: styles.contentContainer}}
            textInputStyle={styles.contentContainer}
            user={{
               _id: 1,
            }}
         />
      </SafeAreaView>
   );

Additional Information

• Nodejs version: [FILL THIS OUT]
• React version: [FILL THIS OUT]
• React Native version: 0.61.5
• react-native-gifted-chat version: 0.13.0
• Platform(s) (iOS, Android, or both?): iOS (simulator)
• TypeScript version: [FILL THIS OUT]

[mkhoussid]

Looking at the source code, this is the component to override.

You’d have,

<GiftedChat
  renderInputToolbar={props => <CustomInputToolbar {...props} />}
/>

And CustomInputToolbar.js would look like,

import React from 'react';
import { StyleSheet } from 'react-native';
import { InputToolbar } from 'react-native-gifted-chat';

const styles = StyleSheet.create({
  inputToolbarBackground: {
    backgroundColor: 'blue',
  },
});

export default = props => (
  <InputToolbar containerStyle={styles.inputToolbarBackground} {...props} />
);

[Trashpants]

I’m trying to theme this too. It seems to be kind of messy to me. For some reason the input on iOS is weirdly skewed and im struggling to align it 😢

The way it seems to be is to override the renderInputToolbar

so you’d have

<GiftedChat
        messages={messages}
        onSend={(message) => {
          console.log(message);
        }}
        user={{
          _id: 1,
        }}
        renderInputToolbar={(props) => MessengerBarContainer(props)}
        renderComposer={(props) => MessengerBar(props)}
        renderSend={(props) => MessengerSend(props)}
 />

and then

import { Composer, InputToolbar, Send } from "react-native-gifted-chat";

const MessengerBarContainer = (props) => {
  return (
    <InputToolbar
      {...props}
      containerStyle={{
        backgroundColor: colors.grey200,
        alignContent: "center",
        justifyContent: "center",
        borderWidth: 0,
        paddingTop: 6,
        marginHorizontal: 6,
        borderRadius: 32,
        borderTopColor: "transparent",
      }}
    />
  );
};