sevvaleygul0/react-native-dark-login-screen

Customizable social login screen

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.

react-native-dark-login-screen's Issues

Size not matched with mobile screen change

As the above image clearly explains, the sign-in and the sign-up screen don't take up all width of the screen.

Main container style overwrite

Hello, amazing package ! thank you so much - i love how everything is customizable.
one thing that was lacking is the main container style. I made this patch if you'd want it. I need it to make the background color matches my app theme

diff --git a/node_modules/react-native-dark-login-screen/build/dist/DarkLoginScreen.js b/node_modules/react-native-dark-login-screen/build/dist/DarkLoginScreen.js
index aaf202f..b7ebb0c 100644
--- a/node_modules/react-native-dark-login-screen/build/dist/DarkLoginScreen.js
+++ b/node_modules/react-native-dark-login-screen/build/dist/DarkLoginScreen.js
@@ -16,12 +16,12 @@ const DarkLoginScreen = (props) => {
             }}/>);
         }
         else {
-            return (<react_native_1.View style={DarkLoginScreen_style_1.default.screenContainer}>
+            return (<react_native_1.View style={[DarkLoginScreen_style_1.default.screenContainer, props.mainContainerStyle]}>
           <SignUpScreen_1.default {...props} handleSignIn={() => setNewAccount(false)}/>
         </react_native_1.View>);
         }
     };
-    return <react_native_1.View style={DarkLoginScreen_style_1.default.mainContainer}>{renderScreenChange()}</react_native_1.View>;
+    return <react_native_1.View style={[DarkLoginScreen_style_1.default.mainContainer, props.mainContainerStyle]}>{renderScreenChange()}</react_native_1.View>;
 };
 exports.default = DarkLoginScreen;
 //# sourceMappingURL=DarkLoginScreen.js.map

Additional Sign Up Fileds

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I add a few more fields for the sign up page to include separate username from the email field instead of setting email as username. I am still working on an edit to create a function to enable developers create fields on the fly

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-dark-login-screen/lib/DarkLoginScreen.tsx b/node_modules/react-native-dark-login-screen/lib/DarkLoginScreen.tsx
index 4557970..72378fe 100644
--- a/node_modules/react-native-dark-login-screen/lib/DarkLoginScreen.tsx
+++ b/node_modules/react-native-dark-login-screen/lib/DarkLoginScreen.tsx
@@ -45,7 +45,7 @@ interface DarkLoginScreenProps {
   handleFacebookLogIn?: () => void;
   handleForgotPassword?: () => void;
   fullNameOnChange?: (fullName: string) => void;
-  singUpPasswordChangeText?: (password: string) => void;
+  signUpPasswordChangeText?: (password: string) => void;
   emailOnChange?: (email: string) => void;
   handleSignUp?: () => void;
   handleSignUpButton?: () => void;
diff --git a/node_modules/react-native-dark-login-screen/lib/screens/sign-up/SignUpScreen.tsx b/node_modules/react-native-dark-login-screen/lib/screens/sign-up/SignUpScreen.tsx
index 33c8f9e..fa5fa18 100644
--- a/node_modules/react-native-dark-l