feat(typing-indicator): add indicator to example project

App.tsx

@@ -38,6 +38,7 @@ export default class App extends Component {
     typingText: null,
     isLoadingEarlier: false,
     appIsReady: false,
+    isTyping: false,
   }
 
   _isMounted = false
@@ -48,6 +49,7 @@ export default class App extends Component {
     this.setState({
       messages: messagesData, // messagesData.filter(message => message.system),
       appIsReady: true,
+      isTyping: false,
     })
   }
 
@@ -156,7 +158,15 @@ export default class App extends Component {
     this.onSend(messagesToUpload)
   }
 
-  renderAccessory = () => <AccessoryBar onSend={this.onSendFromUser} />
+  setIsTyping = () => {
+    this.setState({
+      isTyping: !this.state.isTyping,
+    })
+  }
+
+  renderAccessory = () => (
+    <AccessoryBar onSend={this.onSendFromUser} isTyping={this.setIsTyping} />
+  )
 
   renderCustomActions = props =>
     Platform.OS === 'web' ? null : (
@@ -253,6 +263,7 @@ export default class App extends Component {
           renderQuickReplySend={this.renderQuickReplySend}
           inverted={Platform.OS !== 'web'}
           timeTextStyle={{ left: { color: 'red' }, right: { color: 'yellow' } }}
+          isTyping={this.state.isTyping}
         />
       </View>
     )

example-expo/AccessoryBar.js

@@ -11,11 +11,19 @@ import {
 export default class AccessoryBar extends React.Component {
   render() {
     const { onSend } = this.props
+    const isTyping = this.props.isTyping
+
     return (
       <View style={styles.container}>
         <Button onPress={() => pickImageAsync(onSend)} name='photo' />
         <Button onPress={() => takePictureAsync(onSend)} name='camera' />
         <Button onPress={() => getLocationAsync(onSend)} name='my-location' />
+        <Button
+          onPress={() => {
+            isTyping()
+          }}
+          name='chat'
+        />
       </View>
     )
   }