{"id":17700878,"url":"https://github.com/wrathchaos/react-native-login-screen","last_synced_at":"2025-04-08T08:15:38.494Z","repository":{"id":35138010,"uuid":"210683857","full_name":"WrathChaos/react-native-login-screen","owner":"WrathChaos","description":"🚀 Fully Customizable Beautiful React Native Login Screen","archived":false,"fork":false,"pushed_at":"2025-03-28T13:30:53.000Z","size":143802,"stargazers_count":225,"open_issues_count":2,"forks_count":43,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-01T05:36:09.106Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://www.freakycoder.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WrathChaos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-24T19:41:22.000Z","updated_at":"2025-03-28T18:52:16.000Z","dependencies_parsed_at":"2023-12-21T11:57:42.934Z","dependency_job_id":"52919e71-8116-4733-91fa-8dadb59d00f0","html_url":"https://github.com/WrathChaos/react-native-login-screen","commit_stats":{"total_commits":422,"total_committers":5,"mean_commits":84.4,"dds":0.3222748815165877,"last_synced_commit":"93a696b4b81d2ef76a1b24c29b25037553c97745"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-login-screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-login-screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-login-screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-native-login-screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WrathChaos","download_url":"https://codeload.github.com/WrathChaos/react-native-login-screen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247801175,"owners_count":20998339,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-10-24T17:43:33.900Z","updated_at":"2025-04-08T08:15:38.460Z","avatar_url":"https://github.com/WrathChaos.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"React Native Login Screen\" src=\"assets/logo.png\" width=\"1050\"/\u003e\n\n[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-login-screen)\n\n[![One Line of Code to Plug \u0026 Play | Fully Customizable Beautiful React Native Login Screen](https://img.shields.io/badge/-One%20Line%20of%20Code%20to%20Plug%20%26%20Play%20%7C%20Fully%20Customizable%20Beautiful%20React%20Native%20Login%20Screen-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-login-screen)\n\n[![npm version](https://img.shields.io/npm/v/react-native-login-screen.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-login-screen)\n[![npm](https://img.shields.io/npm/dt/react-native-login-screen.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-login-screen)\n![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"React Native Login Screen\" src=\"assets/Screenshots/react-native-login-screen.gif\"  height=\"788\" width=\"390\" /\u003e\n\u003c/p\u003e\n\n# 🥳 Version 5\n\nVersion 5 with the completely new UI\n\n- Whole new UI / UX Design 😍\n- Built-in Email Validation 📧\n- Built-in Password Validation 🔒\n- Built-in Email Tooltip 📧\n- Built-in Password Tooltip 🔒\n- Built-in Show/Hide Password Feature 👀\n- Fully Customizable 🎨\n- Better Code Quality 🚀\n- Ready to use `SocialButton` Component\n- `Only ONE dependency` is needed\n\n## Installation\n\nAdd the dependency:\n\n```bash\nnpm i react-native-login-screen\n```\n\n## Peer Dependencies\n\n###### IMPORTANT! You need install them.\n\n```bash\nnpm i react-native-text-input-interactive\n```\n\n```\n\"react-native-text-input-interactive\": \"\u003e= 0.1.3\"\n```\n\n## Import\n\n```js\nimport LoginScreen from \"react-native-login-screen\";\n```\n\n# Usage\n\n```tsx\nconst [username, setUsername] = React.useState('');\nconst [password, setPassword] = React.useState('');\n\n\u003cLoginScreen\n  logoImageSource={require('./assets/logo-example.png')}\n  onLoginPress={() =\u003e {}}\n  onSignupPress={() =\u003e {}}\n  onEmailChange={setUsername}\n  onPasswordChange={setPassword}\n  enablePasswordValidation\n/\u003e\n```\n\n## Basic Signup Screen Usage\n\n```tsx\n\u003cLoginScreen\n  logoImageSource={require('./assets/logo-example.png')}\n  onLoginPress={() =\u003e {}}\n  onSignupPress={() =\u003e {}}\n  onEmailChange={setUsername}\n  loginButtonText={'Create an account'}\n  disableSignup\n  textInputChildren={\n    \u003cView style={{marginTop: 16}}\u003e\n      \u003cTextInput\n        placeholder=\"Re-Password\"\n        secureTextEntry\n        onChangeText={setRepassword}\n      /\u003e\n    \u003c/View\u003e\n  }\n  onPasswordChange={setPassword}\n/\u003e\n```\n\n## Usage with Social Button\n\nYou can put any `children` into the LoginScreen, I recommend you to use `SocialButton`.\n\n## Configuration - Props\n\n### Fundamentals\n\n| Property         |   Type   |  Default  | Description                                                   |\n|------------------|:--------:|:---------:|---------------------------------------------------------------|\n| onLoginPress     | function | undefined | set your own function when the `login button` is pressed      |\n| onSignupPress    | function | undefined | set your own function when the `Create an account` is pressed |\n| onEmailChange    | function | undefined | set your own function when `email` textinput has a change     |\n| onPasswordChange | function | undefined | set your own function when `password` textinput has a change  |\n\n### Customizations (Optional)\n\n| Property                |    Type    |       Default       | Description                                             |\n|-------------------------|:----------:|:-------------------:|---------------------------------------------------------|\n| onEyePress              |  function  |      undefined      | set your own function when `eye icon` button is pressed |\n| signupText              |   string   | \"Create an account\" | change the sign up text                                 |\n| disableSignup           |  boolean   |        false        | disable the signup if you do not want to use it         |\n| disableDivider          |  boolean   |        false        | disable the divider if you do not want to use it        |\n| disableSocialButtons    |  boolean   |        false        | disable the all social buttons                          |\n| disablePasswordInput    |  boolean   |        false        | disable the password text input                         |\n| disableEmailValidation  |  boolean   |        false        | disable built-in email validation                       |\n| disableEmailTooltip     |  boolean   |        false        | enable built-in password validation                     |\n| disablePasswordTooltip  |  boolean   |        false        | disable built-in email tooltip                          |\n| disableEmailTooltip     |  boolean   |        false        | disable built-in password tooltip                       |\n| emailPlaceholder        |   string   |       \"Email\"       | change email placeholder text                           |\n| passwordPlaceholder     |   string   |     \"Password\"      | change password placeholder text                        |\n| loginButtonText         |   string   |       \"Login\"       | change login button's text                              |\n| style                   | ViewStyle  |       default       | set/override the default style for the container        |\n| dividerStyle            | ViewStyle  |       default       | set/override the default divider style                  |\n| logoImageStyle          | ImageStyle |       default       | set/override the default image style                    |\n| textInputContainerStyle | ViewStyle  |       default       | set/override the default text input container style     |\n| loginButtonStyle        | ViewStyle  |       default       | set/override the default login button style             |\n| loginTextStyle          | TextStyle  |       default       | set/override the default login text style               |\n| signupStyle             | ViewStyle  |       default       | set/override the default signup button style            |\n| signupTextStyle         | TextStyle  |       default       | set/override the default signup text style              |\n| signupTextStyle         | TextStyle  |       default       | set/override the default signup text style              |\n| passwordContentTooltip  | Component  |       default       | set on your own **tooltip content** for password        |\n| emailContentTooltip     | Component  |       default       | set on your own **tooltip content** for email           |\n\n### Advanced Customizations (Optional)\n\n| Property                 |                                                          Type                                                           |     Default      | Description                                                            |\n|--------------------------|:-----------------------------------------------------------------------------------------------------------------------:|:----------------:|------------------------------------------------------------------------|\n| customTextInputs         |                                                        Component                                                        |     default      | set your own custom text inputs instead of built-in ones               |\n| textInputChildren        |                                                        Component                                                        |     default      | set your own EXTRA custom text inputs with the current ones            |\n| customLogo               |                                                        Component                                                        |     default      | set your own logo                                                      |\n| customLoginButton        |                                                        Component                                                        |     default      | set your login button                                                  |\n| customSignupButton       |                                                        Component                                                        |     default      | set your sign up button                                                |\n| customDivider            |                                                        Component                                                        |     default      | set your divider                                                       |\n| customLoginButton        |                                                        Component                                                        |     default      | set on your own components instead of default **login button**         |\n| customSignupButton       |                                                        Component                                                        |     default      | set on your own components instead of default **signup button**        |\n| TouchableComponent       |                                                        Pressable                                                        | TouchableOpacity | set on your own Touchable Component                                    |\n| customTextInputs         |                                                        Component                                                        |     default      | set on your own **textinputs** instead of default ones                 |\n| customSocialLoginButtons |                                                        Component                                                        |     default      | set on your own components instead of default **social login buttons** |\n| emailTextInputProps      | [IInteractiveTextInputProps](https://github.com/WrathChaos/react-native-text-input-interactive#customization-optionals) |     default      | set/override the email text input props                                |\n| passwordTextInputProps   | [IInteractiveTextInputProps](https://github.com/WrathChaos/react-native-text-input-interactive#customization-optionals) |     default      | set/override the password text input props                             |\n\n\n\n\n### Default Social Login Buttons (Optional)\n\n| Property        |   Type   |  Default  | Description                                                  |\n|-----------------|:--------:|:---------:|--------------------------------------------------------------|\n| onFacebookPress | function | undefined | set your own function for the `Facebook` social button press |\n| onTwitterPress  | function | undefined | set your own function for the `Twitter` social button press  |\n| onApplePress    | function | undefined | set your own function for the `Apple` social button press    |\n| onDiscordPress  | function | undefined | set your own function for the `Discord` social button press  |\n\n# Version 2 is still available\n\nif you do not like the new design, you can still use the old design :)\n\n```bash\nnpm i react-native-login-screen@2.1.4\n```\n\n\u003cp align=\"left\"\u003e\n  \u003cimg alt=\"React Native Login Screen\" src=\"assets/Screenshots/react-native-login-screen-v2.gif\"  height=\"650\" /\u003e\n\u003c/p\u003e\n\n### Roadmap\n\n- [x] ~~LICENSE~~\n- [x] ~~Android Design Bug Fixes~~\n- [x] ~~Configuration - Props COMING SOON~~\n- [x] ~~Typescript Challenge!~~\n- [x] ~~Remove some dependencies~~\n- [x] ~~Better TextField Library Integration~~\n- [x] ~~Password show/hide~~\n- [x] ~~Customizable Components~~\n- [x] ~~Customizable Styles~~\n- [x] ~~Built-in Email Validation~~\n- [x] ~~Built-in Password Validation~~\n- [x] ~~Built-in Email Tooltip~~\n- [x] ~~Built-in Password Tooltip~~\n- [ ] Write an article about the lib on Medium\n- [ ] Write an article about the lib on DevTO\n\n## Credits\n\nFor the awesome photo thanks to [jcob nasyr from Unsplash](https://unsplash.com/photos/67sVPjK6Q7I)\nThank you so much for the eye icon [Torskaya](https://www.flaticon.com/authors/torskaya)\n\n\n## Author\n\nFreakyCoder, kurayogun@gmail.com\n\n## License\n\nReact Native Login Screen is available under the MIT license. See the LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-login-screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwrathchaos%2Freact-native-login-screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-native-login-screen/lists"}