react-native-gifted-chat을 사용하여 chat app 기본 화면 구성하기

https://github.com/FaridSafi/react-native-gifted-chat

GitHub - FaridSafi/react-native-gifted-chat: 💬 The most complete chat UI for React Native

 

https://blog.logrocket.com/build-chat-app-react-native-gifted-chat/

Build a chat app with react-native-gifted-chat - LogRocket Blog

 

위의 오픈소스와 블로그의 코드를 이용해 진행하였다.

 

 

먼저 깃허브에 나온 오픈소스를 이용하기 위해 아래의 명령어를 이용해 필요한 react-native 모듈들을 설치해주었다.

npm install --save react-native-gifted-chat react-native-reanimated react-native-safe-area-context

그 다음 블로그에 나온 코드를 이용하여 다음과 같이 진행하였다.

GiftedChatApp 디렉토리를 생성해주고 react-native를 초기화해주었다.

npx react-native init GiftedChatApp

GiftedChatApp 디렉토리로 이동한 후 다시 필요한 react-native 모듈들을 설치해주었다.

cd GiftedChatApp && npm install @react-navigation/native @react-navigation/stack react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view react-native-vector-icons

아래 명령어로 앱을 실행할 수 있다.

npx react-native run-android

앱 실행에 문제가 있다면 아래 명령어를 통해 문제를 찾고 고칠 수 있다.

나의 경우 java 버전을 17로 변경해서 문제를 해결했다.

npx react-native doctor

 

 

 

 

 

 

프로젝트를 진행하면서 가장 빈번하게 발생한 오류들은 다음과 같다.

1. 모듈의 잘못된 설치 및 버전 호환성

해결방법: 

rm -rf node_modules
rm package-lock.json  # or yarn.lock
npm install  # or yarn install

2. 빌드 문제

해결방법:

cd android
./gradlew clean
cd ..
npx react-native run-android

3. metro bundler cahce 문제

해결방법:

npx react-native start --reset-cache

 

또한 위 블로그에서 설치하라고 한 모듈 외에도 추가로 설치해야하는 것이 많았다.

이는 오류메세지를 읽어보면서 추가로 설치해주었다.

 

 

 

위 블로그를 이용해 만든 최종 결과물이다.

https://github.com/kwakjiwoo/GiftedChatApp