AdIconView and MediaView are very laggy in Flatlist.(iOS)

AdIconView in Flatlist Without AdIconView

It works very good, without AdIconView in Flatlist. Facebook Audience Network SDK 5.0.2 My react-native-fbads lib use Github version.

const styles = StyleSheet.create({
  container: {
    marginVertical: 5,
    marginHorizontal: 10,
    height: 52,
    flexDirection: 'row',
    alignItems: 'center'
  },
  img: {
    width: 92,
    height: 52,
    ...BackgroundColor.ImageBG
  },
  text: {
    fontSize: 13,
    lineHeight: 18,
    ...FontColors.Main,
    marginHorizontal: 8,
    flex: 1
  },
  callActionText: {
    fontSize: 10,
    paddingVertical: 2,
    paddingHorizontal: 5,
    ...FontColors.Main,
    borderRadius: 8,
    ...BorderColor.Main,
    borderWidth: 1
  },
  adText: {
    fontSize: 10,
    ...FontColors.Third,
    position: 'absolute',
    right: 3,
    bottom: 3,
    borderRadius: 5,
    paddingHorizontal: 5,
    overflow: 'hidden',
    ...BackgroundColor.SearchPlaylistTime
  }
})

let adsManager = new NativeAdsManager(FB_NATIVE_ADS_BANNER_ID)
let FBNativeAdsRowView = ({style, nativeAd}) => {
  return (
    <View style={[styles.container, style]}>
      <AdChoicesView style={{ position: 'absolute', right: -10, top: -5 }} location={'topRight'} expandable />
      <View style={styles.img}>
        <AdIconView style={styles.img} /> // without this works fine either
        <TriggerableView style={styles.adText} numberOfLines={1}>
          {nativeAd.sponsoredTranslation}
        </TriggerableView>
      </View>
      <TriggerableView style={styles.text} numberOfLines={3}>
        {nativeAd.advertiserName + '\n' + nativeAd.socialContext}
      </TriggerableView>
      <TriggerableView style={styles.callActionText} numberOfLines={1}>
        {nativeAd.callToActionText}
      </TriggerableView>
    </View>
  )
}

let FBNativeAdsView = withNativeAd(FBNativeAdsRowView)

class FBNativeAdsRow extends React.Component {
  componentWillMount () {
    if (!adsManager.isValid) {
      adsManager = new NativeAdsManager(FB_NATIVE_ADS_BANNER_ID) // Facebook Native Ads Banner ID
    }
  }

  render () {
    return (
      <FBNativeAdsView
        onAdLoaded={() => {
        }}
        adsManager={adsManager}
      />
    )
  }
}

[dblazeski]

Had the same issue, wasn’t able to track down why it happens. Can confirm MediaView is definitely laggy. Temp fix is to apply removeclippedsubviews={true} on the FlatList component.

[TMaszko]

Please check out v7 available now ! 😃 if it hasn’t been fixed yet then please reopen it.