🥳 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

<LoginScreen
  onLoginPress={() => {}}
  onSignupPress={() => {}}
  onEmailChange={(value: string) => {
    username = value;
    console.log('username: ', username);
  }}
  onPasswordChange={(password: string) => {}}
/>

Basic Signup Screen Usage

<LoginScreen
  logoImageSource={require('./assets/logo-example.png')}
  onLoginPress={() => {}}
  onSignupPress={() => {}}
  onEmailChange={(value: string) => {
    username = value;
    console.log('username: ', username);
  }}
  loginButtonText={'Create an account'}
  disableSignup
  textInputChildren={
    <View style={{marginTop: 16}}>
      <TextInput
        placeholder="Re-Password"
        secureTextEntry
        onChangeText={(value: string) => {}}
      />
    </View>
  }
  onPasswordChange={(password: string) => {}}
/>

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 :)

npm i [email protected]

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

Author

FreakyCoder, [email protected]

License

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