https://github.com/wrathchaos/react-native-login-screen
🚀 Fully Customizable Beautiful React Native Login Screen
https://github.com/wrathchaos/react-native-login-screen
android component cross-platform customizable customizable-ui easy freakycoder ios kurat login login-page login-screen one-line-code react react-native react-native-login-screen screen
Last synced: about 1 year ago
JSON representation
🚀 Fully Customizable Beautiful React Native Login Screen
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-login-screen
- Owner: WrathChaos
- License: mit
- Created: 2019-09-24T19:41:22.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-28T13:30:53.000Z (about 1 year ago)
- Last Synced: 2025-04-01T05:36:09.106Z (about 1 year ago)
- Topics: android, component, cross-platform, customizable, customizable-ui, easy, freakycoder, ios, kurat, login, login-page, login-screen, one-line-code, react, react-native, react-native-login-screen, screen
- Language: TypeScript
- Homepage: https://www.freakycoder.com
- Size: 137 MB
- Stars: 225
- Watchers: 5
- Forks: 43
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-login-screen)
[](https://github.com/WrathChaos/react-native-login-screen)
[](https://www.npmjs.com/package/react-native-login-screen)
[](https://www.npmjs.com/package/react-native-login-screen)
[](https://opensource.org/licenses/MIT)
# 🥳 Version 5
Version 5 with the completely new UI
- Whole new UI / UX Design 😍
- Built-in Email Validation 📧
- Built-in Password Validation 🔒
- Built-in Email Tooltip 📧
- Built-in Password Tooltip 🔒
- Built-in Show/Hide Password Feature 👀
- Fully Customizable 🎨
- Better Code Quality 🚀
- Ready to use `SocialButton` Component
- `Only ONE dependency` is needed
## Installation
Add the dependency:
```bash
npm i react-native-login-screen
```
## Peer Dependencies
###### IMPORTANT! You need install them.
```bash
npm i react-native-text-input-interactive
```
```
"react-native-text-input-interactive": ">= 0.1.3"
```
## Import
```js
import LoginScreen from "react-native-login-screen";
```
# Usage
```tsx
const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
{}}
onSignupPress={() => {}}
onEmailChange={setUsername}
onPasswordChange={setPassword}
enablePasswordValidation
/>
```
## Basic Signup Screen Usage
```tsx
{}}
onSignupPress={() => {}}
onEmailChange={setUsername}
loginButtonText={'Create an account'}
disableSignup
textInputChildren={
}
onPasswordChange={setPassword}
/>
```
## Usage with Social Button
You can put any `children` into the LoginScreen, I recommend you to use `SocialButton`.
## Configuration - Props
### Fundamentals
| Property | Type | Default | Description |
|------------------|:--------:|:---------:|---------------------------------------------------------------|
| onLoginPress | function | undefined | set your own function when the `login button` is pressed |
| onSignupPress | function | undefined | set your own function when the `Create an account` is pressed |
| onEmailChange | function | undefined | set your own function when `email` textinput has a change |
| onPasswordChange | function | undefined | set your own function when `password` textinput has a change |
### Customizations (Optional)
| Property | Type | Default | Description |
|-------------------------|:----------:|:-------------------:|---------------------------------------------------------|
| onEyePress | function | undefined | set your own function when `eye icon` button is pressed |
| signupText | string | "Create an account" | change the sign up text |
| disableSignup | boolean | false | disable the signup if you do not want to use it |
| disableDivider | boolean | false | disable the divider if you do not want to use it |
| disableSocialButtons | boolean | false | disable the all social buttons |
| disablePasswordInput | boolean | false | disable the password text input |
| disableEmailValidation | boolean | false | disable built-in email validation |
| disableEmailTooltip | boolean | false | enable built-in password validation |
| disablePasswordTooltip | boolean | false | disable built-in email tooltip |
| disableEmailTooltip | boolean | false | disable built-in password tooltip |
| emailPlaceholder | string | "Email" | change email placeholder text |
| passwordPlaceholder | string | "Password" | change password placeholder text |
| loginButtonText | string | "Login" | change login button's text |
| style | ViewStyle | default | set/override the default style for the container |
| dividerStyle | ViewStyle | default | set/override the default divider style |
| logoImageStyle | ImageStyle | default | set/override the default image style |
| textInputContainerStyle | ViewStyle | default | set/override the default text input container style |
| loginButtonStyle | ViewStyle | default | set/override the default login button style |
| loginTextStyle | TextStyle | default | set/override the default login text style |
| signupStyle | ViewStyle | default | set/override the default signup button style |
| signupTextStyle | TextStyle | default | set/override the default signup text style |
| signupTextStyle | TextStyle | default | set/override the default signup text style |
| passwordContentTooltip | Component | default | set on your own **tooltip content** for password |
| emailContentTooltip | Component | default | set on your own **tooltip content** for email |
### Advanced Customizations (Optional)
| Property | Type | Default | Description |
|--------------------------|:-----------------------------------------------------------------------------------------------------------------------:|:----------------:|------------------------------------------------------------------------|
| customTextInputs | Component | default | set your own custom text inputs instead of built-in ones |
| textInputChildren | Component | default | set your own EXTRA custom text inputs with the current ones |
| customLogo | Component | default | set your own logo |
| customLoginButton | Component | default | set your login button |
| customSignupButton | Component | default | set your sign up button |
| customDivider | Component | default | set your divider |
| customLoginButton | Component | default | set on your own components instead of default **login button** |
| customSignupButton | Component | default | set on your own components instead of default **signup button** |
| TouchableComponent | Pressable | TouchableOpacity | set on your own Touchable Component |
| customTextInputs | Component | default | set on your own **textinputs** instead of default ones |
| customSocialLoginButtons | Component | default | set on your own components instead of default **social login buttons** |
| emailTextInputProps | [IInteractiveTextInputProps](https://github.com/WrathChaos/react-native-text-input-interactive#customization-optionals) | default | set/override the email text input props |
| passwordTextInputProps | [IInteractiveTextInputProps](https://github.com/WrathChaos/react-native-text-input-interactive#customization-optionals) | default | set/override the password text input props |
### Default Social Login Buttons (Optional)
| Property | Type | Default | Description |
|-----------------|:--------:|:---------:|--------------------------------------------------------------|
| onFacebookPress | function | undefined | set your own function for the `Facebook` social button press |
| onTwitterPress | function | undefined | set your own function for the `Twitter` social button press |
| onApplePress | function | undefined | set your own function for the `Apple` social button press |
| onDiscordPress | function | undefined | set your own function for the `Discord` social button press |
# Version 2 is still available
if you do not like the new design, you can still use the old design :)
```bash
npm i react-native-login-screen@2.1.4
```
### Roadmap
- [x] ~~LICENSE~~
- [x] ~~Android Design Bug Fixes~~
- [x] ~~Configuration - Props COMING SOON~~
- [x] ~~Typescript Challenge!~~
- [x] ~~Remove some dependencies~~
- [x] ~~Better TextField Library Integration~~
- [x] ~~Password show/hide~~
- [x] ~~Customizable Components~~
- [x] ~~Customizable Styles~~
- [x] ~~Built-in Email Validation~~
- [x] ~~Built-in Password Validation~~
- [x] ~~Built-in Email Tooltip~~
- [x] ~~Built-in Password Tooltip~~
- [ ] Write an article about the lib on Medium
- [ ] Write an article about the lib on DevTO
## Credits
For the awesome photo thanks to [jcob nasyr from Unsplash](https://unsplash.com/photos/67sVPjK6Q7I)
Thank you so much for the eye icon [Torskaya](https://www.flaticon.com/authors/torskaya)
## Author
FreakyCoder, kurayogun@gmail.com
## License
React Native Login Screen is available under the MIT license. See the LICENSE file for more info.