Permalink
Browse files

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
  • Loading branch information...
PeteTheHeat authored and facebook-github-bot committed Feb 28, 2018
1 parent 6d9fe45 commit 84ef7bc372ad870127b3e1fb8c13399fe09ecd4d
Showing with 106 additions and 0 deletions.
  1. +101 −0 RNTester/js/InputAccessoryViewExample.js
  2. +5 −0 RNTester/js/RNTesterList.ios.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;
@@ -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'),

0 comments on commit 84ef7bc

Please sign in to comment.