react-native-dark-login-screen
React native dark 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 |
enableGoogleLogin | boolean | true | enable the google login button |
enableFacebookLogin | boolean | true | enable the facebook 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 |
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 |
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 |
Author
Sevval Eygul, [email protected]