diff --git a/Examples/UIExplorer/TextInputExample.android.js b/Examples/UIExplorer/TextInputExample.android.js index 22b1a054db..5809d71214 100644 --- a/Examples/UIExplorer/TextInputExample.android.js +++ b/Examples/UIExplorer/TextInputExample.android.js @@ -407,6 +407,31 @@ exports.examples = [ ); } }, + { + title: 'fontFamily, fontWeight and fontStyle', + render: function() { + return ( + + + + + + + ); + } + }, { title: 'Passwords', render: function() { diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java index 00a1be7340..b8a4811dcf 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextShadowNode.java @@ -279,6 +279,9 @@ public class ReactTextShadowNode extends LayoutShadowNode { /** * Return -1 if the input string is not a valid numeric fontWeight (100, 200, ..., 900), otherwise * return the weight. + * + * This code is duplicated in ReactTextInputManager + * TODO: Factor into a common place they can both use */ private static int parseNumericFontWeight(String fontWeightString) { // This should be much faster than using regex to verify input and Integer.parseInt @@ -407,13 +410,17 @@ public class ReactTextShadowNode extends LayoutShadowNode { markUpdated(); } } - + @ReactProp(name = ViewProps.FONT_FAMILY) public void setFontFamily(@Nullable String fontFamily) { mFontFamily = fontFamily; markUpdated(); } - + + /** + /* This code is duplicated in ReactTextInputManager + /* TODO: Factor into a common place they can both use + */ @ReactProp(name = ViewProps.FONT_WEIGHT) public void setFontWeight(@Nullable String fontWeightString) { int fontWeightNumeric = fontWeightString != null ? @@ -430,7 +437,11 @@ public class ReactTextShadowNode extends LayoutShadowNode { markUpdated(); } } - + + /** + /* This code is duplicated in ReactTextInputManager + /* TODO: Factor into a common place they can both use + */ @ReactProp(name = ViewProps.FONT_STYLE) public void setFontStyle(@Nullable String fontStyleString) { int fontStyle = UNSET; diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java index 61f8d0d491..7f9a13d7d2 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java @@ -16,6 +16,7 @@ import java.util.ArrayList; import android.content.Context; import android.graphics.Rect; import android.graphics.drawable.Drawable; +import android.graphics.Typeface; import android.text.Editable; import android.text.InputType; import android.text.SpannableStringBuilder; @@ -206,9 +207,12 @@ public class ReactEditText extends EditText { @Override public void setInputType(int type) { + Typeface tf = super.getTypeface(); super.setInputType(type); mStagedInputType = type; - + // Input type password defaults to monospace font, so we need to re-apply the font + super.setTypeface(tf); + // We override the KeyListener so that all keys on the soft input keyboard as well as hardware // keyboards work. Some KeyListeners like DigitsKeyListener will display the keyboard but not // accept all input from it diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java index 73215809db..352adda259 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java @@ -15,6 +15,7 @@ import java.util.LinkedList; import java.util.Map; import android.graphics.PorterDuff; +import android.graphics.Typeface; import android.text.Editable; import android.text.InputFilter; import android.text.InputType; @@ -64,7 +65,8 @@ public class ReactTextInputManager extends BaseViewManager= 500 || "bold".equals(fontWeightString)) { + fontWeight = Typeface.BOLD; + } else if ("normal".equals(fontWeightString) || + (fontWeightNumeric != -1 && fontWeightNumeric < 500)) { + fontWeight = Typeface.NORMAL; + } + if (fontWeight != view.getTypeface().getStyle()) { + view.setTypeface(view.getTypeface(), fontWeight); + } + } + + /** + /* This code was taken from the method setFontStyle of the class ReactTextShadowNode + /* TODO: Factor into a common place they can both use + */ + @ReactProp(name = ViewProps.FONT_STYLE) + public void setFontStyle(ReactEditText view, @Nullable String fontStyleString) { + int fontStyle = UNSET; + if ("italic".equals(fontStyleString)) { + fontStyle = Typeface.ITALIC; + } else if ("normal".equals(fontStyleString)) { + fontStyle = Typeface.NORMAL; + } + + Typeface currentTypeface = view.getTypeface(); + if (currentTypeface == null) { + currentTypeface = Typeface.DEFAULT; + } + if (fontStyle != currentTypeface.getStyle()) { + view.setTypeface(currentTypeface, fontStyle); + } + } + @ReactProp(name = "onSelectionChange", defaultBoolean = false) public void setOnSelectionChange(final ReactEditText view, boolean onSelectionChange) { if (onSelectionChange) { @@ -391,6 +445,20 @@ public class ReactTextInputManager extends BaseViewManager= '1' ? + 100 * (fontWeightString.charAt(0) - '0') : -1; + } + private static void updateStagedInputTypeFlag( ReactEditText view, int flagsToUnset,