Update and Fix Slack Example

example-slack-message/src/App.js

@@ -1,12 +1,38 @@
-import React, { Component } from 'react';
-import { View, Platform } from 'react-native';
+import React from 'react';
+import { Platform } from 'react-native';
 import PropTypes from 'prop-types';
 import { GiftedChat } from 'react-native-gifted-chat';
 import emojiUtils from 'emoji-utils';
 
 import SlackMessage from './SlackMessage';
 
-class App extends Component {
+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://placeimg.com/140/140/any',
+          },
+        },
+      ],
+    })
+  }
+
+  onSend(messages = []) {
+    this.setState(previousState => ({
+      messages: GiftedChat.append(previousState.messages, messages),
+    }))
+  }
 
   renderMessage(props) {
     const { currentMessage: { text: currText } } = props;
@@ -30,12 +56,14 @@ class App extends Component {
   render() {
     return (
       <GiftedChat
-        messages={[]}
+        messages={this.state.messages}
+        onSend={messages => this.onSend(messages)}
+        user={{
+          _id: 1,
+        }}
         renderMessage={this.renderMessage}
       />
     );
   }
 
 }
-
-export default App;

example-slack-message/src/SlackBubble.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-underscore-dangle, no-use-before-define */
 
+import PropTypes from 'prop-types';
 import React from 'react';
 import {
   Text,
@@ -225,7 +226,7 @@ const styles = StyleSheet.create({
 });
 
 Bubble.contextTypes = {
-  actionSheet: React.PropTypes.func,
+  actionSheet: PropTypes.func,
 };
 
 Bubble.defaultProps = {
@@ -250,34 +251,34 @@ Bubble.defaultProps = {
 };
 
 Bubble.propTypes = {
-  touchableProps: React.PropTypes.object,
-  onLongPress: React.PropTypes.func,
-  renderMessageImage: React.PropTypes.func,
-  renderMessageText: React.PropTypes.func,
-  renderCustomView: React.PropTypes.func,
-  renderUsername: React.PropTypes.func,
-  renderTime: React.PropTypes.func,
-  renderTicks: React.PropTypes.func,
-  currentMessage: React.PropTypes.object,
-  nextMessage: React.PropTypes.object,
-  previousMessage: React.PropTypes.object,
-  user: React.PropTypes.object,
-  containerStyle: React.PropTypes.shape({
+  touchableProps: PropTypes.object,
+  onLongPress: PropTypes.func,
+  renderMessageImage: PropTypes.func,
+  renderMessageText: PropTypes.func,
+  renderCustomView: PropTypes.func,
+  renderUsername: PropTypes.func,
+  renderTime: PropTypes.func,
+  renderTicks: PropTypes.func,
+  currentMessage: PropTypes.object,
+  nextMessage: PropTypes.object,
+  previousMessage: PropTypes.object,
+  user: PropTypes.object,
+  containerStyle: PropTypes.shape({
     left: ViewPropTypes.style,
     right: ViewPropTypes.style,
   }),
-  wrapperStyle: React.PropTypes.shape({
+  wrapperStyle: PropTypes.shape({
     left: ViewPropTypes.style,
     right: ViewPropTypes.style,
   }),
   messageTextStyle: Text.propTypes.style,
   usernameStyle: Text.propTypes.style,
   tickStyle: Text.propTypes.style,
-  containerToNextStyle: React.PropTypes.shape({
+  containerToNextStyle: PropTypes.shape({
     left: ViewPropTypes.style,
     right: ViewPropTypes.style,
   }),
-  containerToPreviousStyle: React.PropTypes.shape({
+  containerToPreviousStyle: PropTypes.shape({
     left: ViewPropTypes.style,
     right: ViewPropTypes.style,
   }),

example-slack-message/src/SlackMessage.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-underscore-dangle, no-use-before-define */
 
+import PropTypes from 'prop-types';
 import React from 'react';
 import {
   View,
@@ -112,14 +113,14 @@ Message.defaultProps = {
 };
 
 Message.propTypes = {
-  renderAvatar: React.PropTypes.func,
-  renderBubble: React.PropTypes.func,
-  renderDay: React.PropTypes.func,
-  currentMessage: React.PropTypes.object,
-  nextMessage: React.PropTypes.object,
-  previousMessage: React.PropTypes.object,
-  user: React.PropTypes.object,
-  containerStyle: React.PropTypes.shape({
+  renderAvatar: PropTypes.func,
+  renderBubble: PropTypes.func,
+  renderDay: PropTypes.func,
+  currentMessage: PropTypes.object,
+  nextMessage: PropTypes.object,
+  previousMessage: PropTypes.object,
+  user: PropTypes.object,
+  containerStyle: PropTypes.shape({
     left: ViewPropTypes.style,
     right: ViewPropTypes.style,
   }),