Nancy's Preferred Machete

    react-native-login-screen
    TypeScript icon, indicating that this package has built-in type declarations

    4.2.0 • Public • Published

    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 4

    Version 4 with the completely new UI

    • Whole new UI / UX
    • Simplistic Design
    • Better Code Quality
    • Fully Customizable
    • Ready to use SocialButton Component
    • Removed unstable dependencies
    • 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
      logoImageSource={require("./assets/logo-example.png")}
      onLoginPress={() => {}}
      onSignupPress={() => {}}
      onEmailChange={(email: string) => {}}
      onPasswordChange={(password: string) => {}}
    />

    Usage with Social Button

    Of course you can put any children into the LoginScreen, I recommend you to use SocialButton.

    import LoginScreen, { SocialButton } from "react-native-login-screen";
    
    <LoginScreen
      logoImageSource={require("./assets/logo-example.png")}
      onLoginPress={() => {}}
      onSignupPress={() => {}}
      onEmailChange={(email: string) => {}}
      onPasswordChange={(password: string) => {}}
    >
      <SocialButton text="Continue with Google" onPress={() => {}} />
      <SocialButton
        text="Continue with Facebook"
        imageSource={require("./assets/social/facebook.png")}
        onPress={() => {}}
      />
      <SocialButton
        text="Continue with Twitter"
        imageSource={require("./assets/social/twitter.png")}
        onPress={() => {}}
      />
    </LoginScreen>;

    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
    logoImageSource source undefined set your own logo

    Customizations (Optional)

    Property Type Default Description
    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
    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
    textInputProps IInteractiveTextInputProps default set/override the default textinput 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 react-native-login-screen@2.1.4

    React Native Login Screen

    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
    • [ ] 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, kurayogun@gmail.com

    License

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

    Install

    npm i react-native-login-screen

    DownloadsWeekly Downloads

    168

    Version

    4.2.0

    License

    MIT

    Unpacked Size

    224 kB

    Total Files

    42

    Last publish

    Collaborators

    • freakycoder