WrathChaos / react-native-modern-login-screen

Modern login screen with fully customizable options with ready to use components for React Native

Installation

Add the dependency:

npm i react-native-modern-login-screen

Peer Dependencies

Zero Dependency

Usage

Import

import ModernLoginScreen from "react-native-modern-login-screen";

Fundamental Usage

<ModernLoginScreen
    title="Welcome to Noxx"
    description="Create an account to sync all your data and access them from anywhere."
    logoSource={require('./assets/logo-example.png')}
    onEmailPress={() => {}}
    onFacebookPress={() => {}}
    onGooglePress={() => {}}
/>

Custom Usage

 <ModernLoginScreen
    title="Welcome to Noxx"
    description="Create an account to sync all your data and access them from anywhere."
    logoSource={require('./assets/logo-example.png')}
>
    <LoginButton
        text="Continue with Facebook"
        imageSource={require('./assets/facebook.png')}
        onPress={() => {}}
    />
    <LoginButton
        text="Continue with Twitter"
        imageSource={require('./assets/twitter.png')}
        style={{marginTop: 16}}
        onPress={() => {}}
    />
    <MailButton
        text="Continue with Email"
        imageSource={require('./assets/email.png')}
        style={{marginTop: 16}}
        onPress={() => {}}
    />
</ModernLoginScreen>

Example Project 😍

You can checkout the example project 🥰

Simply run

• npm i
• react-native run-ios/android

should work of the example project.

Configuration - Props

Fundamentals

Property	Type	Default	Description
title	string	undefined	change the title
description	string	undefined	change the descrition
logoSource	ImageSourcePropType	undefined	set your own logo

Customization (Optionals)

Property	Type	Default	Description
style	ViewStyle	default	set or override the style object for main container
headerStyle	ViewStyle	default	set or override the style object for header
logoStyle	ViewStyle	default	set or override the style object for logo container
logoImageStyle	ImageStyle	default	set or override the style object for logo image
titleTextStyle	TextStyle	default	set or override the style object for title text
descriptionTextStyle	TextStyle	default	set or override the style object for description text
onFacebookPress	function	default	set the functionality when facebook button is pressed
onGooglePress	function	default	set the functionality when google button is pressed
onEmailPress	function	default	set the functionality when email button is pressed

LoginButton Customization

Property	Type	Default	Description
style	ViewStyle	default	set or override the style object for main container
imageSource	source	undefined	set login button image source
imageStyle	ImageStyle	default	set or override the style object for image
textContainerStyle	ViewStyle	default	set or override the style object for text container
textStyle	ViewStyle	undefined	set or override the style object for button text
descriptionTextStyle	TextStyle	default	set or override the style object for description text
onPress	function	default	set the functionality when button is pressed
TouchableComponent	React.ComponentType	TouchableOpacity	set your own component instead of TouchableOpacity component

MailButton Customization

Property	Type	Default	Description
style	ViewStyle	default	set or override the style object for main container
imageSource	source	undefined	set login button image source
imageStyle	ImageStyle	default	set or override the style object for image
textContainerStyle	ViewStyle	default	set or override the style object for text container
textStyle	ViewStyle	undefined	set or override the style object for button text
descriptionTextStyle	TextStyle	default	set or override the style object for description text
onPress	function	default	set the functionality when button is pressed
TouchableComponent	React.ComponentType	TouchableOpacity	set your own component instead of TouchableOpacity component

Future Plans

• LICENSE
• Write an article about the lib on Medium

Author

FreakyCoder, [e-mail]

License

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