react-native-login-screen

    2.1.4 • 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 React Native Login Screen

    Installation

    Add the dependency:

    npm i react-native-login-screen

    Peer Dependencies

    IMPORTANT! You need install them.
    "react-native-spinkit": ">= 1.5.0",
    "@freakycoder/react-native-helpers": ">= 0.1.3",
    "@freakycoder/react-native-material-textfield": ">= 1.0.0"

    Import

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

    Usage

    😍 One Line Code to Get The Whole Login Screen 🎉

    <LoginScreen />

    Customizable Advanced Usage

    Fully Customizable & Ready to Use Login Screen. You can customize anything on the login screen. Check the example :)

    Advanced Usage with Custom Children

    Pretty advanced and fully customizable example of login screen

    <LoginScreen
      spinnerEnable
      spinnerVisibility={spinnerVisibility}
      labelTextStyle={{
        color: "#adadad",
        fontFamily: "Now-Bold",
      }}
      logoTextStyle={{
        fontSize: 27,
        color: "#fdfdfd",
        fontFamily: "Now-Black",
      }}
      loginButtonTextStyle={{
        color: "#fdfdfd",
        fontFamily: "Now-Bold",
      }}
      textStyle={{
        color: "#757575",
        fontFamily: "Now-Regular",
      }}
      signupStyle={{
        color: "#fdfdfd",
        fontFamily: "Now-Bold",
      }}
      usernameOnChangeText={(username) => console.log("Username: ", username)}
      onPressSettings={() => alert("Settings Button is pressed")}
      passwordOnChangeText={(password) => console.log("Password: ", password)}
      onPressLogin={() => {
        setSpinnerVisibility(true);
        setTimeout(() => {
          setSpinnerVisibility(false);
        }, 2000);
      }}
      onPressSignup={() => {
        console.log("onPressSignUp is pressed");
      }}
    >
      <View
        style={{
          position: "relative",
          alignSelf: "center",
          marginTop: 64,
        }}
      >
        <Text style={{ color: "white", fontSize: 30 }}>
          Inside Login Screen Component
        </Text>
      </View>
    </LoginScreen>

    Configuration - Props

    Fundamentals

    Property Type Default Description
    source local/uri unsplash image change the background image with local or uri prop
    onPressLogin function undefined set your own functional logic for login button is pressed
    onPressSettings function undefined set your own functional logic for settings button is pressed
    usernameOnChangeText function undefined set your own functional logic for username onChange value
    passwordOnChangeText function undefined set your own functional logic for password onChange value
    loginButtonBackgroundColor color #282828 change the login button's background color
    loginText string LOGIN change the login button's text
    loginButtonTextStyle style default set your own style for the login button's text style
    logoComponent component Icon set your own logo component instead of default Icon
    spinnerEnable bool false set the spinner enable this is required to use spinner
    spinnerVisibility bool false set the logic for spinner enabling / disabling for the login text button
    spinnerColor color #fdfdfd change the spinner color
    spinnerSize number 30 change the spinner size
    spinnerType bool false change the spinner type
    spinnerStyle bool false set your own style for the spinner itself

    Bottom Container Props

    Property Type Default Description
    placeholder string default set the placeholder of the text input with both title and placeholder itself
    backgroundColor color rgba(255,255,255,0.45) change the bottom container's background color
    disableSettings boolean false disable the settings button if you do not want it
    disableSignupButton boolean false disable the signup button if you do not want it
    usernameIconComponent component default set any component instead of username icon component
    passwordIconComponent component default set any component instead of password icon component
    settingsIconComponent component default set any component instead of settings icon component
    usernameTextInputValue value default set username's text input value
    passwordTextInputValue value default set password's text input value
    usernamePlaceholder string Username change the username text input's placeholder
    passwordPlaceholder string Password change the password text input's placeholder
    usernameTitle string Username change the username title
    passwordTitle string Password change the password title

    Changelog

    2.1.2 (2020-11-02)

    ⚠️ Breaking Change: react-native-helpers dependency version upgrade ⚠️

    Simply install: "@freakycoder/react-native-helpers" : ">= 1.0.0"

    Full Changelog

    Merged pull requests:

    2.1.1 (2020-10-02)

    Full Changelog

    Implemented enhancements:

    • Support custom props for TextInput #9

    Fixed bugs:

    • TypeError: undefined is not an object (evaluating '_reactNative.Animated.Text.propTypes.style') #17
    • onPressSignup breaks the card swap functionality #13

    Closed issues:

    • Icons don't show up #18

    2.0.3 (2020-09-20)

    Full Changelog

    2.0.0 (2020-09-20)

    Full Changelog

    2.0.2 (2020-09-20)

    Full Changelog

    Implemented enhancements:

    • Couple of Ideas by leitooop #6

    Fixed bugs:

    • Login button too down on Android #7

    Merged pull requests:

    1.0.0 (2020-06-07)

    Full Changelog

    Merged pull requests:

    0.3.7 (2020-02-26)

    Full Changelog

    Closed issues:

    • Issue with '@expo/vector-icons/Fontisto' #3

    0.3.6 (2020-01-31)

    Full Changelog

    Implemented enhancements:

    • More Customizable Props #2

    Fixed bugs:

    • Get an error about font family "Monterrat-black" not being found #1

    0.3.5 (2020-01-26)

    Full Changelog

    0.3.4 (2020-01-24)

    Full Changelog

    0.3.3 (2020-01-23)

    Full Changelog

    0.3.2 (2020-01-09)

    Full Changelog

    0.3.1 (2020-01-09)

    Full Changelog

    0.3.0 (2020-01-09)

    Full Changelog

    0.2.5 (2019-12-16)

    Full Changelog

    0.2.4 (2019-12-15)

    Full Changelog

    0.2.2 (2019-12-15)

    Full Changelog

    0.2.1 (2019-12-12)

    Full Changelog

    0.2.0 (2019-12-09)

    Full Changelog

    0.1.12 (2019-12-05)

    Full Changelog

    0.1.11 (2019-09-29)

    Full Changelog

    * This Changelog was automatically generated by github_changelog_generator

    Roadmap

    • [x] LICENSE
    • [x] Android Design Bug Fixes
    • [x] Configuration - Props COMING SOON
    • [x] Typescript Challenge!
    • [x] Remove some dependencies
    • [ ] ImageComponent Feature Option
    • [ ] Better TextField Library Integration
    • [ ] Animation Feature for Changing Login/SignUp
    • [ ] Write an article about the lib on Medium

    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

    125

    Version

    2.1.4

    License

    MIT

    Unpacked Size

    96.6 kB

    Total Files

    40

    Last publish

    Collaborators

    • freakycoder