Skip to content

Commit

Permalink
Implement onKeyPress Android
Browse files Browse the repository at this point in the history
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
  • Loading branch information
joshjhargreaves authored and facebook-github-bot committed Jan 4, 2018
1 parent e608ffb commit 2e8f378
Showing 1 changed file with 8 additions and 1 deletion.
9 changes: 8 additions & 1 deletion js/TextInputExample.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
curText: '<No Event>',
prevText: '<No Event>',
prev2Text: '<No Event>',
prev3Text: '<No Event>',
};

updateText = (text) => {
Expand All @@ -35,6 +36,7 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
curText: text,
prevText: state.curText,
prev2Text: state.prevText,
prev3Text: state.prev2Text,
};
});
};
Expand All @@ -46,6 +48,7 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
autoCapitalize="none"
placeholder="Enter text to see events"
autoCorrect={false}
multiline
onFocus={() => this.updateText('onFocus')}
onBlur={() => this.updateText('onBlur')}
onChange={(event) => this.updateText(
Expand All @@ -60,12 +63,16 @@ class TextEventsExample extends React.Component<{}, $FlowFixMeState> {
onSubmitEditing={(event) => this.updateText(
'onSubmitEditing text: ' + event.nativeEvent.text
)}
onKeyPress={(event) => this.updateText(
'onKeyPress key: ' + event.nativeEvent.key
)}
style={styles.singleLine}
/>
<Text style={styles.eventLabel}>
{this.state.curText}{'\n'}
(prev: {this.state.prevText}){'\n'}
(prev2: {this.state.prev2Text})
(prev2: {this.state.prev2Text}){'\n'}
(prev3: {this.state.prev3Text})
</Text>
</View>
);
Expand Down

0 comments on commit 2e8f378

Please sign in to comment.