Facebook Banner Ad shows additional whitespace

Please provide the following:

  1. SDK Version: 37
  2. Platforms(Android/iOS/web/all): iOS

Notice the yellow strip in screenshot, that’s some additional whitespace that’s shown for Facebok banner ad:

Here’s code to reproduce it:

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
import * as FacebookAds from 'expo-ads-facebook';

export default class App extends React.Component {

  private static initialize = (() => {
    // publish - comment this line before publishing app
    FacebookAds.AdSettings.addTestDevice(FacebookAds.AdSettings.currentDeviceHash);
  })();

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={{paddingVertical: 40, backgroundColor: 'powderblue', flex:1}}>
          <Text>Hoping to see a facebook banner ad at the bottom of the screen!</Text>
        </View>
        <View style={{backgroundColor:'yellow'}}>
          <FacebookAds.BannerAd
            placementId="REPLACE_PLACEMENT_ID"
            type="standard"
            onPress={() => console.log('click')}
            onError={error => console.log('error', error)}
          />
        </View>
        
      </SafeAreaView>
    );  
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
});

Using element inspector I see there are two separate UI components that are rendered, both with height 50 but start at different position (0, 812) and (0, 832), refer screenshots:

Screenshot 1 (Notice the position)

Screenshot 2 (Notice the position)

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.