obout TextField #1102
Description
When Using TextField
I set the validateOnChange, validationMessage, validate properties.
When I type, I expect not only to display an error message on the screen,
but also to give me a callback method that returns the current error message to me.
I tried everything and it didn't work.
import React, { Component } from "react";
import { StyleSheet } from "react-native";
import Animated, { useSharedValue, useAnimatedStyle } from "react-native-reanimated";
import { View, Text, Button, Colors, Incubator } from "react-native-ui-lib";
const { TextField,useFieldState } = Incubator;
const moveStyle = (height) => {
const offset = useSharedValue(0);
return useAnimatedStyle(() => {
return {
transform: [{ translateY: offset.value + height }],
};
});
};
export default class RTextField extends Component {
constructor(props) {
super(props);
this.state = {
value: null,
};
this.textFiled = null;
}
componentDidMount() {
}
render() {
const {
maxLength,
hint,
placeholder,
leadingAccessory,
trailingAccessory,
validates = [],
validationMessages = [],
onChangeText,
secureTextEntry,
fieldStyle,
validationMessageStyle,
onLine,
...params
} = this.props;
const { value } = this.state;
return (
<TextField size17
ref={ c => this.textFiled = c}
hint={hint}
containerStyle={styles.container}
style={styles.input}
value={value}
enableErrors
validateOnChange
// floatingPlaceholder
// floatingPlaceholderStyle={styles.floatingPlaceholder}
validationMessage={[placeholder, ...validationMessages]}
validate={["required", ...validates]}
validationMessageStyle={[styles.validationMessage, validationMessageStyle]}
leadingAccessory={leadingAccessory}
trailingAccessory={this.right(trailingAccessory)}
placeholder={placeholder}
fieldStyle={[onLine ? styles.onLineFieldStyle : styles.fieldStyle]}
autoCorrect={false}
maxLength={maxLength || 20}
onChangeText={this.onChangeText}
autoCapitalize="none"
secureTextEntry={secureTextEntry}
{...params}
/>
);
};
onClear = () => this.setState({ value: null });
onChangeText = value => {
const { onChangeText } = this.props;
this.setState({ value });
onChangeText && onChangeText(value);
};
right = (trailingAccessory) => {
const { value } = this.state;
return (
<Clear show={value && value.length > 0} onClear={this.onClear} />
{trailingAccessory}
);
};
checkError = () => {
}
}
const Clear = ({ show, onClear }) => {
return show ? <Button link
style={styles.button}
activeOpacity={0.8}
iconStyle={{ tintColor: Colors.grey9D }}
iconSource={skImage("clear")}
onPress={onClear} />
: null;
};
const styles = StyleSheet.create({
container: {
// marginTop: 20,
height: 50,
},
input: {
height: 50,
},
floatingPlaceholder: {
marginTop: 10,
color: Colors.red10,
},
fieldStyle: {
borderColor: Colors.grey40,
borderBottomWidth: 0.5,
marginLeft: 16,
},
onLineFieldStyle: {
marginLeft: 16,
borderBottomWidth: 0,
},
validationMessage: {
marginTop: 5,
fontSize: 12,
marginLeft: 16,
},
});