mesan-form-view v1.0.1

Mesan React Native Form View

Installation

$ npm i mesan-form-view --save

Basic Login Example

import React from 'react';

import Form, {FIELD_TYPES, FormComponents} from "mesan-form-view";

const {email, password} = FIELD_TYPES;
const {Container} = FormComponents;

export default class Example extends React.Component {
    //Data returned sample
    //data = {"email": "xxx@hotmail.com", "password": "testpass"}
    
    onSubmit = (data) => {
        //Return a promise
        return new Promise((reject) => {

            //if error, reject promise with error object passed
            reject(error)
        })
    };

    render() {
        let pillars = {buttonTitle: "LOGIN", inputs: [email, password]};
        return (
            <Container containerStyle={{backgroundColor: "#312E5B", justifyContent: "center", alignItems: "center"}}>
                <Form pillars={pillars}
                      onSubmit={this.onSubmit}
                      showForgotPassword={true}
                      onForgotPassword={() => {/*show forgot password view*/}}
                      containerStyle={{borderWidth:1, borderColor:"red"}}
                      buttonStyle={{
                          borderWidth: 0,
                          width: 20, ///...
                      }}/>
            </Container>
        );
    };
};

Basic Register Example

import React from 'react';

import Form, {FIELD_TYPES, FormComponents} from "mesan-form-view";

const {username, email, password, confirm_password, image} = FIELD_TYPES;
const {Container} = FormComponents;

export default class RegisterExample extends React.Component {
    //Data returned sample
    /*
    data = {
        "image": {"name": "0xx.jpg", "type": "image/jpeg", "uri": "xxx.jpg"},
        "username": "xxxxxx",
        "email": "xxx@hotmail.com",
        "password": "testpass",
        "confirm_password": "testpass",
    }
    */
    onSubmit = (data) => {
        //Return a promise
        return new Promise((reject) => {

            //if error, reject promise with error object passed
            reject(error)
        })
    };

    render() {
        let pillars = {buttonTitle: "REGISTER", inputs: [image, username, email, password, confirm_password]};
        return (
            <Container containerStyle={{backgroundColor: "#312E5B", justifyContent: "center", alignItems: "center"}}>
                <Form pillars={pillars}
                      onSubmit={this.onSubmit}
                      containerStyle={{}}
                      buttonStyle={{
                          backgroundColor: "#F90B1B",
                          borderWidth: 0,
                          width: 20, ///...
                      }}/>
            </Container>
        );
    };
};

Basic Welcome Example

import React from 'react';

import {FormComponents} from "mesan-form-view";
const {Container, AuthButton, SocialButton, SectionDivider, Footer} = FormComponents;

export default class Example extends React.Component {

    onContinueWithFacebook = () => {
    };

    render() {
        return (
            <Container containerStyle={{backgroundColor: "#312E5B", justifyContent: "center", alignItems: "center"}}>

                <SocialButton title={"CONTINUE WITH FACEBOOK"} onPress={this.onContinueWithFacebook}/>

                <SectionDivider/>

                <AuthButton title={"REGISTER"} onPress={() => alert("Show Register View")}/>

                <Footer title={"Already have an account?"} cta={"Login"} onPress={() => alert("Show Login View")} ctaStyle={{color: "#F90B1B"}}/>

            </Container>
        );
    };
};

Pillars props

Form props

Field Types

username : {
    name: "username",
    placeholder: 'Username',
    secureTextEntry: false
}

email : {
    name: "email",
    placeholder: 'Email address',
    secureTextEntry: false
};

password : {
    name: "password",
    placeholder: 'Password',
    secureTextEntry: true
};

confirm_password: {
    name: "confirm_password",
    placeholder: 'Confirm Password',
    secureTextEntry: true
};

image : {
    name: "image"
};


import {FIELD_TYPES} from "mesan-form-view";
const { username, email, password, confirm_password, image } = FIELD_TYPES;

NOTE:  The component assumes all fields are required

Form Components

Auth Container

A Keyboard Avoiding View

<Container containerStyle={{backgroundColor: "#312E5B"}}>
  ///{child components go here }
</Container>

Auth Button

Shows a normal button

 <AuthButton title={"REGISTER"} onPress={() => alert("Show Register View")}/>

Social Button

Shows a Facebook button

<SocialButton title={"CONTINUE WITH FACEBOOK"} onPress={() => alert("Call required function")}/>

Section Divider

A line with centered text

<SectionDivider backgroundColor={"grey"} textStyle={{}} text={"Or"}/>

Footer

A view that can be placed at the bottom of the container with a Call to Action

<Footer title={"Already have an account?"} cta={"Login"} onPress={() => alert("Show Login View")} ctaStyle={{color: "#F90B1B"}}/>

Dependencies

• react-native-elements
• prop-types
• expo