Easy Login Screen with beautiful design and fully customizable options for React Native
Add the dependency:
npm i react-native-social-login-screen
"react-native-androw": ">= 0.0.34"
"react-native-spinkit": "^1.5.1"
import SocialLoginScreen from "react-native-social-login-screen";
<SocialLoginScreen
onSignUpPress={() => {}}
onLoginPress={() => {}}
onForgotPasswordPress={() => {}}
onUserNameChangeText={(username) => console.log("Username: ", username)}
onPasswordChangeText={(password) => console.log("Password: ", password)}
rightTopAssetImageSource={require("./assets/ramen.png")}
leftBottomAssetImageSource={require("./assets/chef.png")}
/>
<SocialLoginScreen
onUserNameChangeText={(username) => console.log("Username: ", username)}
onPasswordChangeText={(password) => console.log("Password: ", password)}
onSignUpPress={() => {}}
onLoginPress={() => {}}
onForgotPasswordPress={() => {}}
enableFacebookLogin
onFacebookLoginPress={() => {}}
enableDiscordLogin
onDiscordLoginPress={() => {}}
enableTwitterLogin
onTwitterLoginPress={() => {}}
enableGoogleLogin
onGoogleLoginPress={() => {}}
rightTopAssetImageSource={require("./assets/ramen.png")}
leftBottomAssetImageSource={require("./assets/chef.png")}
signUpTextStyle={{
fontFamily: "Sansita-Regular",
}}
loginTextStyle={{
fontFamily: "Athelas-Bold",
}}
forgotPasswordTextStyle={{
fontFamily: "Sansita-Bold",
}}
/>
Property | Type | Default | Description |
---|---|---|---|
onLoginPress | function | undefined | fundamental onLoginPress functionality for your own logic |
onSignUpPress | function | undefined | handle sign-up button is pressed |
onForgotPasswordPress | function | undefined | handle forgot password button is pressed |
onRepasswordChangeText | function | undefined | handle re-password button is pressed |
rightTopAssetImageSource | image-source | undefined | set the right top aligned asset with your own image source |
leftBottomAssetImageSource | image-source | undefined | set the left bottom aligned asset with your own image source |
backArrowImageSource | image-source | default | set the sign-up button's back button asset with your own image source |
usernamePlaceholder | string | "[email protected]" | change the username TextField's placeholder |
passwordPlaceholder | string | "• • • • • • • •" | change the password TextField's placeholder |
onUserNameChangeText | function | undefined | handle username TextField's onChangeText |
onPasswordChangeText | function | undefined | handle password TextField's onChangeText |
Property | Type | Default | Description |
---|---|---|---|
loginText | string | "Let's cook!" | change the login button's text |
signUpText | string | "Sign Up" | change the sign up button's text |
loginTitleText | string | "Log In" | change the login title's text |
forgotPasswordText | string | "Forgot Password?" | change the forgot password button's text |
enableFacebookLogin | boolean | false | enable the Facebook login button |
enableTwitterLogin | boolean | false | enable the Twitter login button |
enableGoogleLogin | boolean | false | enable the Google login button |
enableDiscordLogin | boolean | false | enable the Discord login button |
enableAppleLogin | boolean | false | enable the Apple login button |
onFacebookLoginPress | function | undefined | handle Facebook login button is pressed |
onTwitterLoginPress | function | undefined | handle Twitter login button is pressed |
onGoogleLoginPress | function | undefined | handle Google login button is pressed |
onDiscordLoginPress | function | undefined | handle Discord login button is pressed |
onAppleLoginPress | function | undefined | handle Apple login button is pressed |
appleSpinnerColor | color | #fff | handle Apple login button's spinner color |
appleSpinnerVisibility | boolean | false | handle Apple login button's spinner visibility |
Property | Type | Default | Description |
---|---|---|---|
loginTextStyle | style | default | change or override the default styling for login text |
signUpTextStyle | style | default | change or override the default styling for sign-up text |
forgotPasswordTextStyle | style | default | change or override the default styling for forgot password text |
loginButtonShadowColor | style | default | change the default shadow color for login button |
loginButtonBackgroundColor | style | #69bc4c | change the default background color for login button |
usernameTextFieldStyle | style | default | change or override the default styling for username TextField |
passwordTextFieldStyle | style | default | change or override the default styling for password TextField |
disableSignUp | boolean | false | disable the sign up header if you only want to login screen |
disableForgotButton | boolean | false | disable the forgot button |
More customization is in coming...
SocialButton
instead of default onesFreakyCoder, [email protected]
React Native Social Login Screen is available under the MIT license. See the LICENSE file for more info.