Skip to content
Permalink
Browse files

Implement returnKeyType/returnKeyLabel on Android

Summary:
This PR implements [`returnKeyType`](http://facebook.github.io/react-native/docs/textinput.html#returnkeytype) on Android.

It is implemented with [`EditText.setImeOptions()`](http://developer.android.com/reference/android/widget/TextView.html#setImeOptions(int)) that allows us to specify options on an input, in this case change the return button icon. To be noted that it is also possible to specify a string instead of an icon with [`EditText.setImeActionLabel()`](http://developer.android.com/reference/android/widget/TextView.html#setImeActionLabel(java.lang.CharSequence, int)) while being 2 different things I added both of these behaviors in this PR since it was mostly at the same place/component.

**Problems encountered :**

- All the `ReactEditText`s were set to `IME_ACTION_DONE` by default ([reference](https://github.com/Bhullnatik/react-native/blob/a2157dbbe06e10e628900e9d4443948893623126/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L78)). I'm not sure
Closes #6905

Differential Revision: D3264755

Pulled By: dmmiller

fb-gh-sync-id: 4a090e31b620a245847c06ba1895cfea02e88d0f
fbshipit-source-id: 4a090e31b620a245847c06ba1895cfea02e88d0f
  • Loading branch information...
Bhullnatik authored and Facebook Github Bot 2 committed May 5, 2016
1 parent 02af7b5 commit dd8caf4cf21941aff5afc7e919ced58ec564f3a3
@@ -531,4 +531,43 @@ exports.examples = [
return <TokenizedTextExample />;
}
},
{
title: 'Return key',
render: function() {
var returnKeyTypes = [
'none',
'go',
'search',
'send',
'done',
'previous',
'next',
];
var returnKeyLabels = [
'Compile',
'React Native',
];
var examples = returnKeyTypes.map((type) => {
return (
<TextInput
key={type}
returnKeyType={type}
placeholder={'returnKeyType: ' + type}
style={styles.singleLine}
/>
);
});
var types = returnKeyLabels.map((type) => {
return (
<TextInput
key={type}
returnKeyLabel={type}
placeholder={'returnKeyLabel: ' + type}
style={styles.singleLine}
/>
);
});
return <View>{examples}{types}</View>;
}
},
];
@@ -120,6 +120,7 @@ var TextInput = React.createClass({
* Determines which keyboard to open, e.g.`numeric`.
*
* The following values work across platforms:
*
* - default
* - numeric
* - email-address
@@ -150,22 +151,54 @@ var TextInput = React.createClass({
'dark',
]),
/**
* Determines how the return key should look.
* @platform ios
* Determines how the return key should look. On Android you can also use
* `returnKeyLabel`.
*
* The following values work across platforms:
*
* - done
* - go
* - next
* - search
* - send
*
* The following values work on Android only:
*
* - none
* - previous
*
* The following values work on iOS only:
*
* - default
* - emergency-call
* - google
* - join
* - route
* - yahoo
*/
returnKeyType: PropTypes.oneOf([
'default',
// Cross-platform
'done',
'go',
'google',
'join',
'next',
'route',
'search',
'send',
'yahoo',
'done',
// Android-only
'none',
'previous',
// iOS-only
'default',
'emergency-call',
'google',
'join',
'route',
'yahoo',
]),
/**
* Sets the return key to the label. Use it instead of `returnKeyType`.
* @platform android
*/
returnKeyLabel: PropTypes.string,
/**
* Limits the maximum number of characters that can be entered. Use this
* instead of implementing the logic in JS to avoid flicker.
@@ -531,6 +564,8 @@ var TextInput = React.createClass({
children={children}
editable={this.props.editable}
selectTextOnFocus={this.props.selectTextOnFocus}
returnKeyType={this.props.returnKeyType}
returnKeyLabel={this.props.returnKeyLabel}
/>;

return (
@@ -44,8 +44,8 @@
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.uimanager.events.EventDispatcher;
import com.facebook.react.views.text.DefaultStyleValuesUtil;
import com.facebook.react.views.text.TextInlineImageSpan;
import com.facebook.react.views.text.ReactTextUpdate;
import com.facebook.react.views.text.TextInlineImageSpan;

/**
* Manages instances of TextInput.
@@ -431,6 +431,40 @@ public void setKeyboardType(ReactEditText view, @Nullable String keyboardType) {
checkPasswordType(view);
}

@ReactProp(name = "returnKeyType")
public void setReturnKeyType(ReactEditText view, String returnKeyType) {
switch (returnKeyType) {
case "done":
view.setImeOptions(EditorInfo.IME_ACTION_DONE);
break;
case "go":
view.setImeOptions(EditorInfo.IME_ACTION_GO);
break;
case "next":
view.setImeOptions(EditorInfo.IME_ACTION_NEXT);
break;
case "none":
view.setImeOptions(EditorInfo.IME_ACTION_NONE);
break;
case "previous":
view.setImeOptions(EditorInfo.IME_ACTION_PREVIOUS);
break;
case "search":
view.setImeOptions(EditorInfo.IME_ACTION_SEARCH);
break;
case "send":
view.setImeOptions(EditorInfo.IME_ACTION_SEND);
break;
}
}

private static final int IME_ACTION_ID = 0x670;

@ReactProp(name = "returnKeyLabel")
public void setReturnKeyLabel(ReactEditText view, String returnKeyLabel) {
view.setImeActionLabel(returnKeyLabel, IME_ACTION_ID);
}

@Override
protected void onAfterUpdateTransaction(ReactEditText view) {
super.onAfterUpdateTransaction(view);
@@ -587,6 +621,13 @@ public boolean onEditorAction(TextView v, int actionId, KeyEvent keyEvent) {
SystemClock.nanoTime(),
editText.getText().toString()));
}
if (actionId == EditorInfo.IME_ACTION_NEXT ||
actionId == EditorInfo.IME_ACTION_PREVIOUS) {
if (editText.getBlurOnSubmit()) {
editText.clearFocus();
}
return true;
}
return !editText.getBlurOnSubmit();
}
});

0 comments on commit dd8caf4

Please sign in to comment.
You can’t perform that action at this time.