React Nativeでメッセージ機能を実装する（Firebase）

React Netiveでメッセージ機能を追加しました。

開発環境

react native 0.52.3
redux 3.7.2
react-native-firebase 3.2.2
react-native-gifted-chat 0.4.3

ソースコード

Message.js

class Message extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      messages: [],
    };
  }

  componentWillMount() {
    this.props.messagesFetch();
  }

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

    this.props.sendMessage({
      message
    })
  }

  render() {
    const { currentUser } = firebase.auth();
    return (
      <View>
        <GiftedChat
          messages={this.props.messages}
          onSend={this.onSend.bind(this)}
          user={{
            _id: currentUser.uid
          }}
          renderBubble={this.renderBubble}
          renderSend={this.renderSend}
        />
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  const { text, user, createdAt, _id } = state.messageForm;
  const messages = _.orderBy(state.messages, ['_id'], ['desc']);

  return { text, user, createdAt, _id, messages };
};

export default connect(mapStateToProps, {
  sendMessage,
  messagesFetch
})(Message);

messageAction.js

/**
* メッセージの保存
*/

export const sendMessage = ({ message }) => {
  return (dispatch) => {
      firebase.database().ref(`/messages/`)
      .push({
        _id: createdAtDate(new Date()),
        text: message[0].text,
        user: {
          _id: user._value.uid,
          name: user._value.name,
          photoURL: user._value.photoURL
        },
        createdAt: formatDate(new Date()),
      })
      .then(() => {
        dispatch({ type: 'message_create' });
      });
    })
  }
}

/**
* メッセージの表示
*/

export const messagesFetch = (room) => {
  return (dispatch) => {
    firebase.database().ref(`/messages/`)
    .orderByChild('_id')
    .on('value', snapshot => {
      dispatch({ type: 'messages_fetch_success', payload: snapshot.val() });
    })
  };
};