> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/thebergamo/react-native-fbsdk-next/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native FBSDK Next

<div className="relative overflow-hidden bg-gradient-to-br from-[#020627] via-[#0d1229] to-[#020627] py-20">
  <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImdyaWQiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTSAxMCAwIEwgMCAwIDAgMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+')] opacity-40" />

  <div className="relative max-w-7xl mx-auto px-6 sm:px-8 lg:px-12">
    <div className="lg:grid lg:grid-cols-12 lg:gap-12 items-center">
      <div className="lg:col-span-7">
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6">
          Facebook SDK for React Native
        </h1>

        <p className="text-lg sm:text-xl text-gray-300 max-w-2xl mb-8 leading-relaxed">
          Build engaging mobile experiences with Facebook Login, sharing, analytics, and Graph API integration. Works seamlessly on iOS and Android.
        </p>

        <div className="flex flex-wrap gap-4">
          <a href="/quickstart" className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white bg-[#848c8e] rounded-lg hover:bg-[#6f7678] transition-colors">
            Get Started

            <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </a>

          <a href="/introduction" className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white border border-white/30 bg-white/10 hover:bg-white/20 rounded-lg transition-colors">
            View Documentation
          </a>
        </div>
      </div>

      <div className="hidden lg:block lg:col-span-5 mt-12 lg:mt-0">
        <div className="relative">
          <div className="absolute inset-0 bg-gradient-to-r from-[#848c8e] to-[#529c3a] rounded-2xl blur-3xl opacity-20" />

          <div className="relative bg-[#1a1d27] dark:bg-[#1a1d27] border border-[#27272a] dark:border-[#27272a] rounded-2xl p-6 shadow-2xl">
            <div className="flex items-center gap-2 mb-4">
              <div className="w-3 h-3 rounded-full bg-red-500" />

              <div className="w-3 h-3 rounded-full bg-yellow-500" />

              <div className="w-3 h-3 rounded-full bg-green-500" />
            </div>

            <pre className="text-sm text-gray-300 overflow-x-auto">
              <code>
                {`import { LoginButton, AccessToken } from 'react-native-fbsdk-next';

                                <LoginButton
                                onLoginFinished={(error, result) => {
                                  if (result.isCancelled) {
                                    console.log('Login cancelled');
                                  } else {
                                    AccessToken.getCurrentAccessToken()
                                      .then(data => {
                                        console.log(data.accessToken);
                                      });
                                  }
                                }}
                                />`}
              </code>
            </pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="text-center mb-12">
    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Quick Start</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
      Get up and running with Facebook SDK in your React Native app in minutes
    </p>
  </div>

  <Steps>
    <Step title="Install the package">
      Add react-native-fbsdk-next to your project using your preferred package manager.

      <CodeGroup>
        ```bash npm theme={null}
        npm install react-native-fbsdk-next
        ```

        ```bash yarn theme={null}
        yarn add react-native-fbsdk-next
        ```

        ```bash pnpm theme={null}
        pnpm add react-native-fbsdk-next
        ```
      </CodeGroup>

      <Note>
        For iOS, run `cd ios && pod install` to install the native dependencies.
      </Note>
    </Step>

    <Step title="Configure your Facebook App">
      Set up a Facebook App in the [Facebook Developer Portal](https://developers.facebook.com) and configure your iOS and Android platforms with bundle IDs and key hashes.

      Follow the platform-specific setup guides for [iOS](/setup/ios), [Android](/setup/android), or [Expo](/setup/expo).
    </Step>

    <Step title="Initialize the SDK">
      Initialize the Facebook SDK in your app. For iOS 14+, this is required to comply with Apple privacy requirements.

      ```typescript theme={null}
      import { Settings } from 'react-native-fbsdk-next';

      // Initialize SDK as early as possible
      Settings.initializeSDK();
      ```
    </Step>

    <Step title="Add Facebook Login">
      Implement Facebook Login using the LoginButton component or LoginManager for custom UI.

      ```tsx theme={null}
      import { LoginButton, AccessToken } from 'react-native-fbsdk-next';

      <LoginButton
        onLoginFinished={(error, result) => {
          if (error) {
            console.log("Login error: " + error);
          } else if (result.isCancelled) {
            console.log("Login cancelled");
          } else {
            AccessToken.getCurrentAccessToken().then(data => {
              console.log("Access token: " + data.accessToken);
            });
          }
        }}
      />
      ```
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="text-center mb-12">
    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Explore Features</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
      Discover everything you can build with React Native FBSDK Next
    </p>
  </div>

  <CardGroup cols={3}>
    <Card title="Facebook Login" icon="right-to-bracket" href="/features/login">
      Implement secure user authentication with Facebook Login and Limited Login support
    </Card>

    <Card title="Content Sharing" icon="share-nodes" href="/features/sharing">
      Enable users to share photos, videos, and links to Facebook with ShareDialog
    </Card>

    <Card title="App Events" icon="chart-line" href="/features/app-events">
      Track user actions and conversions with Facebook Analytics
    </Card>

    <Card title="Graph API" icon="code" href="/concepts/graph-api">
      Access Facebook data and perform operations using the Graph API
    </Card>

    <Card title="User Profiles" icon="user" href="/features/profiles">
      Retrieve and manage user profile information
    </Card>

    <Card title="Game Requests" icon="gamepad" href="/features/game-requests">
      Send game invitations and requests to Facebook friends
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="text-center mb-12">
    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Platform Setup</h2>

    <p className="text-base text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
      Configure the SDK for your target platform
    </p>
  </div>

  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
    <a href="/setup/ios" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#848c8e] dark:hover:border-[#848c8e] overflow-hidden no-underline transition-colors">
      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <div className="flex items-center gap-3 mb-3">
          <div className="w-10 h-10 rounded-lg bg-gray-100 dark:bg-[#242838] flex items-center justify-center">
            <svg className="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 24 24">
              <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
            </svg>
          </div>

          <h3 className="text-base font-semibold text-gray-900 dark:text-white">iOS Setup</h3>
        </div>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Configure Facebook SDK for iOS apps with Objective-C or Swift
        </p>

        <div className="flex items-center text-sm font-medium text-[#848c8e] group-hover:text-[#6f7678]">
          View guide

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/setup/android" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#848c8e] dark:hover:border-[#848c8e] overflow-hidden no-underline transition-colors">
      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <div className="flex items-center gap-3 mb-3">
          <div className="w-10 h-10 rounded-lg bg-gray-100 dark:bg-[#242838] flex items-center justify-center">
            <svg className="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 24 24">
              <path d="M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85-.29-.15-.65-.06-.83.22l-1.88 3.24a11.5 11.5 0 0 0-8.94 0L5.65 5.67c-.19-.28-.54-.37-.83-.22-.3.16-.42.54-.26.85l1.84 3.18C4.8 11.16 3.5 13.8 3.5 16.5h17c0-2.7-1.3-5.34-2.9-7.02zM7 14.5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm10 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z" />
            </svg>
          </div>

          <h3 className="text-base font-semibold text-gray-900 dark:text-white">Android Setup</h3>
        </div>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Configure Facebook SDK for Android apps with Gradle and AndroidManifest
        </p>

        <div className="flex items-center text-sm font-medium text-[#848c8e] group-hover:text-[#6f7678]">
          View guide

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/setup/expo" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#848c8e] dark:hover:border-[#848c8e] overflow-hidden no-underline transition-colors">
      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <div className="flex items-center gap-3 mb-3">
          <div className="w-10 h-10 rounded-lg bg-gray-100 dark:bg-[#242838] flex items-center justify-center">
            <svg className="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 24 24">
              <path d="M0 20.085c.07.382.152.765.259 1.147h23.482c.107-.382.189-.765.259-1.147H0zM1.935 23.022c.189.34.397.658.632.978h18.866c.235-.32.443-.638.632-.978H1.935zM23.777 17.5c-.014-.234-.035-.468-.062-.702H.285c-.027.234-.048.468-.062.702h23.554z" />

              <path d="M17.43 8.28l-3.168 5.553-1.786-3.126a.582.582 0 00-.506-.294.582.582 0 00-.506.294l-4.954 8.669h19.38c.055-.234.103-.47.144-.707L17.43 8.28zm-5.46 9.469c-.382 0-.692-.31-.692-.692s.31-.692.692-.692.692.31.692.692-.31.692-.692.692z" />
            </svg>
          </div>

          <h3 className="text-base font-semibold text-gray-900 dark:text-white">Expo Setup</h3>
        </div>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Use the config plugin for Expo managed workflow apps
        </p>

        <div className="flex items-center text-sm font-medium text-[#848c8e] group-hover:text-[#6f7678]">
          View guide

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="rounded-2xl bg-gradient-to-r from-[#848c8e] to-[#6f7678] p-8 text-center">
    <h2 className="text-2xl sm:text-3xl font-bold text-white mb-4">
      Ready to integrate Facebook?
    </h2>

    <p className="text-lg text-white/90 mb-6 max-w-2xl mx-auto">
      Start building engaging social experiences with Facebook Login, sharing, and analytics
    </p>

    <a href="/quickstart" className="inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-[#848c8e] bg-white hover:bg-gray-100 rounded-lg transition-colors">
      Start Building

      <svg className="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
      </svg>
    </a>
  </div>
</div>
