1.0.4 • Published 1 year ago

rn-facebook-login-firebase-ql v1.0.4

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

RN-FACEBOOK-LOGIN-FIREBASE-QL

  • This npm page contains the steps for facebook login using firebase
  • Version:
    1. "@react-native-firebase/app": "^16.4.3",
    2. "@react-native-firebase/auth": "^16.4.3",
    3. "@react-native-google-signin/google-signin": "^8.2.1",
    4. "react": "18.1.0",
    5. "react-native": "0.70.5",
    6. "react-native-fbsdk": "^3.0.0"

How do I get set up?

  • First create a react native project using react-native init facebook_login, then create firebase project.
  • Create an app in firebase project settings.
  • Add firebase to project both android and ios
  • Install all the dependencies mensioned inside the version
  • Modify your pod file as described below
  • Run your app using "npm run android" for Android, and "npm run ios" for IOS.

Steps for React Native google login in Android:

  1. Create Firebase app for Android
  2. Add SHA1 and SHA2 key in firebase console by running keytool -keystore ~/QL/auth/android/app/debug.keystore -list -v
  3. Add google-services.json file inside andriod/app

Steps for React Native google login in IOS

  1. Create firebase app for ios
  2. Add following lines in Podfile located inside ios folder
    1. $RNFirebaseAsStaticFramewor = true at top of the file
    2. use_frameworks! :linkage => :static at top of the file
  3. After installing above dependencies do pod install inside ios folder
  4. Add GoogleService-Info.plist inside ./ios/project_name using xcode by right clicking on project name folder then add file.

Usage:

Import the package

import FacebookSignIn from 'rn-facebook-login-firebase-ql';

Then call the component

<FacebookSignIn
    title="Facebook Sign In"
    btnColor="#fff"
    titleColor="#000"
    fontSize={16}
    rippleColor="#dcdcdc"
/>

To customize the button component

<FacebookSignIn
    title="Facebook Sign In"
    btnColor="#fff"
    titleColor="#000"
    fontSize={16}
    rippleColor="#dcdcdc"
    btnComponent={
      <View style={styles.btnContainer}>
        <Text style={{fontSize: 26, color: "blue"}}>F</Text>
        <Text style={{fontSize: 16, color: "#000"}}>Facebook Sign In</Text>
        <Text/>
      </View>
    }
  />

For more information look into github

git clone https://ankitj1996@bitbucket.org/sunychoudhary/auth-facebook-rn.git