{"id":11771,"library":"react-native-fbsdk-next","title":"React Native Facebook SDK Next","description":"react-native-fbsdk-next is a community-maintained fork providing Facebook SDK integration for React Native applications. It wraps the native iOS and Android Facebook SDKs, exposing their functionalities entirely through documented JavaScript modules, eliminating the need for direct native code interaction. The package aims to continue support and upgrades after Facebook ceased official maintenance of the original `react-native-fbsdk`. Currently at version 13.4.3, it receives frequent updates to align with the latest native Facebook SDK versions and React Native ecosystem changes. It differentiates itself by its active community support, cross-platform compatibility from a single package, and continuous integration of new features and bug fixes from upstream Facebook SDKs.","status":"active","version":"13.4.3","language":"javascript","source_language":"en","source_url":"https://github.com/thebergamo/react-native-fbsdk-next","tags":["javascript","react","react-native","react-component","ios","android","facebook","core","typescript"],"install":[{"cmd":"npm install react-native-fbsdk-next","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-fbsdk-next","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-fbsdk-next","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Expo Go and managed workflow compatibility, especially for config plugins, supporting Expo SDK 47 and higher.","package":"expo","optional":true},{"reason":"Core dependency for any React Native application; specific versions (>=0.63.3) are required for compatibility with native Facebook SDKs and modern Xcode versions.","package":"react-native","optional":false}],"imports":[{"note":"Use named imports with ES Modules for modern React Native projects. CommonJS 'require' syntax is generally discouraged and may not work with tree-shaking.","wrong":"const LoginManager = require('react-native-fbsdk-next').LoginManager;","symbol":"LoginManager","correct":"import { LoginManager } from 'react-native-fbsdk-next';"},{"note":"Ensure you import named exports from the top-level package. Direct imports from internal paths like `/js/` are brittle and not officially supported.","wrong":"import AccessToken from 'react-native-fbsdk-next/js/AccessToken';","symbol":"AccessToken","correct":"import { AccessToken } from 'react-native-fbsdk-next';"},{"note":"Modern React Native development largely relies on ES Modules. While CommonJS might technically work in some environments, it's best to use `import` statements.","wrong":"const { AppEventsLogger } = require('react-native-fbsdk-next');","symbol":"AppEventsLogger","correct":"import { AppEventsLogger } from 'react-native-fbsdk-next';"},{"note":"The `Settings` module is crucial for initializing the Facebook SDK, particularly for managing app ID and client token, or enabling/disabling automatic event logging.","symbol":"Settings","correct":"import { Settings } from 'react-native-fbsdk-next';"}],"quickstart":{"code":"import { LoginManager, AccessToken, AppEventsLogger, Settings } from 'react-native-fbsdk-next';\nimport React, { useEffect, useState } from 'react';\nimport { View, Text, Button, Alert, StyleSheet } from 'react-native';\n\nconst App: React.FC = () => {\n  const [loggedIn, setLoggedIn] = useState(false);\n  const [userName, setUserName] = useState<string | null>(null);\n\n  useEffect(() => {\n    // It's good practice to explicitly initialize the SDK.\n    // Ensure your app ID and client token are set in Info.plist (iOS) / AndroidManifest.xml (Android).\n    Settings.initializeSDK();\n\n    AccessToken.getCurrentAccessToken().then((data) => {\n      if (data) {\n        setLoggedIn(true);\n        console.log('User already logged in:', data.accessToken);\n        AppEventsLogger.logEvent('AppStartedWithExistingLogin');\n      } else {\n        setLoggedIn(false);\n        console.log('No existing Facebook access token.');\n      }\n    });\n  }, []);\n\n  const fbLogin = async () => {\n    try {\n      AppEventsLogger.logEvent('LoginButtonPressed');\n      const result = await LoginManager.logInWithPermissions(['public_profile', 'email']);\n      if (result.isCancelled) {\n        Alert.alert('Login cancelled');\n        console.log('Login cancelled');\n      } else {\n        Alert.alert('Login success with permissions: ' + result.grantedPermissions?.toString());\n        console.log('Login success result: ', result);\n        const data = await AccessToken.getCurrentAccessToken();\n        if (data) {\n          setLoggedIn(true);\n          console.log('Access Token:', data.accessToken);\n          AppEventsLogger.logEvent('FacebookLoginSuccess');\n        } else {\n          Alert.alert('Failed to get access token after login.');\n          console.log('Failed to get access token after login.');\n        }\n      }\n    } catch (error: any) {\n      Alert.alert('Login error: ' + error.message);\n      console.error('Login failed with error: ', error);\n    }\n  };\n\n  const fbLogout = () => {\n    LoginManager.logOut();\n    setLoggedIn(false);\n    setUserName(null);\n    AppEventsLogger.logEvent('FacebookLogout');\n    Alert.alert('Logged out from Facebook');\n  };\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>Facebook SDK Integration Example</Text>\n      {loggedIn ? (\n        <>\n          <Text style={styles.statusText}>You are logged in to Facebook!</Text>\n          <Button title=\"Logout from Facebook\" onPress={fbLogout} />\n        </>\n      ) : (\n        <Button title=\"Login with Facebook\" onPress={fbLogin} />\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 20,\n  },\n  title: {\n    fontSize: 20,\n    marginBottom: 20,\n    textAlign: 'center',\n  },\n  statusText: {\n    marginBottom: 10,\n    fontSize: 16,\n  },\n});\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates the installation of the React Native Facebook SDK, initialization using `Settings.initializeSDK()`, checking for an existing access token, and implementing Facebook login and logout functionality using `LoginManager` and `AccessToken`. It also includes basic event logging with `AppEventsLogger`."},"warnings":[{"fix":"Ensure your Android implementation complies with Meta's Integrity Policies. Upgrade Cocoapods to version 1.12 or newer for iOS projects. Review your iOS login flows against the latest Facebook SDK documentation and privacy manifest requirements.","message":"Version 13.0.0 introduced significant breaking changes. Android applications may experience issues due to upstream Facebook SDK changes related to integrity policy enforcement, potentially blocking traffic for policy-violating apps. Additionally, Cocoapods version >= 1.12 is now a strict requirement for iOS due to the adoption of privacy manifests, and iOS login/limited login functionality has changed, requiring review of the Facebook Developer blog post from March 28, 2024.","severity":"breaking","affected_versions":">=13.0.0"},{"fix":"Always align your `react-native` version with the recommendations in the `react-native-fbsdk-next` compatibility matrix to ensure stability and receive ongoing support. Update `react-native` to at least 0.63.3.","message":"The library has specific React Native version compatibility. Versions of `react-native-fbsdk-next` after 4.2.0 officially support React Native versions `>=0.63.3`. While older RN versions might technically work, they are not supported, and future updates may introduce breaking changes without strict adherence to semantic versioning for these unsupported older environments.","severity":"gotcha","affected_versions":">=4.2.0"},{"fix":"Upgrade `react-native-fbsdk-next` to version 13.4.1 or newer. If upgrading is not immediately possible, you may need to manually resolve manifest merge conflicts in your `AndroidManifest.xml`.","message":"When integrating with Facebook Android SDK v18, there can be an `AD_SERVICES_CONFIG` manifest merge collision. This was addressed in `react-native-fbsdk-next` v13.4.1 but could still affect projects using older versions or specific build configurations.","severity":"gotcha","affected_versions":">=13.0.0 <13.4.1"},{"fix":"Ensure your development environment uses Node.js version 18 or higher. You can manage Node.js versions using tools like `nvm` or `volta`.","message":"The package requires Node.js version >=18. Using older Node.js versions may lead to build errors or unexpected behavior during installation and development.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `pod install --repo-update` in your `ios/` directory. Ensure your Cocoapods version is 1.12 or higher. Update your `Podfile` if necessary to explicitly specify `platform :ios, '13.0'` or higher.","cause":"Your Cocoapods version is too old, or there's a version mismatch with the native Facebook iOS SDK requirements.","error":"Cocoapods could not find compatible versions for pod 'react-native-fbsdk-next'"},{"fix":"For React Native 0.60+, ensure autolinking is working correctly. Run `npx react-native link react-native-fbsdk-next` if needed, then `cd ios && pod install`, and rebuild your project. Double-check `AndroidManifest.xml` and `Info.plist` for correct SDK configuration.","cause":"Native modules not correctly linked, either due to autolinking failure or manual linking errors.","error":"Error: RNFBDK (or similar native module name) doesn't exist. Are you sure you've linked all the native dependencies and set up your project correctly?"},{"fix":"Add `tools:replace=\"android:appComponentFactory\"` inside the `<application>` tag in your `android/app/src/main/AndroidManifest.xml` file. Ensure you also add `xmlns:tools=\"http://schemas.android.com/tools\"` to your root manifest tag.","cause":"Conflicting `appComponentFactory` declarations in your Android manifest, often when integrating multiple libraries that target newer Android features.","error":"Manifest merger failed : Attribute application@appComponentFactory value=(...) from [...] AndroidManifest.xml:23:18-86 is also present at [...] AndroidManifest.xml:24:18-86 value=(...). Suggestion: add 'tools:replace=\"android:appComponentFactory\"' to <application> element at AndroidManifest.xml:22:5-24:19 to override."},{"fix":"Verify that you have correctly completed all installation steps, including `cd ios && pod install` and rebuilding both iOS and Android projects. Confirm that the app ID and client token are correctly configured in your native project files (Info.plist, AndroidManifest.xml).","cause":"The `LoginManager` (or other module) is `undefined` at runtime, indicating the native module was not properly initialized or linked, or the JavaScript bridge failed.","error":"Cannot read property 'logInWithPermissions' of undefined"}],"ecosystem":"npm"}