https://github.com/sevvaleygul0/react-native-dark-login-screen
Customizable social login screen
https://github.com/sevvaleygul0/react-native-dark-login-screen
library mobil mobile mobile-development react-native react-native-dark-login-screen react-native-library
Last synced: about 1 year ago
JSON representation
Customizable social login screen
- Host: GitHub
- URL: https://github.com/sevvaleygul0/react-native-dark-login-screen
- Owner: sevvaleygul0
- Created: 2021-03-07T17:04:02.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-06-30T14:45:04.000Z (almost 4 years ago)
- Last Synced: 2025-04-24T13:40:29.387Z (about 1 year ago)
- Topics: library, mobil, mobile, mobile-development, react-native, react-native-dark-login-screen, react-native-library
- Language: TypeScript
- Homepage:
- Size: 18 MB
- Stars: 10
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/sevvaleygul0/react-native-dark-login-screen)
# Installation
Add the dependency:
```bash
npm i react-native-dark-login-screen
```
## Peer Dependencies
IMPORTANT! You need install them
```js
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
```
# Usage
## Import
```jsx
import DarkLoginScreen from "react-native-dark-login-screen";
```
## Fundamental Usage
```jsx
{}}
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
- [x] ~~LICENSE~~
- [ ] Light mode integration :)
## Inspirer
Thanks to https://dribbble.com/shots/15196515-Abda-The-Beginning for the design.
## Author
Sevval Eygul, sevvalleygull@gmail.com
## License
React Native Typescript Library Starter is available under the MIT license. See the LICENSE file for more info.