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": "[email protected]", "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": "[email protected]",
        "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

| prop | value | required/optional | description | | ---- | ----- | ----------------- | ----------- | | buttonTitle | string | required | The button text | | inputs | array of field types | required | the textfields you want to show including image for uploading profile pic |

Form props

| prop | value | required/optional | description | | ---- | ----- | ----------------- | ----------- | | pillars | object | required | the button title and textfields to display | | onSubmit | function | required | the function called after validation - should return a promise | | containerStyle | style | optional | styles for the form container | | buttonStyle | style | optional | styles for the button | | showForgotPassword | boolean | optional | if true, shows the "Forgot password?" text under the last textfield | | onForgotPassword | function | required | the function called when the text is clicked |

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>

| prop | value | required/optional | description | | ---- | ----- | ----------------- | ----------- | | containerStyle | function | optional | the style for the button container |

Auth Button

Shows a normal button

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

| prop | value | required/optional | description | | ---- | ----- | ----------------- | ----------- | | title | string | required | The button text | | onPress | function | required | what happens when button is pressed| | containerStyle | function | optional | the style for the button container | | buttonStyle | function | optional | the style for the button | | textStyle | function | optional | the button text style| | colors | function | optional | pass an arry of colors for a gradient button|

Social Button

Shows a Facebook button

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

| prop | value | required/optional | description | | ---- | ----- | ----------------- | ----------- | | title | string | required | The button text | | onPress | function | required | what happens when button is pressed| | containerStyle | function | optional | the style for the button container | | textStyle | function | optional | the button text style|

Section Divider

A line with centered text

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

| prop | value | required/optional | description | | ---- | ----- | ----------------- | ----------- | | text | string | required | The text to show - default is "Or" | | backgroundColor | string | required | Line color | | containerStyle | function | optional | the style for the button container | | textStyle | function | optional | the button text style|

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

| prop | value | required/optional | description | | ---- | ----- | ----------------- | ----------- | | title | string | required | The button text | | cta | string | required | Call to Action text | | onPress | function | required | what happens when the cta is pressed| | ctaStyle | function | optional | the style for the button container |

Dependencies

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