Add the dependency:
npm i react-native-login-screen
"react-native-spinkit": ">= 1.5.0",
"@freakycoder/react-native-helpers": ">= 0.1.3",
"@freakycoder/react-native-material-textfield": ">= 1.0.0"
import LoginScreen from "react-native-login-screen";
<LoginScreen />
Fully Customizable & Ready to Use Login Screen. You can customize anything on the login screen. Check the example :)
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>
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 |
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 |
⚠️ Breaking Change: react-native-helpers
dependency version upgrade ⚠️
Simply install: "@freakycoder/react-native-helpers" : ">= 1.0.0"
Merged pull requests:
Implemented enhancements:
Fixed bugs:
Closed issues:
Implemented enhancements:
Fixed bugs:
Merged pull requests:
Merged pull requests:
Closed issues:
Implemented enhancements:
Fixed bugs:
For the awesome photo thanks to jcob nasyr from Unsplash
FreakyCoder, kurayogun@gmail.com
Author: WrathChaos
Source Code: https://github.com/WrathChaos/react-native-login-screen
#react #react-native #mobile-apps