Installation

Add the dependency:

npm i react-native-login-screen

Peer Dependencies

IMPORTANT! You need install them.

"react-native-spinkit": ">= 1.5.0",
"@freakycoder/react-native-helpers": ">= 0.1.3",
"@freakycoder/react-native-material-textfield": ">= 1.0.0"

Import

import LoginScreen from "react-native-login-screen";

Usage

😍 One Line Code to Get The Whole Login Screen 🎉

<LoginScreen />

Customizable Advanced Usage

Fully Customizable & Ready to Use Login Screen. You can customize anything on the login screen. Check the example :)

Advanced Usage with Custom Children

Pretty advanced and fully customizable example of login screen

<LoginScreen
  spinnerEnable
  spinnerVisibility={spinnerVisibility}
  labelTextStyle={{
    color: "#adadad",
    fontFamily: "Now-Bold",
  }}
  logoTextStyle={{
    fontSize: 27,
    color: "#fdfdfd",
    fontFamily: "Now-Black",
  }}
  loginButtonTextStyle={{
    color: "#fdfdfd",
    fontFamily: "Now-Bold",
  }}
  textStyle={{
    color: "#757575",
    fontFamily: "Now-Regular",
  }}
  signupStyle={{
    color: "#fdfdfd",
    fontFamily: "Now-Bold",
  }}
  usernameOnChangeText={(username) => console.log("Username: ", username)}
  onPressSettings={() => alert("Settings Button is pressed")}
  passwordOnChangeText={(password) => console.log("Password: ", password)}
  onPressLogin={() => {
    setSpinnerVisibility(true);
    setTimeout(() => {
      setSpinnerVisibility(false);
    }, 2000);
  }}
  onPressSignup={() => {
    console.log("onPressSignUp is pressed");
  }}
>
  <View
    style={{
      position: "relative",
      alignSelf: "center",
      marginTop: 64,
    }}
  >
    <Text style={{ color: "white", fontSize: 30 }}>
      Inside Login Screen Component
    </Text>
  </View>
</LoginScreen>

Configuration - Props

Fundamentals

Property	Type	Default	Description
source	local/uri	unsplash image	change the background image with local or uri prop
onPressLogin	function	undefined	set your own functional logic for `login button` is pressed
onPressSettings	function	undefined	set your own functional logic for `settings button` is pressed
usernameOnChangeText	function	undefined	set your own functional logic for `username` onChange value
passwordOnChangeText	function	undefined	set your own functional logic for `password` onChange value
loginButtonBackgroundColor	color	#282828	change the login button's background color
loginText	string	LOGIN	change the login button's text
loginButtonTextStyle	style	default	set your own style for the login button's text style
logoComponent	component	Icon	set your own logo component instead of default Icon
spinnerEnable	bool	false	set the spinner enable this is required to use spinner
spinnerVisibility	bool	false	set the logic for spinner enabling / disabling for the login text button
spinnerColor	color	#fdfdfd	change the spinner color
spinnerSize	number	30	change the spinner size
spinnerType	bool	false	change the spinner type
spinnerStyle	bool	false	set your own style for the spinner itself

Bottom Container Props

Property	Type	Default	Description
placeholder	string	default	set the placeholder of the text input with both title and placeholder itself
backgroundColor	color	rgba(255,255,255,0.45)	change the bottom container's background color
disableSettings	boolean	false	disable the settings button if you do not want it
disableSignupButton	boolean	false	disable the signup button if you do not want it
usernameIconComponent	component	default	set any component instead of username icon component
passwordIconComponent	component	default	set any component instead of password icon component
settingsIconComponent	component	default	set any component instead of settings icon component
usernameTextInputValue	value	default	set username's text input value
passwordTextInputValue	value	default	set password's text input value
usernamePlaceholder	string	Username	change the username text input's placeholder
passwordPlaceholder	string	Password	change the password text input's placeholder
usernameTitle	string	Username	change the username title
passwordTitle	string	Password	change the password title

Changelog

2.1.2 (2020-11-02)

⚠️ Breaking Change: react-native-helpers dependency version upgrade ⚠️

Simply install: "@freakycoder/react-native-helpers" : ">= 1.0.0"

Full Changelog

Merged pull requests:

Bump @react-native-community/eslint-config from 0.0.5 to 2.0.0 #21 (dependabot-preview[bot])
Bump eslint from 6.8.0 to 7.10.0 #20 (dependabot-preview[bot])
Bump typescript from 3.9.7 to 4.0.3 #19 (dependabot-preview[bot])

2.1.1 (2020-10-02)

Full Changelog

Implemented enhancements:

Support custom props for TextInput #9

Fixed bugs:

TypeError: undefined is not an object (evaluating '_reactNative.Animated.Text.propTypes.style') #17
onPressSignup breaks the card swap functionality #13

Closed issues: