volkeno-react-native-login

This project is a login page with built-in buttons

This package is currently only maintained for Expo managed React Native projects, support for bare React Native projects is coming soon

Installation

Add the dependency:

npm i volkeno-react-native-login

or

yarn add volkeno-react-native-login

Peer Dependencies

IMPORTANT! You need install them.

 "react": "^16.0.0-beta.5",
 "react-native": "^0.49.1"

Basic Usage

First step: import the component:

import Login from "volkeno-react-native-login";

Second step: Use the login

export default function App() {
  const [showPassword, setShowPassword] = React.useState(false);
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [errors, setErrors] = React.useState({});

  const submit = async () => {
    Alert.alert("Félicitation", "Connexion réussie");
  };

  return (
    <View style={styles.container}>
      <LoginVolkeno
        showPassword={showPassword}
        setShowPassword={setShowPassword}
        email={email}
        setEmail={setEmail}
        password={password}
        setPassword={setPassword}
        errors={errors}
        setErrors={setErrors}
        title={"Login"}
        forgotPasswordText={"Mot de passe oublié ?"}
        OnSubmit={submit}
        textRedirectRegisterStyle={{ color: "red" }}
      />
    </View>
  );
}

Here we have a function which reacts when the connect button is clicked. showPassword and setShowPassword allows you to activate or deactivate the visibility of the password.

email and setEmail allows you to enter and modify the email variable when typing it.

password and setPassword are used to enter and modify the password variable when typed.

the variables errors and setErrors are mandatory. They allow you to display errors when validating the email and password

Configuration - Props

Props require

Property	Type	Default	Description
showPassword	boolean	false	Activate to see the password
setShowPassword	function	void	Called for allows you to activate or deactivate the visibility of the password.
email	string	-	Enter email address
setEmail	function	void	Called for allows you to enter and modify the email variable when typing it.
password	string	-	Enter email address
setPassword	function	void	Used to enter and modify the password variable when typed.
errors	object	void	Object used to store email and password validation errors
setErrors	function	void	They allow you to display errors when validating the email and password
OnSubmit	function	void	Fonction qui réagit lorsque le bouton de connexion est cliqué.

Other props

Property	Type	Default	Description
title	string	"Connexion"	change connection text
forgotPasswordText	string	-	Put a forgotten password text
pressForgotPassword	function	void	handle forgotPasswordText button is pressed
colorIconPassword	color	"#2FCA74"	eye color
textConnexion	string	"SE CONNECTER"	change text on login button
leftIconPassword	function	void	put a key icon 🔑 for the password
leftIconEmail	function	void	put a mail icon 📧 for the email address
textRedirectRegister	string	-	Allow to put a text which will make it possible to make a redirection towards the page of registration
pressRedirectRegister	function	void	handle textRedirectRegister button is pressed

Styles props

Property	Type	Default	Description
styles	style	{flex: 1, paddingHorizontal: 20}	modify or replace the default style of the entire page
textRedirectRegisterStyle	style	{ color: "#2FCA74",textAlign: "center",fontSize: 14 }	change or override the default styling for textRedirectRegister
connexionButtonStyle	style	{backgroundColor: "#2FCA74",height: 50,minWidth: "100%",paddingHorizontal: 25}	modify or replace the default style of the connexion button
connexionTitleStyle	style	{color: "white",fontWeight: "bold",letterSpacing: 1,ontSize: 14}	change or override the default styling for login text
titleStyle	style	{marginVertical: 30,fontWeight: "bold",color: "#454545",fontSize: 36,textAlign: "center",	change or override the default styling for connexion text
forgotPasswordTextStyle	style	{ color: "#454545" }	hange or override the default styling forgotPasswordText

export default function App() {
  const [showPassword, setShowPassword] = React.useState(false);
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [errors, setErrors] = React.useState({});

  const submit = async () => {
    Alert.alert("Félicitation", "Connexion réussie");
  };

  return (
    <View style={styles.container}>
      <Login
        OnSubmit={submit}
        pressForgotPassword={() => {
          Alert.alert("change passWord");
        }}
        pressRedirectRegister={() => {
          Alert.alert("redirect regidter");
        }}
        showPassword={showPassword}
        setShowPassword={setShowPassword}
        email={email}
        setEmail={setEmail}
        password={password}
        setPassword={setPassword}
        errors={errors}
        setErrors={setErrors}
        title={"Login"}
        forgotPasswordText={"Mot de passe oublié ?"}
        forgotPasswordTextStyle={{
          color: "red",
          textAlign: "center",
        }}
        titleStyle={{
          color: "red",
          marginVertical: 30,
          fontWeight: "bold",
          fontSize: 36,
          textAlign: "center",
        }}
        textConnexion={"Je me connect"}
        leftIconPassword={
          <Icon name="ios-lock-open-outline" size={20} color={Colors.bgApp2} />
        }
        leftIconEmail={
          <Icon name="mail-outline" size={20} color={Colors.bgApp2} />
        }
        textRedirectRegisterStyle={{ color: "red" }}
        textRedirectRegister="Je n'ai pas encore de compte"
        styles={{}}
      />
    </View>
  );
}