Skip to content

WrathChaos/react-native-login-screen

Repository files navigation

React Native Login Screen

Battle Tested βœ…

One Line of Code to Plug & Play | Fully Customizable Beautiful React Native Login Screen

npm version npm Platform - Android and iOS License: MIT

React Native Login Screen

πŸ₯³ 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:

npm i react-native-login-screen

Peer Dependencies

IMPORTANT! You need install them.
npm i react-native-text-input-interactive
"react-native-text-input-interactive": ">= 0.1.3"

Import

import LoginScreen from "react-native-login-screen";

Usage

const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');

<LoginScreen
  logoImageSource={require('./assets/logo-example.png')}
  onLoginPress={() => {}}
  onSignupPress={() => {}}
  onEmailChange={setUsername}
  onPasswordChange={setPassword}
  enablePasswordValidation
/>

Basic Signup Screen Usage

<LoginScreen
  logoImageSource={require('./assets/logo-example.png')}
  onLoginPress={() => {}}
  onSignupPress={() => {}}
  onEmailChange={setUsername}
  loginButtonText={'Create an account'}
  disableSignup
  textInputChildren={
    <View style={{marginTop: 16}}>
      <TextInput
        placeholder="Re-Password"
        secureTextEntry
        onChangeText={setRepassword}
      />
    </View>
  }
  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 default set/override the email text input props
passwordTextInputProps IInteractiveTextInputProps 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 :)

React Native Login Screen

Roadmap

  • LICENSE
  • Android Design Bug Fixes
  • Configuration - Props COMING SOON
  • Typescript Challenge!
  • Remove some dependencies
  • Better TextField Library Integration
  • Password show/hide
  • Customizable Components
  • Customizable Styles
  • Built-in Email Validation
  • Built-in Password Validation
  • Built-in Email Tooltip
  • 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 Thank you so much for the eye icon Torskaya

Author

FreakyCoder, [email protected]

License

React Native Login Screen is available under the MIT license. See the LICENSE file for more info.