I have a react native app, with react-native-gifted-chat
. I wanted to change my fontFamily
in all places so I changed it in the renderComposer
and renderMessage
props. After adding the renderMessage
prop to my GiftedChat
component my Avatars
dissapeared. I tried to bring it back with the renderAvatar
, but it does not work…
How can I have custom fonts and custom Avatars
at the same time?
<GiftedChat
messages={messages}
onSend={onSend}
user={{
_id: 1,
avatar: USER_AVATAR,
name: USER_ID
}}
//Custom styles
dateFormat="YYYY/MM/DD"
timeFormat="HH:mm"
renderInputToolbar={props => customtInputToolbar(props)}
renderSystemMessage={props => customSystemMessage(props)}
renderSend={props => customSendButton(props)}
renderComposer={props => customComposer(props)}
renderMessage={props => customMessageBubble(props)}
renderAvatar={(props) => <Avatar {...props} />}
/>
...my styles...
export const customMessageBubble = props => {
const renderMessageText=(props)=>{
return (
<>
<MessageText
{...props}
textStyle={{
right:{
fontFamily:'QuicksandMedium'
},
left:{
fontFamily:'QuicksandMedium'
}
}}
/>
</>
)
}
return(
<Bubble
{...props}
renderMessageText={renderMessageText}
/>
)
}
export const customComposer = props => {
return(
<Composer
{...props}
placeholder={'Aa'}
textInputStyle={{
fontFamily:'QuicksandMedium',
}}
/>
)
}