-
Notifications
You must be signed in to change notification settings - Fork 24.1k
/
InputAccessoryViewExample.js
121 lines (113 loc) · 2.61 KB
/
InputAccessoryViewExample.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @format
*/
'use strict';
const React = require('react');
const {
Alert,
Button,
InputAccessoryView,
ScrollView,
StyleSheet,
Text,
TextInput,
View,
} = require('react-native');
type MessageProps = $ReadOnly<{||}>;
class Message extends React.PureComponent<MessageProps> {
render(): React.Node {
return (
<View style={styles.textBubbleBackground}>
<Text style={styles.text}>Text Message</Text>
</View>
);
}
}
type TextInputProps = $ReadOnly<{||}>;
type TextInputState = {|text: string|};
class TextInputBar extends React.PureComponent<TextInputProps, TextInputState> {
state: TextInputState = {text: ''};
render(): React.Node {
return (
<View style={styles.textInputContainer}>
<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>
);
}
}
const BAR_HEIGHT = 44;
type InputAccessoryProps = $ReadOnly<{||}>;
class InputAccessoryViewExample extends React.Component<InputAccessoryProps> {
render(): React.Node {
return (
<>
<ScrollView style={styles.fill} keyboardDismissMode="interactive">
{Array(15)
.fill()
.map((_, i) => (
<Message key={i} />
))}
</ScrollView>
<InputAccessoryView backgroundColor="#fffffff7">
<TextInputBar />
</InputAccessoryView>
</>
);
}
}
const styles = StyleSheet.create({
fill: {
flex: 1,
},
textInputContainer: {
flexDirection: 'row',
alignItems: 'center',
borderTopWidth: 1,
borderTopColor: '#eee',
height: BAR_HEIGHT,
},
textInput: {
flex: 1,
paddingLeft: 10,
},
text: {
padding: 10,
color: 'white',
},
textBubbleBackground: {
backgroundColor: '#2f7bf6',
borderRadius: 20,
width: 110,
margin: 20,
},
});
exports.title = 'InputAccessoryView';
exports.description =
'Example showing how to use an InputAccessoryView to build an iMessage-like sticky text input';
exports.examples = [
{
title: 'Simple view with sticky input',
render: function (): React.Node {
return <InputAccessoryViewExample />;
},
},
];