[fix] TextInput 'onKeyPress' return values

Match the current React Native API for 'onKeyPress'.

Fix #518
Close #537

docs/components/TextInput.md

@@ -103,8 +103,10 @@ Callback that is called when the text input is focused.
 
 **onKeyPress**: ?function
 
-Callback that is called when a key is pressed. Pressed key value is passed as
-an argument to the callback handler. Fires before `onChange` callbacks.
+Callback that is called when a key is pressed. This will be called with `{
+nativeEvent: { key: keyValue } }` where keyValue is 'Enter` or 'Backspace' for
+respective keys and the typed-in character otherwise including ' ' for space.
+Fires before onChange callbacks.
 
 **onSelectionChange**: ?function
 

src/components/TextInput/__tests__/index-test.js

@@ -146,6 +146,44 @@ describe('components/TextInput', () => {
     }
   });
 
+  describe('prop "onKeyPress"', () => {
+    test('enter', done => {
+      const input = findNativeInput(mount(<TextInput onKeyPress={onKeyPress} />));
+      input.simulate('keyPress', { which: 13 });
+      function onKeyPress(e) {
+        expect(e.nativeEvent.key).toEqual('Enter');
+        done();
+      }
+    });
+
+    test('space', done => {
+      const input = findNativeInput(mount(<TextInput onKeyPress={onKeyPress} />));
+      input.simulate('keyPress', { which: 32 });
+      function onKeyPress(e) {
+        expect(e.nativeEvent.key).toEqual(' ');
+        done();
+      }
+    });
+
+    test('backspace', done => {
+      const input = findNativeInput(mount(<TextInput onKeyPress={onKeyPress} />));
+      input.simulate('keyDown', { which: 8 });
+      function onKeyPress(e) {
+        expect(e.nativeEvent.key).toEqual('Backspace');
+        done();
+      }
+    });
+
+    test('text', done => {
+      const input = findNativeInput(mount(<TextInput onKeyPress={onKeyPress} />));
+      input.simulate('keyPress', { which: 97 });
+      function onKeyPress(e) {
+        expect(e.nativeEvent.key).toEqual('a');
+        done();
+      }
+    });
+  });
+
   test('prop "onSelectionChange"', done => {
     const input = findNativeInput(
       mount(<TextInput defaultValue="12345" onSelectionChange={onSelectionChange} />)

src/components/TextInput/index.js

@@ -227,7 +227,8 @@ class TextInput extends Component {
       onBlur: normalizeEventHandler(this._handleBlur),
       onChange: normalizeEventHandler(this._handleChange),
       onFocus: normalizeEventHandler(this._handleFocus),
-      onKeyPress: normalizeEventHandler(this._handleKeyPress),
+      onKeyDown: this._handleKeyDown,
+      onKeyPress: this._handleKeyPress,
       onSelect: normalizeEventHandler(this._handleSelectionChange),
       readOnly: !editable,
       ref: this._setNode,
@@ -275,13 +276,40 @@ class TextInput extends Component {
     }
   };
 
+  _handleKeyDown = e => {
+    const { onKeyPress } = this.props;
+    if (onKeyPress && e.which === 8) {
+      onKeyPress({ nativeEvent: { key: 'Backspace' } });
+    }
+  };
+
   _handleKeyPress = e => {
     const { blurOnSubmit, multiline, onKeyPress, onSubmitEditing } = this.props;
     const blurOnSubmitDefault = !multiline;
     const shouldBlurOnSubmit = blurOnSubmit == null ? blurOnSubmitDefault : blurOnSubmit;
+
     if (onKeyPress) {
-      onKeyPress(e);
+      let keyValue;
+      // enter
+      if (e.which === 13) {
+        keyValue = 'Enter';
+      } else if (e.which === 32) {
+        // space
+        keyValue = ' ';
+      } else {
+        // we trim to only care about the keys that has a textual representation
+        if (e.shiftKey) {
+          keyValue = String.fromCharCode(e.which).trim();
+        } else {
+          keyValue = String.fromCharCode(e.which).toLowerCase().trim();
+        }
+      }
+
+      if (keyValue) {
+        onKeyPress({ nativeEvent: { key: keyValue } });
+      }
     }
+
     if (!e.isDefaultPrevented() && e.which === 13) {
       if (onSubmitEditing) {
         onSubmitEditing(e);