jeffraux / react-native-validate-form

A simple yet customizable (to some extent) form validation in React Native
MIT License
8 stars 5 forks source link

Error while trying to import #2

Open jason7toxic opened 5 years ago

jason7toxic commented 5 years ago

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" },

simulator screen shot - ipad 5th generation - 2019-02-21 at 23 54 00

screenshot 2019-02-21 at 11 53 54 pm
jeffraux commented 5 years ago

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 commented 5 years ago

@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 (

(this.myForm = ref)} validate={true} submit={this.submitSuccess.bind(this)} failed={this.submitFailed.bind(this)} errors={this.state.errors} > this.setState({ email: val })} // customStyle={{ width: 100 }} /> )}
);

}

_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 commented 5 years ago

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 commented 5 years ago

Hi @jeffraux

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