React-native-gifted-chat: Warning: Failed prop type: Invalid props.style key '0' supplied to 'ParsedText'

[LG1710]

Issue Description

When i send a message in my react-native application, using react-native-gifted-chat, i get a warning concerning ParsedText.

Here is the warning i get :

Warning: Failed prop type: Invalid props.style key '0' supplied to 'ParsedText'.
Bad object: {
"0": {
"color":"white",
"textDecorationLine":"underline"
},
"1": {
"color":"darkturquoise"
},
"color":"#A4A4A4"
}

Here is the react-native code :

renderMessageText(messageTextProps) { return ( <MessageText {...messageTextProps} linkStyle={{ left: { color: 'darkturquoise' }, right: { color: 'darkturquoise' } }} /> ); }

<GiftedChat messages={this.state.messages} onSend={this.onSend} user={user} showUserAvatar={true} renderUsernameOnMessage={true} showAvatarForEveryMessage={true} renderMessageText={this.renderMessageText} parsePatterns={(linkStyle) => [ { pattern: /#(\w+)/, style: { ...linkStyle, color: '#A4A4A4' }, onPress: this.onPressHashtag } ]} />

Steps to Reproduce / Code Snippets

Send a message in the chat

Expected Results

No warning

Additional Information

• React version: 16.8.3
• React Native version: 0.59.4
• react-native-gifted-chat version: 0.9.6
• Platform(s) (iOS, Android, or both?): Android

[LG1710]

I found a correction, this is due to ...linkStyle which has been added in my GiftedChat component parsePatterns property : { pattern: /#(\w+)/, style: { ...linkStyle, color: '#A4A4A4' }, onPress: this.onPressHashtag }, if you delete ...linkStyle, replacing this with : { pattern: /#(\w+)/, style: {textDecorationLine: 'underline', color: '#A4A4A4' }, onPress: this.onPressHashtag } the warning disappears

[LG1710]

Could you explain me what happens ?

[skizzo]

I have the same issue, and no clue about how to get rid of these warnings. Here's my code:

<GiftedChat
  parsePatterns={this.getParsePatterns}
  {...otherGiftedChatProps}
  />

// ...

getParsePatterns = (linkStyle) => {
  const {debug} = this.props
  const linkColor = colors.cicyan

  const patternHashtag =  /#((\w)+(-)*)*/

  var urlReg = /((https:\/\/|http:\/\/|www\.)+(|[a-z/]|\.)+[^?.,! ])/igm
  const patternUrl = new RegExp (urlReg)

  var emailReg = /([\w\.\-_]+)?\w+@[\w-_]+(\.\w+){1,}/igm
  const patternEmail = new RegExp (emailReg)

  return [
    { 
      pattern: patternHashtag, // hashtag
      style: {...linkStyle, fontFamily: fonts.bold, color: !debug ? linkColor : "blue"}, 
      onPress: this.onPressHashtag,
    },
    { 
      pattern: patternEmail,
      style: {...linkStyle, fontFamily: fonts.bold, color: !debug ? linkColor : "red"}, 
      onPress: this.onPressEmail,
    },
    { 
      type: "url",
      pattern: patternUrl,
      style: {...linkStyle, fontFamily: fonts.bold, color: !debug ? linkColor : "green"}, 
      onPress: this.onPressUrl,
    },
  ]
}

[LG1710]

remove ...linkStyle in your code

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Miyou]

A more correct way to fix it would be to swap {...linkStyle} for Object.assign({}, ...linkStyle). This is because linkstyle is an array of objects. @FaridSafi would be good if you could update the example in the readme.

[Felicity05]

I don't have linkStyle in my code and I keep getting the warning. Help, please?