Installation

Add the dependency:

npm i react-native-dark-login-screen

Peer Dependencies

IMPORTANT! You need install them

"react": ">= 16.x.x",
"react-native": ">= 0.55.x",

Usage

Import

import DarkLoginScreen from "react-native-dark-login-screen";

Fundamental Usage

<DarkLoginScreen
  handleSignInButton={() => {}}
  handleGoogleLogIn={() => {}}
  handleFacebookLogIn={() => {}}
  handleSignInButton={() => {}}
/>

Configuration - Props

Sign In Screen

Property	Type	Default	Description
titleText	string	Welcome Back!	change the title text
titleTextStyle	TextStyle	default	set or override the style object for the title text
descriptionText	string	Please sign in to your account	change the description text
descriptionTextStyle	TextStyle	default	set or override the style object for the description
usernamePlaceholder	string	Username	change the username placeholder
textInputStyle	ViewStyle	default	set or override the style object for the username, password, fullname, email text inputs
placeholderTextColor	string	#6C6D72	change the placeholder text
passwordPlaceholder	string	Password	change the password placeholder
passwordTextInputStyle	ViewStyle	default	set or override the style object for the password text input
forgotPasswordText	string	Forgot Password?	change the forgot password text
forgotPasswordTextStyle	TextStyle	default	change the forgot button's text
signInButtonStyle	ViewStyle	default	set or override the style object for the sign in button style
signInButtonText	string	Sign In	change the sign in button text
signInButtonTextStyle	TextStyle	default	set or override the style object for the sign in button text style
googleButtonStyle	View	default	set or override the style object for the google button style
googleButtonTextStyle	TextStyle	default	set or override the style object for the google button text style
googleButtonText	string	Sign In With Google	change the google button style
facebookButtonStyle	ViewStyle	default	set or override the style object for the facebook button style
facebookButtonTextStyle	TextStyle	default	set or override the style object for the facebook button text style
facebookButtonText	string	Sign In With Facebook	change the facebook button text
appleButtonStyle	ViewStyle	default	set or override the style object for the apple button style
appleButtonTextStyle	TextStyle	default	set or override the style object for the apple button text style
appleButtonText	string	Sign In With Apple	change the apple button text
enableGoogleLogin	boolean	true	enable the google login button
enableFacebookLogin	boolean	true	enable the facebook login button
enableAppleLogin	boolean	true	enable the apple login button
signUpQuestionText	string	Don't Have An Account ?	change the question to sign up screen
signUpButtonText	string	Sign Up	change the sign up button text
signUpTextStyle	TextStyle	default	change the sign up button style
signUpButtonTextStyle	TextStyle	default	set or override the style object for the sign up button text style
usernameChangeText	function	undefined	handle the usernameChangeText function
passwordChangeText	function	undefined	handle the passwordChangeText function
handleSignInButton	function	undefined	handle Sign In button is pressed
handleGoogleLogIn	function	undefined	handle handleGoogleLogIn button is pressed
handleAppleLogIn	function	undefined	handle handleAppleLogIn button is pressed
handleFacebookLogIn	function	undefined	handle handleFacebookLogIn button is pressed
handleForgotPassword	function	undefined	handle handleForgotPassword button is pressed
handleSignUp	function	undefined	handle handleSignUp button is pressed for navigation to sign up screen
enableForgotPassword	boolean	true	enable the forgot password button

Sign Up Screen

Property	Type	Default	Description
signUpTitle	string	Create New Account	change the sign up screen title
signUpDescriptionText	string	Please fill in the form to continue	change the sign up description
signUpTitleTextStyle	TextStyle	default	change the title text style
signUpDescriptionTextStyle	TextStyle	default	change the description text style
fullNamePlaceholderText	string	Full Name	change the full name text input placeholder
placeholderTextColor	string	#6C6D72	change the placeholder text color
textInputStyle	ViewStyle	default	set or override the style object for the username, password, fullname, email text inputs
emailPlaceholderText	string	Email Address	change the placeholder for email text input
passwordPlaceholder	string	Password	change the placeholder for password text input
passwordTextInputStyle	ViewStyle	default	set or override the style object for the password text input
signUpButtonText	string	Sign Up	change the sign up button text
signUpButtonStyle	ViewStyle	default	set or override the style object for the sign up button style
signUpButtonTextStyle	TextStyle	default	set or override the style object for the sign up button text style
signInQuestionTextStyle	TextStyle	default	set or override the style object for the sign in question text style
signInQuestionText	string	Have An Account?	change the sign in question text
signInButtonTextStyle	TextStyle	default	set or override the style object for the sign in button text style
signInButtonText	string	Sign In	change the sign in button text
fullNameOnChange	function	undefined	handle fullNameOnChange input is changed
emailOnChange	function	undefined	handle emailOnChange input is changed
singUpPasswordChangeText	function	undefined	handle singUpPasswordChangeText is changed
handleSignUpButton	function	undefined	handle handleSignUpButton is pressed
handleSignIn	function	undefined	handle handleSignIn is pressed

Future Plans

• LICENSE
• Light mode integration :)

Inspirer

Thanks to https://dribbble.com/shots/15196515-Abda-The-Beginning for the design.

Author

Sevval Eygul, [email protected]

License

React Native Typescript Library Starter is available under the MIT license. See the LICENSE file for more info.