React-native-gifted-chat: Question Regarding customising Input Toolbar Design

[pavanmehta91]

How to pass style props to Input Toolbar Design to customize it's color and other style properties

Additional Information

• React Native version: 0.47
• react-native-gifted-chat version: 0.3
• Platform(s) (iOS, Android, or both?): Both

[mafiusu]

You could copy the InputToolbar.js in the src folder and render your Edited InputToolbar.js in the renderInputToolbar prop of the GiftedChat. Basically it will look like this.

<GiftedChat
     renderInputToolbar={this.renderInputToolbar} 
/>

renderInputToolbar(props){
     // Here you will return your custom InputToolbar.js file you copied before and include with your stylings, edits.
     return (){
          <InputToolbar {...props} />
     }
}

[pavanmehta91]

Thanks

[xcarpentier]

I close this issue but create a FAQ in readme to refer it: https://github.com/FaridSafi/react-native-gifted-chat#questions

[nadbm]

I'll add on to the answer that the styles can be overridden without copying the whole component:

import { GiftedChat, InputToolbar } from 'react-native-gifted-chat'
//Note that I'm just importing the InputToolbar
<GiftedChat
     renderInputToolbar={this.renderInputToolbar} 
/>

  renderInputToolbar (props) {
     //Add the extra styles via containerStyle
    return <InputToolbar {...props} containerStyle={{borderTopWidth: 1.5, borderTopColor: '#333'}} />
  }

[aamir-munir]

I am trying to hide input toolbar based on a state, below is my code:

messages={this.state.messages.reverse()}
renderInputToolbar={this.renderInputToolbar(this.state.toolbar)}
onSend={messages => this.onSend(messages)}
user={{
_id: 2,
}}
/>

renderInputToolbar(){
//if(this.state.toolbar){
return(

);
//}
}

but I cannot access state in that method? what I am doing wrong? or how I can do that?

[roykhoury]

Hi,

For some reason, when i try to add a backgroundColor to my InputToolbar

<InputToolbar {...props} containerStyle={styles.messageInput} placeholder="Type your message here..." />
and
messageInput: { borderTopColor: '#222', backgroundColor: 'transparent', },

the text color does not change colors.
And so now my text still black which is the same color as my background color, so we cannot see the text anymore.

I tried adding a color: 'white' but containerStyle does not accept these kind of attributes.
I tried style={{color: 'white'}} but no luck as well.

Any help would be appreciated thank you

[LPranulis]

Hi,

For some reason, when i try to add a backgroundColor to my InputToolbar

<InputToolbar {...props} containerStyle={styles.messageInput} placeholder="Type your message here..." />
and
messageInput: { borderTopColor: '#222', backgroundColor: 'transparent', },

the text color does not change colors.
And so now my text still black which is the same color as my background color, so we cannot see the text anymore.

I tried adding a color: 'white' but containerStyle does not accept these kind of attributes.
I tried style={{color: 'white'}} but no luck as well.

Any help would be appreciated thank you

Hello, roykhoury,

Just use placeholderTextColor="#fff" if you need to change a placeholder text color or textInputStyle={{ color: "#fff" }} if you need to change users input text color.

Happy coding! ;)

[chandlervdw]

@LPranulis glad to have found textInputStyle and so forth here. But it looks like they aren't props on InputToolbarProps; thusly, typescript complains. Am I missing something?

[saurabh-dk]

Hi,
For some reason, when i try to add a backgroundColor to my InputToolbar
<InputToolbar {...props} containerStyle={styles.messageInput} placeholder="Type your message here..." />
and
messageInput: { borderTopColor: '#222', backgroundColor: 'transparent', },
the text color does not change colors.
And so now my text still black which is the same color as my background color, so we cannot see the text anymore.
I tried adding a color: 'white' but containerStyle does not accept these kind of attributes.
I tried style={{color: 'white'}} but no luck as well.
Any help would be appreciated thank you

Hello, roykhoury,

Just use placeholderTextColor="#fff" if you need to change a placeholder text color or textInputStyle={{ color: "#fff" }} if you need to change users input text color.

Happy coding! ;)

This reply is outdated (or too vague). This is proper way to do it in the current version.
Import Composer from 'react-native-gifted-chat' and then
<GiftedChat renderInputToolbar={props => ( <InputToolbar {...props} containerStyle={{ backgroundColor: "black", }} renderComposer={props1 => ( <Composer {...props1} textInputStyle={{ color: "white"}} /> )} /> )} ... />