Legacy context API has been detected within a strict-mode tree.

[Asinox]

Issue Description

index.js:1 Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: GiftedChat, View

Learn more about this warning here: https://fb.me/react-legacy-context
    in GiftedChat (at ChatComponent.js:48)
    in div (at CardComponent.js:9)
    in Card (at ChatComponent.js:46)
    in div (at CardComponent.js:9)
    in Card (at ChatComponent.js:45)
    in article (at ArticleCardComponent.js:9)
    in ArticleCard (at ChatComponent.js:44)
    in div (at CardComponent.js:9)
    in Card (at ChatComponent.js:40)
    in ChatScreen (at App.js:40)
    in div (at CardComponent.js:9)
    in Card (at WrapperComponent.js:10)
    in main (at WrapperComponent.js:9)
    in Wrapper (at App.js:38)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:37)
    in App (at src/index.js:10)
    in StrictMode (at src/index.js:9)

Steps to Reproduce / Code Snippets

import { GiftedChat } from 'react-web-gifted-chat';
function ChatScreen(props){

    const [messages, setMessages] = useState(null);

    let {header, children, ...rest} = props;

    /*
    messages: [
        {
          id: 1,
          text: 'Hello developer',
          createdAt: new Date(),
          user: {
            id: 2,
            name: 'React',
            avatar: 'https://facebook.github.io/react/img/logo_og.png',
          },
        },
      ],

    */ 

   let onSend = (messages = []) => {
        setMessages((previousState) => ({
            messages: GiftedChat.append(previousState.messages, messages),
        }));
   }

    return(
        <Card className="col-md-8">
            <Card className="row">
                {header}
            </Card>
            <ArticleCard className="row">
              <Card className="chat-colunm-wrapper py-3 col-md-12">
                <Card className="chat-window row">

                  <GiftedChat
                    messages={messages}
                    onSend={(messages) => onSend(messages)}
                    user={{
                      id: 1,
                  }}/>

                </Card>
              </Card>
            </ArticleCard>
            <ReplyBar/>
        </Card>
    )

} 

export default ChatScreen;

Additional Information

• Nodejs version: v12.18.4
• React version: 16.13.1
• react-web-gifted-chat version: 0.6.7
• Browser(s) (Chrome, etc.): Chrome

[Marcus-Rise]

Same issue