Posted in Uncategorized

textInputStyle does not affect whole input box

   March 2, 2021  1 Comment on 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]
Full dicussion on github.com

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