Ovpv-rn-login NPM

RN-login

why do you need it?

So if you are creating/working multiple react-native application and you dont want to create the login page (which is common for most react-native apps) again and again from scratch. You can use this module specifically for reusablity purpose.

How to use?

Add the module to your project

You can directly add this module using git to your project, use the following command

git submodule add https://github.com/ovpv/RN-login.git YOUR_MODULES_FOLDER/login

you can add using npm

npm i -S ovpv-rn-login

Using the module

import React from 'react';
import {loginRenderData, updateStyleSheet } from 'ovpv-rn-login';
// import {loginRenderData, updateStyleSheet } from '../modules/login/login'; (in case of module added through git using "git submodule add" command)

const styles = updateStyleSheet({
    container:{
        width:"100%",
        justifyContent:"center",
        alignItems: "center",
        flex:1
    }
})

export default class RNLogin extends React.Component {
  constructor(){
      super()
      this.state={
          email:"",
          password:""
      }
  }
  render() {
    var LoginData = {
        styles,
        component:this,
        handleLogin: this.handleLogin,
        logo: "https://via.placeholder.com/300/09f/fff.png",
        loginText: "Login!"
    }
    let renderData = loginRenderData(LoginData);
    return renderData;
  }
  handleLogin(email,password){
    console.dir({
      email,
      password
    }); // email and password is the same data passed to the module by component's state
  }
}

Available methods

updateStyleSheet(updatedStyles) The login module contains a default set of styles. check them below:

const defaultStyles ={
  container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
  },
  emailTextField:{
    color:"green",
    borderTopColor:"transparent",
    borderLeftColor:"transparent",
    borderRightColor:"transparent",
    borderBottomColor:"blue",
    borderWidth:1,
    height:50,
    width: "80%",
    paddingLeft:10,
    paddingRight:10,
    marginTop:20
  },
  passwordTextField:{
      color:"green",
      borderTopColor:"transparent",
      borderLeftColor:"transparent",
      borderRightColor:"transparent",
      borderBottomColor:"blue",
      borderWidth:1,
      height:50,
      width: "80%",
      paddingLeft:10,
      paddingRight:10,
      marginBottom: 20
  },
  loginButton:{
      width:"50%",
      height: 50,
      marginTop:30,
      backgroundColor:"rgba(150,150,48,0.5)",
      justifyContent:"center",
      alignItems:"center"
  },
  loginButtonText:{
      color:"#fff"
  }
};

So if you want to override the existing styles or add new styles, you can pass an updated styles object to the method and you will find the changes reflected in your login component.

loginRenderData(data) This method render the jsx for your login component.

Your data object should contain the following:

const data = {
  logo: "https://your/image/uri.png",
  handleLogin: yourDefinedHandleLoginMethod
  loginText: "The text for your login button",
  component: your react login component,
  rendered:{
      beforeLogo:[<jsx key="a unique key"> you need to render before logo </jsx>],
      afterLogo:[<jsx key="a unique key"> you need to render below logo </jsx>],
      afterEmail:[<jsx key="a unique key"> you need to render below email feild</jsx>],
      afterPassword:[<jsx key="a unique key"> you need to render below password field </jsx>],
      beforeLoginText:[<jsx key="a unique key"> you need to render above login button text </jsx>],
      afterLoginText:[<jsx key="a unique key"> you need to render below login button text </jsx>],
      afterSubmit:[<jsx key="a unique key"> you need to render below login submit button </jsx>]
  }
}

please note:

the jsx for the render hooks to be passed must be of type array
the jsx component must have a unique key

ps : render hooks is an experimental feature and you might face issues while using them. Do post an issue if you experience any issue or find any bug in the new feature.

Inside your component's render method do the following:

render() {
  var LoginData = {
    styles,
    component: this,
    rendered:{
      beforeLogo:[<View key="before-logo"><Text>This is text before logo</Text></View>],
      afterLogo:[<View key="after-logo"><Text>This is text after logo</Text></View>],
      afterEmail:[<View key="after-email"><Text>This is text after Email</Text></View>],
      afterPassword:[<View key="after-pass"><Text>This is text after password</Text></View>],
      beforeLoginText:[<View key="before-login-text"><Text>This is text before login text</Text></View>],
      afterLoginText:[<View key="after-login-text"><Text>This is text after login text</Text></View>],
      afterSubmit:[<View key="after-submit"><Text>This is text after submit</Text></View>]
    },
    handleLogin: this.handleLogin,
    logo: "https://via.placeholder.com/300/09f/fff.png",
    loginText: "Login!"
  };
  let renderData = loginRenderData(LoginData);
  return renderData;
}
handleLogin(email,password){
  console.dir({
    email,
    password
  }); // email and password is the same data passed to the module by component's state
}

Want to let me know of an issue?

If you have an issue and you need to discuss it with me, then create a new issue here.

Before you create an issue make sure you confirm the following:

steps to reproduce: What did you do to produce the issue you are facing?
list the versions in which you are facing the issue
- android
- ios
- expo
- reactnative
- react
- node

Discussing a new feature

If you see a scope for adding new feature to the module. Lets take it up for discussion. Create an issue with the title prefix "Discussion" and if you convince me, we can proceed to add a PR for the same.

Adding a new PR for a new feature

Once the discussion is successful, you can submit your fork here.

In your fork, do the following before you start:

checkout the "develop" branch
branchout from develop to add your new feature in the format feature/YOUR_FEATURE_NAME
make changes to your branch in your fork
submit your PR when ready
Once it is reviewed and accepted, it will be merged.