ReactNativeのチャットアプリ開発OSS「react-native-gifted-chat」を利用してみた

以前の記事の続きです。

MacでReactNativeの開発環境の構築と、create-react-native-appで作成されるプロジェクトの説明 - このすみろぐ

ReactNativeで開発環境の構築までを行なったので、ここからはアプリ開発に入っていきます。私は、とあるチャット風のアプリを開発したいと思っているので、まずはチャット系のOSS選定から始めました。

そこで候補として上がったのが、「react-native-gifted-chat」です。

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

GitHubスターも5000を超えていて、最終更新も7日前ですので、文句のないライブラリです。さっそく動かしてみました。

ReactNativeで超速簡単チャットUI実装

日本語の解説記事では、以下のQiita記事が参考になります。@Yorintonさん、ありがとうございます。

ReactNativeで超速簡単チャットUI実装

react-native-gifted-chatを試してみる。

お手軽に試してみたかったので、公式に書いてあるExampleを、そのままApp.jsに貼り付けて試してみました。

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

出来上がったApp.jsは、以下の内容です。

特別な何かをしたわけではなく「create-react-native-app」で生成したベースに対して、App.jsを以下の内容に差し替えただけです。

import React from 'react';
import { GiftedChat } from 'react-native-gifted-chat'

export default class App extends React.Component {
  state = {
    messages: [],
  }

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

  onSend(messages = []) {
    this.setState(previousState => ({
      messages: GiftedChat.append(previousState.messages, messages),
    }))
  }

  render() {
    return (
      <GiftedChat
        messages={this.state.messages}
        onSend={messages => this.onSend(messages)}
        user={{
          _id: 1,
        }}
      />
    )
  }
}

構築手順について記しておく

ちなみに、構築手順は記すほどのものでもないのですが、やったことはこれだけです。

# CRNAでReactNativeプロジェクトを作成する
cd /path/to/your/react/native/project/
npx create-react-native-app ./

# react-native-gifted-chat をインストールする
npm install react-native-gifted-chat --save

# App.js を Exampleの内容を元に差し替える
vim App.js

# ReactNativeアプリを起動する
npm start

シャーロック・ホームズが来訪者の特徴をあてる推理じゃないですが、ネタばらしすると大したことないと思われてしまう典型なり(笑)。

実際には、チャットで発言した後の処理を書かないとならないのですが、そこは実際のプロダクト毎に異なるので、適宜実装してください。

手軽に使えることが分かったので、ReactNativeにおけるチャット系UIでの選択肢としては、かなり有力な候補かと思います。

さいごに

サンプルを置いてありますので、試してみてください。

GitHub - konosumi/react-native-gifted-chat-example: ReactNativeのチャットアプリ開発OSS「react-native-gifted-chat」を利用してみたという記事のサンプルです。

Mac に Node.js さえ入っていれば、以下の手順を踏むだけです。

$ cd /tmp
$ git clone https://github.com/konosumi/react-native-gifted-chat-example
$ cd react-native-gifted-chat-example/
$ npm install
$ npm start
> Press i で、iOSシミュレータが起動しますよ！

npm start でエラーが発生する場合は、おそらくwatchmanが必要です。

brew install watchman

詳細は、以前の環境構築の記事にありますので、宜しければご参照ください。

MacでReactNativeの開発環境の構築と、create-react-native-appで作成されるプロジェクトの説明 - このすみろぐ

ちなみに、ReactNativeとiOSシミュレータを連携するためには、xcode-selectでXcode本体のパスを通す必要があります。

$ sudo xcode-select --switch /Applications/Xcode_9.3.app/Contents/Developer
$ xcode-select -p
> /Applications/Xcode_9.3.app/Contents/Developer

私はXcodeを手動でダウンロードしたため、わざわざパスを通しているのですが、App Store経由でインストールした場合は、それすら不要かもしれません。

手動インストールした場合は、Xcodeを解凍して /Applicationsに置いた上で、一度ランチャーからアプリを起動し、規約に同意します。その後、コマンドラインから上記の手順でパスを通すだけです。これもお手軽です。

それでは。