TextField looses focus when I type a character everytime.

[Vishal1419]

Here is my custom control which wraps MKTextField:

import React from 'react';
import { MKTextField } from 'react-native-material-kit';

const PXMTextField = ({ Txt, PlaceHolderText, PlaceHolderTextColor, BorderColor, BorderColorOnFocus, 
                        SelectionColor, TextColor, FontSize, IsEmailField, IsPasswordField,
                        Style, KeyboardType, OnTextChanged }) => { 

    const placeHolderText = PlaceHolderText == null ? '' : PlaceHolderText;
    const placeHolderTextColor = PlaceHolderTextColor == null ? '#CCCCCC' : PlaceHolderTextColor;
    const borderColor = BorderColor == null ? '#222222' : BorderColor;
    const borderColorOnFocus = BorderColorOnFocus == null ? '#000000' : BorderColorOnFocus;
    const selectionColor = SelectionColor == null ? '#000000' : SelectionColor;
    const textColor = TextColor == null ? '#FFFFFF' : TextColor;
    const fontSize = FontSize == null ? 22 : FontSize;
    const isEmailField = IsEmailField == null ? false : IsEmailField;
    const isPasswordField = IsPasswordField == null ? false : IsPasswordField;
    const keyboardType = KeyboardType == null ? 'default' : KeyboardType; 
        // possible values for keyboardType are: default, numeric, email-address, phone-pad
    const style = Style == null ? {} : Style;
    const onTextChanged = OnTextChanged == null ? () => { } : OnTextChanged;

    const TempTextField = MKTextField
                            .textfield()
                            .withPlaceholder(placeHolderText) //Watermark text
                            .withPlaceholderTextColor(placeHolderTextColor) //Watermark text color
                            .withTintColor(borderColor) //Border color
                            .withHighlightColor(borderColorOnFocus) //Border color on focus
                            .withSelectionColor(selectionColor)	//selection and cursor color
                            .withStyle(style)
                            .withTextInputStyle({ color: textColor, fontSize })
                            .withOnTextChange(onTextChanged)
                            .build();
    
    if (isEmailField) {
        return (<TempTextField value={Txt} keyboardType={keyboardType} email />);    
    } else if (isPasswordField) {
        return (<TempTextField value={Txt} keyboardType={keyboardType} password />);            
    } 
    
    return (<TempTextField value={Txt} keyboardType={keyboardType} />);
};

export { PXMTextField };

Now, I use it like this:

render() {
        const { backgroundStyles, registrationContainerStyle, textFieldStyle, PXMButtonContainerStyle } = styles;
        return (
            <ImageBackground source={require('../../assets/images/bg.png')} style={backgroundStyles}>
                <KeyboardAwareScrollView>
                    <View style={registrationContainerStyle}>
                        <TextInput PlaceHolderText="First Name" Style={textFieldStyle}
                                   value={this.props.first_name}
                                   onChangeText={this.onFirstNameTextChange.bind(this)} /> 
                        <PXMTextField PlaceHolderText="Last Name" Style={textFieldStyle} 
                                      Txt={this.props.last_name} 
                                      OnTextChanged={this.onLastNameTextChange.bind(this)} />
                </KeyboardAwareScrollView>
            </ImageBackground>
        );
    }

In code above, Normal Text field behaves correctly, but PXMTextField does not. I mean when I type any character in PXMTextField, it loses focus.

[deadmerc]

The same problem, did anyone find a solution? it happen when I update state in OnTextChanged

[ansonyao]

Same issue here. Only happens on android.

[ansonyao]

UPdate:

Found a workaround. I just used MKTextfiled and its props directly in the jsx and the problem is gone. Just cannot use that .withStyle().build() syntax