Error while trying to import

[jason7toxic]

Hi,

I'm stuck after importing the component, mind to help

"dependencies": {
"react": "16.6.3",
"react-native": "0.58.4",
"react-native-gesture-handler": "^1.0.15",
"react-native-keyboard-aware-scroll-view": "^0.8.0",
"react-native-linear-gradient": "^2.5.3",
"react-native-paper": "^2.11.1",
"react-native-validate-form": "^1.1.3",
"react-native-vector-icons": "^6.3.0",
"react-native-version-number": "^0.3.5",
"react-navigation": "^3.3.0"
},

[jeffraux]

Hi @jason7toxic , can you post the code snippet of how you use the Form and Field components in here? For the meantime, I'll try to replicate this and investigate on the issue. I'll get back to you. Thanks.

[jason7toxic]

@jeffraux Below the code I used for Sign In module testing.

`import React, { Component } from "react";
import { View, AsyncStorage, StyleSheet, Text } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import Input from "../form/input";
import { Button } from "react-native-paper";
import { Form, Field } from "react-native-validate-form";

const required = value => (value ? undefined : "This is a required field.");
const email = value =>
value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,5}$/i.test(value)
? "Please provide a valid email address."
: undefined;

export default class SignInScreen extends Component {
static navigationOptions = {};

state = {
validate: true,
errors: [],
email: ""
};

submitForm() {
let submitResults = this.myForm.validate();

let errors = [];

submitResults.forEach(item => {
  errors.push({ field: item.fieldName, error: item.error });
});

this.setState({ errors: errors });

}

submitSuccess() {
console.log("Submit Success!");
}

submitFailed() {
console.log("Submit Faield!");
}

render() {
return (


<Form
ref={ref => (this.myForm = ref)}
validate={true}
submit={this.submitSuccess.bind(this)}
failed={this.submitFailed.bind(this)}
errors={this.state.errors}
>
<KeyboardAwareScrollView
contentContainerStyle={{
flex: 1
}}
>


<Field
required
component={Input}
validations={[required, email]}
name="email"
value={this.state.email}
onChangeText={val => this.setState({ email: val })}
// customStyle={{ width: 100 }}
/>
<Button
mode="contained"
onPress={() =>
validateForm().then(() => {
if (isValid) {
alert("Good to submit");
}
})
}
style={styles.loginBtn}
>
Sign In




)}



);
}

_signInAsync = async () => {
await AsyncStorage.setItem("userToken", "abc");
this.props.navigation.navigate("App");
};
}

var styles = StyleSheet.create({
root: {
flex: 1
},
content: {
flex: 1
},
loginWrapper: {
flex: 1,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
borderWidth: 1,
borderStyle: "solid"
},
loginPanel: {
width: "50%",
height: "50%"
},
loginBtn: {
marginTop: 10,
padding: 10
},
footer: {
height: 50
},
slogan: {
flex: 1,
textAlign: "center",
fontSize: 17,
fontWeight: "bold",
color: "#fff"
}
});

`

[jeffraux]

Hi @jason7toxic , I can't seem to view your code properly. Can you edit your comment and enclose your code so it will look like this:

test: { name: 'this is a javascript code snippet' }

EDIT: You can view the proper markdown styling here https://guides.github.com/features/mastering-markdown/. Thanks.

[jason7toxic]

Hi @jeffraux

Uploaded test project at https://github.com/jason7toxic/test