Skip to content

Commit 2e8f378

Browse files
Implement onKeyPress Android
Summary: This implements onKeyPress for Android on TextInputs and addresses facebook/react-native#1882. **N.B. that this PR has not yet addressed hardware keyboard inputs**, but doing will be fairly trivial. The main challenge was doing this for soft keyboard inputs. I've tried to match the style as much as I could. Will happily make any suggested edits be they architectural or stylistic design (edit: and of course implementation), but hopefully this is a good first pass :). I think important to test this on the most popular keyboard types; maybe different languages too. I have not yet added tests to test implementation, but will be happy to do that also. - Build & run RNTester project for Android and open TextInput. - Enter keys into 'event handling' TextInput. - Verify that keys you enter appear in onKeyPress below the text input - Test with autocorrect off, on same input and validate that results are the same. Below is a gif of PR in action. ![onkeypressandroid](https://user-images.githubusercontent.com/1807207/27512892-3f95c098-5949-11e7-9364-3ce9437f7bb9.gif) Closes facebook/react-native#14720 Differential Revision: D6661592 Pulled By: hramos fbshipit-source-id: 5d53772dc2d127b002ea5fb84fa992934eb65a42
1 parent e608ffb commit 2e8f378

File tree

1 file changed

+8
-1
lines changed

1 file changed

+8
-1
lines changed

Diff for: js/TextInputExample.android.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
2727
curText: '<No Event>',
2828
prevText: '<No Event>',
2929
prev2Text: '<No Event>',
30+
prev3Text: '<No Event>',
3031
};
3132

3233
updateText = (text) => {
@@ -35,6 +36,7 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
3536
curText: text,
3637
prevText: state.curText,
3738
prev2Text: state.prevText,
39+
prev3Text: state.prev2Text,
3840
};
3941
});
4042
};
@@ -46,6 +48,7 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
4648
autoCapitalize="none"
4749
placeholder="Enter text to see events"
4850
autoCorrect={false}
51+
multiline
4952
onFocus={() => this.updateText('onFocus')}
5053
onBlur={() => this.updateText('onBlur')}
5154
onChange={(event) => this.updateText(
@@ -60,12 +63,16 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
6063
onSubmitEditing={(event) => this.updateText(
6164
'onSubmitEditing text: ' + event.nativeEvent.text
6265
)}
66+
onKeyPress={(event) => this.updateText(
67+
'onKeyPress key: ' + event.nativeEvent.key
68+
)}
6369
style={styles.singleLine}
6470
/>
6571
<Text style={styles.eventLabel}>
6672
{this.state.curText}{'\n'}
6773
(prev: {this.state.prevText}){'\n'}
68-
(prev2: {this.state.prev2Text})
74+
(prev2: {this.state.prev2Text}){'\n'}
75+
(prev3: {this.state.prev3Text})
6976
</Text>
7077
</View>
7178
);

0 commit comments

Comments
 (0)