React Native Chatting 구현

• 라이브러리: https://github.com/FaridSafi/react-native-gifted-chat

샘플 코드

import React, {ReactElement, useState, useCallback, useEffect} from 'react';
import {GiftedChat, IMessage} from 'react-native-gifted-chat';
import styled from 'styled-components/native';

interface Props {}

const user = {
  _id: 1,
  name: 'Junghyun',
};

export default function ChattingRoomScreen({}: Props): ReactElement {
  const [messages, setMessages] = useState<IMessage[]>();

  useEffect(() => {
    setMessages(msgData);
  }, []);

  const onSend = useCallback((msgArray = []) => {
    setMessages(prevMessages => GiftedChat.append(prevMessages, msgArray));
  }, []);

  return (
    <Container>
      <GiftedChat
        messages={messages}
        onSend={msgs => onSend(msgs)}
        user={user}
        showAvatarForEveryMessage={true}
      />
    </Container>
  );
}

const Container = styled.SafeAreaView`
  flex: 1;
`;

데이터베이스(firebase) 세팅

https://medium.com/@phylypo/react-native-simple-chat-with-firebase-and-giftedchat-f7dbdff2883a

유의할 점

• Container의 style(flex)를 설정하지 않으면 height가 0이 되어 랜더링 되는 채팅화면이 보이지 않을 수 있음