From c17298686366bcedd7f67964c12f8c424ed70202 Mon Sep 17 00:00:00 2001
From: Timothy Shamilov <tim@mothic.com>
Date: Sun, 29 Dec 2019 17:31:49 -0500
Subject: [PATCH] feat(typing-indicator): add indicator to example project

---
 App.tsx                      | 13 ++++++++++++-
 example-expo/AccessoryBar.js |  8 ++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/App.tsx b/App.tsx
index 060fc0029..ce547d1c1 100644
--- a/App.tsx
+++ b/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>
     )
diff --git a/example-expo/AccessoryBar.js b/example-expo/AccessoryBar.js
index 7e17cef1c..ded345b06 100644
--- a/example-expo/AccessoryBar.js
+++ b/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>
     )
   }