rn-logscreen

🥳 Version 3

Version 3 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={() => {}}
  onHaveAccountPress={() => {}}
  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={() => {}}
  onHaveAccountPress={() => {}}
  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
onHaveAccountPress	function	undefined	set your own function when the have an account button 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
haveAccountText	string	"Already have an account?"	change the have account text
disableDivider	boolean	false	disable the divider if you do not want to use it
disableSocialButtons	boolean	false	disable the all social buttons
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
haveAccountButtonStyle	ViewStyle	default	set/override the default have account button style
haveAccountTextStyle	TextStyle	default	set/override the default have account text style

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

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, [e-mail]

License

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