最近React Nativeの開発を始めたのですが、いろいろなReact NativeのUIコンポーネントが配布されているようなので適当にいじって遊んでみることにしました。

今回は、チャットUIとして提供されているreact-native-gifted-chatを試してみました。

react-native-gifted-chat

React NativeのUIコンポーネントです。
簡単にMessengerライクなチャット画面を作成することができます。
商用でも全然いけそうな見た目してます。

f:id:rennnosukesann:20180527153735p:plain

Expo

今回は実機(iOS)で開発するため、実機開発用のデプロイツールも使いました。

ExpoはオープンソースのReact Nativeビルドツールチェーンです。
Expoを使うことで、iOS/Android端末上へのアプリのビルド/デプロイが簡単に行なえます。
またソースコードの変更を即座に端末内のアプリに反映することができます。

Usage

早速作っていきます！

モバイル端末にExpo Clientをインストールします。

f:id:rennnosukesann:20180527150455j:plain:w300

モバイル端末とお使いのPCを同一のWi-fiに接続します（テザリングでも構いません）。
セットアップ（テザリングしている人は先にnpm installをWi-fiでやったほうが通信量的にいいです）

$ npm install -g react-native create-react-native-app
$ create-react-native-app my-app
$ cd my-app
$ npm start

出現したQRコードをモバイル端末で読み取ります。
するとExpoアプリを起動できる通知が来るので、通知をタップ。

アプリが起動したらOKです！

あとは react-native-gifted-chatをnpm経由でインストールしていきます。

$ npm install react-native-gifted-chat --save

src

公式のリポジトリを参考に、App.jsを下記のように書き換えてみました。

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

export default class App extends React.Component {

    componentWillMount() {
        this.setState({messages : []});
    }

    reply(){
        return {
            _id: 1,
            text: 'Hello!',
            createdAt: new Date(),
            user: {
                _id: 2,
                name: 'React Native',
                avatar: 'https://placeimg.com/140/140/any',
            }
        };
    }


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

    render() {
        return (
                <GiftedChat
                messages={this.state.messages}
                onSend={messages => this.onSend(messages)}
                user={{
                    _id: 1,
                    name: 'you',
                    avater: 'https://placeimg.com/140/140/any'
                }}
                />
        );
    }
}