![React Native Social Login Screen](assets/logo.png)
![Easy Login Screen with beautiful design and fully customizable options for React Native](https://camo.githubusercontent.com/ffc62e8fc270934aec41d88b19a9cc8c7a8e0afeae88666493d65d6a9abc702a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d456173792532304c6f67696e25323053637265656e2532307769746825323062656175746966756c25323064657369676e253230616e6425323066756c6c79253230637573746f6d697a61626c652532306f7074696f6e73253230666f7225323052656163742532304e61746976652d6f72616e67653f7374796c653d666f722d7468652d6261646765)
![styled with prettier](https://camo.githubusercontent.com/f7d69435616e9ab819802901271bce92e1ac6b4eb7ab6ab2e90936e0f40ecb44/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7374796c65645f776974682d70726574746965722d6666363962342e7376673f7374796c653d666f722d7468652d6261646765)
Add the dependency:
npm i react-native-social-login-screen
IMPORTANT! You need install them
"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...
FreakyCoder, [email protected]
React Native Social Login Screen is available under the MIT license. See the LICENSE file for more info.