From 84ef7bc372ad870127b3e1fb8c13399fe09ecd4d Mon Sep 17 00:00:00 2001
From: Peter Argany <petetheheat@fb.com>
Date: Tue, 27 Feb 2018 17:45:15 -0800
Subject: [PATCH] Added InputAccessoryView demo to RNTester [2/N]

Summary:
This is an example showing how to use an InputAccessoryView to build an iMessage-like sticky text input

https://youtu.be/89PGsSqtmQU

Reviewed By: sahrens

Differential Revision: D7048456

fbshipit-source-id: 90314a85f3662c2b21aababe2dd46ea5e406604a
---
 RNTester/js/InputAccessoryViewExample.js | 101 +++++++++++++++++++++++
 RNTester/js/RNTesterList.ios.js          |   5 ++
 2 files changed, 106 insertions(+)
 create mode 100644 RNTester/js/InputAccessoryViewExample.js

diff --git a/RNTester/js/InputAccessoryViewExample.js b/RNTester/js/InputAccessoryViewExample.js
new file mode 100644
index 000000000..13b588578
--- /dev/null
+++ b/RNTester/js/InputAccessoryViewExample.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @providesModule InputAccessoryViewExample
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+const Alert = require('Alert');
+const Button = require('Button');
+const Dimensions = require('Dimensions');
+const InputAccessoryView = require('InputAccessoryView');
+const React = require('React');
+const ScrollView = require('ScrollView');
+const StyleSheet = require('StyleSheet');
+const Text = require('Text');
+const TextInput = require('TextInput');
+const View = require('View');
+
+class Message extends React.PureComponent<*> {
+  render() {
+    return (
+      <View style={styles.textBubbleBackground}>
+        <Text style={styles.text}>Text Message</Text>
+      </View>
+    );
+  }
+}
+
+class TextInputBar extends React.PureComponent<*, *> {
+  state = {text: ''};
+
+  render() {
+    const {width} = Dimensions.get('window');
+    return (
+      <View style={[styles.textInputContainer, {width}]}>
+        <TextInput
+          style={styles.textInput}
+          onChangeText={text => {
+            this.setState({text});
+          }}
+          value={this.state.text}
+          placeholder={'Type a message...'}
+        />
+        <Button
+          onPress={() => {
+            Alert.alert('You tapped the button!');
+          }}
+          title="Send"
+        />
+      </View>
+    );
+  }
+}
+
+class InputAccessoryViewExample extends React.Component<*> {
+  static title = '<InputAccessoryView>';
+  static description = 'Example showing how to use an InputAccessoryView to build an iMessage-like sticky text input';
+
+  render() {
+    return (
+      <View>
+        <ScrollView keyboardDismissMode="interactive">
+          {Array(15)
+            .fill()
+            .map((_, i) => <Message key={i} />)}
+        </ScrollView>
+        <InputAccessoryView backgroundColor="#fffffff7">
+          <TextInputBar />
+        </InputAccessoryView>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  textInputContainer: {
+    flexDirection: 'row',
+  },
+  textInput: {
+    flex: 1,
+    paddingLeft: 10,
+  },
+  text: {
+    padding: 10,
+    color: 'white',
+  },
+  textBubbleBackground: {
+    backgroundColor: '#2f7bf6',
+    borderRadius: 20,
+    width: 110,
+    margin: 20,
+  },
+});
+
+module.exports = InputAccessoryViewExample;
diff --git a/RNTester/js/RNTesterList.ios.js b/RNTester/js/RNTesterList.ios.js
index d45e42fa5..fa95044d7 100644
--- a/RNTester/js/RNTesterList.ios.js
+++ b/RNTester/js/RNTesterList.ios.js
@@ -46,6 +46,11 @@ const ComponentExamples: Array<RNTesterExample> = [
     module: require('./ImageExample'),
     supportsTVOS: true,
   },
+  {
+    key: 'InputAccessoryViewExample',
+    module: require('./InputAccessoryViewExample'),
+    supportsTVOS: true,
+  },
   {
     key: 'KeyboardAvoidingViewExample',
     module: require('./KeyboardAvoidingViewExample'),