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:

<GiftedChat
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(
<InputToolbar {...props} />
);
//}
}

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

[Revolt9k]

How to change placeholder styles?

[RobyCigar]

In case someone doesn't understand how to use it with functional component here's my full code

import React, { useState, useCallback, useEffect } from 'react'
import { GiftedChat, InputToolbar } from 'react-native-gifted-chat'
import { StyleSheet } from 'react-native'

export default function ChatScreen() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    setMessages([
      {
        _id: 1,
        text: 'Hi, how are you?',
        createdAt: new Date(),
        user: {
          _id: 2,
          name: 'React Native',
          avatar: 'https://placeimg.com/140/140/any',
        },
      },
    ])
  }, [])

  const onSend = useCallback((messages = []) => {
    setMessages(previousMessages => GiftedChat.append(previousMessages, messages))
  }, [])

  function renderInputToolbar (props) {
    return (
      <InputToolbar {...props} containerStyle={styles.toolbar} />
    )
  }

  return (
    <>
    <GiftedChat
      renderInputToolbar={renderInputToolbar}
      messages={messages}
      onSend={messages => onSend(messages)}
      user={{
        _id: 1,
      }}
    />
    </>
  )
}

const styles = StyleSheet.create({
  toolbar: {
    borderRadius: 30
  }
})

[shayella]

Hello, how can I add icons e.g. a camera icon that lets a user upload a photo right before the input field?