I'm using Redux-form(8.2.6) with expo(34).whenever i entered any input value in Field, cursor getting jumped.I need to enter input slowly then only all input value entered correctly, otherwise input value getting render every time.
What am I doing wrong?
My form
import React, { Component } from "react";
import { View } from "react-native";
import {
Container,
Item,
Input,
Header,
Body,
Content,
Title,
Button,
Text,
Label
} from "native-base";
import { Field, reduxForm } from "redux-form";
const validate = values => {
const error = {};
error.email = "";
error.name = "";
var ema = values.email;
var nm = values.name;
if (values.email === undefined) {
ema = "";
}
if (values.name === undefined) {
nm = "";
}
if (ema.length < 8 && ema !== "") {
error.email = "too short";
}
if (!ema.includes("@") && ema !== "") {
error.email = "@ not included";
}
if (nm.length > 8) {
error.name = "max 8 characters";
}
return error;
};
class SimpleForm extends Component {
constructor(props) {
super(props);
this.state = {
isReady: false
};
this.renderInput = this.renderInput.bind(this);
}
renderInput({ input, label, type, meta: { touched, error, warning } }) {
var hasError = false;
if (error !== undefined) {
hasError = true;
}
return (
<View>
<Item error={hasError} floatingLabel style={{paddingBottom:8}}>
<Label>{label}</Label>
<Input
{...input}
style={{ borderBottomWidth: 1.5, borderColor: "blue" }}
/>
</Item>
{hasError ? <Text>{error}</Text> : <Text />}
</View>
);
}
render() {
const { handleSubmit, reset } = this.props;
return (
<Container>
<Header>
<Body>
<Title>Redux Form</Title>
</Body>
</Header>
<Content padder>
<Field name="email" label="Email" component={this.renderInput} />
<Field name="name" label="Name" component={this.renderInput} />
<Button block primary>
<Text>Submit</Text>
</Button>
</Content>
</Container>
);
}
}
export default reduxForm({
form: "test",
validate
})(SimpleForm);
I searched online but any solution didn't work.
anyone help me out from this issue.
