react-native-login-screen v5.0.0

🥳 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

Customizations (Optional)

Advanced Customizations (Optional)

Default Social Login Buttons (Optional)

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

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

Author

FreakyCoder, kurayogun@gmail.com

License

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