[Android] Error "Value for value cannot be cast from String to Double" on send message

[paolospag]

Hello there,
I developed an app that works fine on iOS and now I want to compile the Android version, but I came across a strange error (see the attachment).

I would like to understand if it is a problem I can solve simply by updating the version of react-native-gifted-chat or the react-native core.

Steps to Reproduce / Code Snippets

• package.json

"dependencies": {
    "react": "16.6.3",
    "react-native": "0.57.8",
    ...
    "react-native-firebase": "5.2.1",
    "react-native-gifted-chat": "0.5.0",
    ...
}

• Chat.js

import React, { Component } from 'react';
import { GiftedChat, Send, Bubble } from 'react-native-gifted-chat';
...

export default class ChatScreen extends Component {
  state = {
    messages: []
  }
  chatRoomRef = null;
  unsubscribe = null;
  _chatRoomListener = (querySnapshot) => {
    const messages = querySnapshot.docs.map(doc => 
      createGiftedChatItem(doc.id, doc.data()) // --> a custom function to create message object
    );
    this.setState(prevState => ({
      ...prevState,
      messages
    }));
  }
  componentDidMount = () => {
    const { navigation } = this.props;
    // My custom Firebase methods
    this.chatRoomRef = database.chatRoomMessagesByPath(REF_TO_FIRESTORE_PATH);
    this.unsubscribe = this.chatRoomRef.orderBy('createdAt', 'desc').onSnapshot(this._chatRoomListener);
  }
  componentWillUnmount = () => {
    if (this.unsubscribe) {
      this.unsubscribe();
    }
  }
  sendMessageHandler = (messages = []) => {
    messages.forEach(message => {
      let lastMessage = createChatMessageItem(message); // --> a custom function to create message object
      this.chatRoomRef.add(lastMessage).then(() => 
        database.chatRoomByPath(path).update({lastMessage})
      ).then(() => {
        // --> other omitted methods here
      });
    });
  }
  render() {
    const { messages } = this.state;
    return (
      <GiftedChat
        user={{_id: XXXXXXXX}}
        locale="en"
        dateFormat="LL"
        timeFormat="LT"
        messages={messages}
        renderAvatar={null}
        renderSend={props => (
          <Send {...props} containerStyle={styles.sendBtn}>
            <MaterialIcon name="send" size={24} color={THEME_PRIMARY_COLOR} />
          </Send>
        )}
        renderBubble={props => (
          <Bubble 
            {...props} 
            wrapperStyle={{
              right: {backgroundColor: THEME_OWNER_CHAT_BUBBLE, padding: 12, borderRadius: 8}, 
              left: {backgroundColor: THEME_GUEST_CHAT_BUBBLE, padding: 12, borderRadius: 8}
            }}
            textStyle={{
              right: {color: THEME_GRAY_COLOR},
              left: {color: THEME_GRAY_COLOR}
            }}
            textProps={{
              style: {color: THEME_TEXT_COLOR}
            }}
          />
        )}
        onSend={message => this.sendMessageHandler(message)}
      />
    )
  }
}

Expected Results

I don't understand why on iOS everything works fine, while on Android the chat message is correctly saved on Firestore, but this error is shown.

Additional Information

• React version: 16.6.3
• React Native version: 0.57.8
• react-native-gifted-chat version: 0.5.0
• Platform(s): Android

[xcarpentier]

Did you try with v0.7.2?

[paolospag]

Hi @xcarpentier
I have not tried it yet, but I will do it in the next days.

In the meantime, I looked for similar issues and I found this:
facebook/react-native#23219

Do you think they can be related?

[xcarpentier]

Yes, I already experienced this weird transformation thing on android.
If it is, there is no reason to keep this issue. Could you please close it?
I mean if you try to make a style transformation on your side.

Thanks

[paolospag]

No, I don't make any transformation and I can't really explain why it happens.
I'm quite confused... I will try to update from 0.5.0 to 0.7.2 and I will let you know.

[xcarpentier]

Apparently, this is an animation issue. Do you have any animation?

[paolospag]

I understood it is an animation issue, but I don't have any animation on this screen, but in other screens sure.

I do not think that animations in other screens can cause this error...

[xcarpentier]

If the other screen with animation is on a navigation stack or tab and comes before the chat it's still in memory (still mounted).

[paolospag]

Oh, I'm sorry for the waste of time...
I found the problem, it's related to the style applied to send button:

sendBtn: {
  ...
  transform: [{rotate: '-30deg'}]
}

but I don't understand why can not I apply a transformation to the send button?
Is there a workaround?

[xcarpentier]

no worries

[rajeevrocker7]

For 'TextInput' in style try after removing backgroundColor, color, if passed.

textInputStyle: {
...
backgroundColor: '#FFFFF', // remove this
color: 'black' . //remove this
}