0

I'm still not sure how to get this to work. I wanted to write a small chat app in expo. Right now I'm using a Button that, when clicked, should append a message to a gifted chat. I have two components that are not connected. One is called button.js and one chat.js. They are both displayed in the App.js. I tried writing a helper function in chat.js


    updateChatView(){
        //Debug only
        // console.log("TEST");
        this.setState(previousState => ({
              messages: GiftedChat.append(previousState.messages, {
                _id: "MSG ID",
                text: "TEXT YOU WANT TO SHOW",
                createdAt: new Date(),
                user: {
                  _id: "USER_ID",
                  name: "USER NAME",
                  avatar:"USER AVATAR URL",
                },
              }),
            }));

      }

I can see the console output TEST, but the state can't be set, because it seems like the Component (chat.js) is not mounted. I use this code to call the function.

import ChatView from './chatView';
const cv = new ChatView();

//Render function
  <View style={styles.container}>
        <Button title="Button" onPress={(e) => cv.updateChatView()} />
      </View>

I would think that the chat.js is mounted, as it's displayed? I have no real idea where to start. I tought about replacing state with redux, but I'm not sure if this would work.

Herr_Frodo
  • 1
  • 5
  • What are you trying to achieve with this one `messages: GiftedChat.append...` . And please show the code of this `GiftedChat` – Ertan Hasani Sep 25 '19 at 08:12
  • This is from the react-native-gifted-chat framework: https://github.com/FaridSafi/react-native-gifted-chat – Herr_Frodo Sep 25 '19 at 09:56

1 Answers1

0

I ended up just using redux instead of the state. With GiftedChat.append you need to use the spread operator, but then it works. One problem I still need to fix, is that the ID stays the same for every message.

Herr_Frodo
  • 1
  • 5