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
Add the dependency:
npm i react-native-login-screen
npm i react-native-text-input-interactive
"react-native-text-input-interactive": ">= 0.1.3"
import LoginScreen from "react-native-login-screen";
const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
<LoginScreen
logoImageSource={require('./assets/logo-example.png')}
onLoginPress={() => {}}
onSignupPress={() => {}}
onEmailChange={setUsername}
onPasswordChange={setPassword}
enablePasswordValidation
/>
<LoginScreen
logoImageSource={require('./assets/logo-example.png')}
onLoginPress={() => {}}
onSignupPress={() => {}}
onEmailChange={setUsername}
loginButtonText={'Create an account'}
disableSignup
textInputChildren={
<View style={{marginTop: 16}}>
<TextInput
placeholder="Re-Password"
secureTextEntry
onChangeText={setRepassword}
/>
</View>
}
onPasswordChange={setPassword}
/>
You can put any children
into the LoginScreen, I recommend you to use SocialButton
.
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 |
Property | Type | Default | Description |
---|---|---|---|
onEyePress | function | undefined | set your own function when eye icon button is pressed |
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 |
disableEmailValidation | boolean | false | disable built-in email validation |
disableEmailTooltip | boolean | false | enable built-in password validation |
disablePasswordTooltip | boolean | false | disable built-in email tooltip |
disableEmailTooltip | boolean | false | disable built-in password tooltip |
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 |
signupTextStyle | TextStyle | default | set/override the default signup text style |
passwordContentTooltip | Component | default | set on your own tooltip content for password |
emailContentTooltip | Component | default | set on your own tooltip content for email |
Property | Type | Default | Description |
---|---|---|---|
customTextInputs | Component | default | set your own custom text inputs instead of built-in ones |
textInputChildren | Component | default | set your own EXTRA custom text inputs with the current ones |
customLogo | Component | default | set your own logo |
customLoginButton | Component | default | set your login button |
customSignupButton | Component | default | set your sign up button |
customDivider | Component | default | set your divider |
customLoginButton | Component | default | set on your own components instead of default login button |
customSignupButton | Component | default | set on your own components instead of default signup button |
TouchableComponent | Pressable | TouchableOpacity | set on your own Touchable Component |
customTextInputs | Component | default | set on your own textinputs instead of default ones |
customSocialLoginButtons | Component | default | set on your own components instead of default social login buttons |
emailTextInputProps | IInteractiveTextInputProps | default | set/override the email text input props |
passwordTextInputProps | IInteractiveTextInputProps | default | set/override the password text input props |
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 |
if you do not like the new design, you can still use the old design :)
npm i [email protected]
-
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
For the awesome photo thanks to jcob nasyr from Unsplash Thank you so much for the eye icon Torskaya
FreakyCoder, [email protected]
React Native Login Screen is available under the MIT license. See the LICENSE file for more info.