bhrott
commented
5 years ago Could you provide a code sample?
Open iagormoraes opened 5 years ago
bhrott
commented
5 years ago Could you provide a code sample?
iagormoraes
commented
5 years ago @benhurott, I have this code:
<MaskedInput
floatingLabel
label={'Title pattern'}
value={title}
onChangeText={this.handleTitleChange}
mask={
'[____] [____]'
}
/>| Family | WAS-LX1A |
|---|---|
| Model | WAS-LX1A (HUAWEIWAS-LX1A) |
| Architecture | arm64-v8a |
| Battery Level | 11% |
| Orientation | portrait |
| Memory | Total: 3.7 GB / Free: 1.2 GB |
| Capacity | Total: 22.4 GB / Free: 11.0 GB |
| Simulator | False |
| brand | HUAWEI |
| charging | False |
| low_memory | False |
| manufacturer | HUAWEI |
| online | True |
| screen_density | 3 |
| screen_dpi | 480 |
| screen_resolution | 1794x1080 |
bhrott
commented
5 years ago Are you sure about your code? Because it's totally different from the documentation: https://github.com/benhurott/react-native-masked-text#usage-textinputmask
<TextInputMask
type={'type-of-the-mask'}
options={
{
// the options for your mask if needed
}
}
// dont forget to set the "value" and "onChangeText" props
value={this.state.text}
onChangeText={text => {
this.setState({
text: text
})
}}
/>@benhurott, sorry that was my wrapped component, follow the component itself:
<View style={styles.inputContainerIn}>
<MaskedInputComponent
{...this.props}
editable={editable}
autoCorrect={false} // fix duplicated texts
// autoComplete={false} // fix duplicated texts
ref={localInputRef => {
if (localInputRef && avoidDuplicated) {
// Clear text input and keyboard suggestions
TextInputReset.resetKeyboardInput(
findNodeHandle(localInputRef)
);
}
inputRef(localInputRef);
}}
placeholder={placeholder}
value={value}
keyboardType={keyboardType}
borderBottomColor={'transparent'}
underlineColorAndroid={'transparent'}
maxLength={maxLength}
style={[styles.input, style]}
onChangeText={onChangeText}
onFocus={this.beforeFocus}
onBlur={() => {
this.handleFocus(false, 0);
if (validatorRules) {
this.handleRulesValidation(value);
}
onBlur();
}}
onTouchEnd={this.beforeTouch}
selectionColor={Colors.gray24}
/>
</View>Hi, you are using a MaskedInputComponent when the lib provide a TextInputMask.
Could you provide the code where you are using the TextInputMask?
iagormoraes
commented
5 years ago Hi, you are using a
MaskedInputComponentwhen the lib provide aTextInputMask. Could you provide the code where you are using theTextInputMask?
I just named the import with this name as it is default export class.
This is my wrapper component:
export default class MaskedInput extends PureComponent {
constructor() {
super();
this.state = {
focused: false,
labelWidth: 0,
validatorRule: null,
validated: false
};
this.colorAnim = new Animated.Value(0);
this.pulseAnim = new Animated.Value(0);
}
getSnapshotBeforeUpdate() {
const { value } = this.props;
return { value };
}
componentDidUpdate(prevProps, _, snapshot) {
const { validatorRules, onValidation, validateOnBlur } = this.props;
if (validateOnBlur) return;
if (prevProps.value !== snapshot.value) {
this.handleRulesValidation(snapshot.value);
if (validatorRules) {
onValidation(
inputValidator(validatorRules, snapshot.value).validated
);
}
}
}
beforeFocus = async () => {
const { keyboardDisabled, onFocus } = this.props;
if (keyboardDisabled) {
await Keyboard.dismiss();
}
this.handleFocus(true, 1);
await onFocus();
};
beforeTouch = () => {
const { floatingLabel, value } = this.props;
if (floatingLabel && value.toString().length > 0) {
Animated.sequence([
Animated.timing(this.pulseAnim, {
toValue: 1,
duration: 250,
useNativeDriver: true
}),
Animated.timing(this.pulseAnim, {
toValue: 0,
duration: 250,
useNativeDriver: true
})
]).start();
}
};
handleFocus = (bool, numberState) => {
const { validatorRules, onValidation, value } = this.props;
Animated.timing(this.colorAnim, {
toValue: numberState,
duration: 250,
useNativeDriver: false
}).start(() => this.setState({ focused: bool }));
// if (validateOnBlur) return;
if (validatorRules && !bool) {
onValidation(inputValidator(validatorRules, value).validated);
}
};
handleRulesValidation = debounce(value => {
const { validatorRules } = this.props;
const inputValidationResult = inputValidator(validatorRules, value);
this.setState({
validatorRule: inputValidationResult.ruleText,
validated: inputValidationResult.validated
});
}, 500);
render() {
const { labelWidth, validatorRule, validated } = this.state;
const {
label,
maxLength,
flag,
countryCode,
placeholder,
onChangeText,
keyboardType,
value,
style,
inputRef,
floatingLabel,
hideWrongValidator,
hideCheckValidator,
validatorRules,
avoidDuplicated,
labelLegend,
editable,
mask,
leftSide,
onBlur
} = this.props;
const borderColor = this.colorAnim.interpolate({
inputRange: [0, 1],
outputRange: [Colors.brightGrey, Colors.headerTitle]
});
const labelColor = this.colorAnim.interpolate({
inputRange: [0, 1],
outputRange: [
value.length > 0 ? Colors.headerTitle : Colors.darkGrey,
Colors.headerTitle
]
});
const labelPositionX = this.colorAnim.interpolate({
inputRange: [0, 1],
outputRange: [labelWidth * 0.1, 0]
});
const labelPositionY = this.colorAnim.interpolate({
inputRange: [0, 1],
outputRange: [25, 0]
});
const labelScale = this.colorAnim.interpolate({
inputRange: [0, 1],
outputRange: [1.2, 1]
});
const pulseScale = this.pulseAnim.interpolate({
inputRange: [0, 1],
outputRange: [1, labelWidth > 30 ? 1.01 : 1.03]
});
if (!mask) {
console.dev(
'The mask property is required, consider using Input instead MaskedInput.'
);
return null;
}
return (
<View style={styles.container}>
<Animated.View
style={[
styles.inputContainer,
{
borderBottomColor: editable
? validatorRule !== null
? Colors.fail
: borderColor
: Colors.transparent
}
]}
>
<Animated.View
style={[
{ alignSelf: 'flex-start' },
floatingLabel &&
value.toString().length <= 0 && {
transform: [
{ translateX: labelPositionX },
{ translateY: labelPositionY },
{ scale: labelScale }
]
},
value.toString().length > 0 && {
transform: [{ scale: pulseScale }]
}
]}
>
{label && (
<Animated.Text
ref={labelText => (this.labelText = labelText)}
style={[
styles.label,
{
color: editable
? labelColor
: Colors.profileCircle
}
]}
onLayout={e => {
const labelWidth =
e.nativeEvent.layout.width;
this.setState(() => ({ labelWidth }));
}}
>
{label}
</Animated.Text>
)}
</Animated.View>
<View
style={{ flexDirection: 'row', alignItems: 'center' }}
>
{flag !== null && (
<Image source={flag} style={styles.flag} />
)}
<View>{leftSide}</View>
<View>
{countryCode !== null && (
<Text style={styles.countryCode}>+34 </Text>
)}
</View>
<View style={styles.inputContainerIn}>
<MaskedInputComponent
{...this.props}
editable={editable}
autoCorrect={false} // fix duplicated texts
// autoComplete={false} // fix duplicated texts
ref={localInputRef => {
if (localInputRef && avoidDuplicated) {
// Clear text input and keyboard suggestions
TextInputReset.resetKeyboardInput(
findNodeHandle(localInputRef)
);
}
inputRef(localInputRef);
}}
placeholder={placeholder}
value={value}
keyboardType={keyboardType}
borderBottomColor={'transparent'}
underlineColorAndroid={'transparent'}
maxLength={maxLength}
style={[styles.input, style]}
onChangeText={onChangeText}
onFocus={this.beforeFocus}
onBlur={() => {
this.handleFocus(false, 0);
if (validatorRules) {
this.handleRulesValidation(value);
}
onBlur();
}}
onTouchEnd={this.beforeTouch}
selectionColor={Colors.gray24}
/>
</View>
{validatorRules && (
<View>
{!hideCheckValidator &&
validatorRule === null &&
validated && (
<Image
source={Images.iconValidated}
style={styles.iconValidator}
/>
)}
{validatorRule !== null &&
hideWrongValidator && (
<Image
source={Images.iconClose}
style={styles.iconValidator}
/>
)}
</View>
)}
</View>
</Animated.View>
{this.state.validatorRule &&
this.state.validatorRule.length > 0 &&
validatorRules ? (
<InputValidationText>
{this.state.validatorRule}
</InputValidationText>
) : null}
{labelLegend && (
<Text style={styles.legendLabel}>{labelLegend}</Text>
)}
</View>
);
}
}EDIT: This error is showing in Sentry in Xiaomi devices with android 8, that info is based on 3 users, and it seems to happen on textChange as the trace shows it:
---- below is when the error happens ----
java.lang.reflect.Constructor in newInstance0
android.widget.TextView in sendAfterTextChanged at line 9382
---- below is the expected behavior ----
android.text.SpannableStringBuilder in replace at line 574
android.text.SpannableStringBuilder in replace at line 504
android.text.SpannableStringBuilder in replace at line 502
com.redmadrobot.inputmask.MaskedTextChangedListener in afterTextChanged at line 175
com.facebook.react.views.textinput.ReactEditText$b in afterTextChanged at line 702
android.widget.TextView in sendAfterTextChanged at line 9382
android.widget.TextView$ChangeWatcher in afterTextChanged at line 11924
android.text.SpannableStringBuilder in sendAfterTextChanged at line 1262
Hello, I have found an error on masked input, follow below the stack trace: