Alright, let's tackle integrating Facebook Ads into your React Native app for both iOS and Android, with that slick flip-card style similar to Myntra. I'll break this down step by step so you can get it up and running smoothly:

First, we'll need the official Facebook Ads package for React Native, plus a flip-card component to replicate that Myntra-style interaction:

• Install the Facebook Ads library:

  npm install react-native-facebook-ads --save
  # Or use yarn: yarn add react-native-facebook-ads
  

• Install the flip-card component:

  npm install react-native-flip-card --save
  # Or yarn add react-native-flip-card
  

iOS Setup #

1. Open your project's Info.plist file and add your Facebook App ID and display name:

   <key>FacebookAppID</key>
   <string>YOUR_FACEBOOK_APP_ID</string>
   <key>FacebookDisplayName</key>
   <string>YOUR_APP_PUBLIC_NAME</string>
   

2. Add URL schemes to support Facebook interactions:

   <key>LSApplicationQueriesSchemes</key>
   <array>
     <string>fbapi</string>
     <string>fb-messenger-share-api</string>
     <string>fbauth2</string>
     <string>fbshareextension</string>
   </array>
   

3. Navigate to your ios directory and run:

   pod install
   

Android Setup #

1. Open android/app/src/main/AndroidManifest.xml and add this inside the <application> tag:

   <meta-data
     android:name="com.facebook.sdk.ApplicationId"
     android:value="@string/facebook_app_id"/>
   

2. Create or edit android/app/src/main/res/values/strings.xml to include your App ID:

   <string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
   

3. Double-check your project-level build.gradle includes mavenCentral() in the repositories block (it should be there by default for modern React Native projects).

This component mimics Myntra's flip-style ad: a teaser front that flips to reveal a Facebook native ad when tapped. Here's the full implementation:

import React, { useState } from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import FlipCard from 'react-native-flip-card';
import { NativeAd, NativeAdMedia, AdIcon, AdTitle, AdBody, AdCallToAction } from 'react-native-facebook-ads';

const MyntraStyleFlipAd = () => {
  const [isFlipped, setIsFlipped] = useState(false);

  return (
    <FlipCard
      style={styles.cardWrapper}
      flipHorizontal={true}
      flip={isFlipped}
      onFlipEnd={(status) => setIsFlipped(status)}
    >
      {/* Front of the card - app teaser content */}
      <TouchableOpacity 
        style={styles.cardFace} 
        onPress={() => setIsFlipped(!isFlipped)}
      >
        <Text style={styles.teaserText}>👀 Swipe to unlock exclusive offers!</Text>
      </TouchableOpacity>

      {/* Back of the card - Facebook Native Ad */}
      <NativeAd
        placementId="YOUR_AD_PLACEMENT_ID" // Replace with your Facebook placement ID
        onAdLoaded={() => console.log('Ad loaded successfully!')}
        onAdFailedToLoad={(error) => console.error('Ad load failed:', error)}
      >
        <View style={styles.adContainer}>
          <AdIcon style={styles.adIcon} />
          <View style={styles.adTextContainer}>
            <AdTitle style={styles.adTitle} />
            <AdBody style={styles.adDescription} />
            <AdCallToAction style={styles.ctaButton} />
          </View>
          <NativeAdMedia style={styles.adMedia} />
        </View>
      </NativeAd>
    </FlipCard>
  );
};

const styles = StyleSheet.create({
  cardWrapper: {
    width: '92%',
    height: 220,
    marginVertical: 15,
    alignSelf: 'center',
    borderRadius: 12,
    overflow: 'hidden',
  },
  cardFace: {
    flex: 1,
    backgroundColor: '#f8f9fa',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 3 },
    shadowOpacity: 0.15,
    shadowRadius: 6,
    elevation: 4,
  },
  teaserText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#2d3748',
    textAlign: 'center',
    paddingHorizontal: 20,
  },
  adContainer: {
    flex: 1,
    flexDirection: 'row',
    padding: 12,
    backgroundColor: '#fff',
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 3 },
    shadowOpacity: 0.15,
    shadowRadius: 6,
    elevation: 4,
  },
  adIcon: {
    width: 55,
    height: 55,
    borderRadius: 8,
    marginRight: 10,
  },
  adTextContainer: {
    flex: 2,
    justifyContent: 'space-around',
  },
  adTitle: {
    fontSize: 14,
    fontWeight: 'bold',
    color: '#1a202c',
  },
  adDescription: {
    fontSize: 12,
    color: '#718096',
    lineHeight: 16,
  },
  ctaButton: {
    backgroundColor: '#4267B2',
    color: '#fff',
    paddingVertical: 4,
    paddingHorizontal: 10,
    borderRadius: 4,
    fontSize: 12,
    alignSelf: 'flex-start',
  },
  adMedia: {
    flex: 1,
    borderRadius: 8,
    overflow: 'hidden',
  },
});

export default MyntraStyleFlipAd;

• Drop the MyntraStyleFlipAd component into high-traffic areas of your app (like the home screen or product list pages) to maximize visibility without disrupting user experience.
• To promote your app on Facebook:
  1. Head to Facebook Ads Manager and create an App Installs campaign.
  2. Select your app, define your target audience, set a budget, and upload ad creatives that align with your flip-card teaser.
  3. Use Facebook's optimization tools to focus on users most likely to install your app.

• Always use Facebook's test placement IDs during development to avoid violating ad policies while testing.
• Handle ad load failures gracefully (e.g., hide the card or show a placeholder if the ad doesn't load).
• Ensure your Facebook App is fully verified and your ad placements are approved before launching to production.

内容的提问来源于stack exchange，提问作者Nikita