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:
Screenshot

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]

1 possible answer(s) on “textInputStyle does not affect whole input box

  1. 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",
          }}
        />
      );
    };