Rendering Admob Banner within react native flatlist items - react-native-firebase

Question

I have integrated react-native-firebase and the AdMob module into my react native project and everything is working as expected (test ads and ads in production). I now want to add banners within my Flatlist (rendering a banner every X number of rows).
this is an example of the data I'm receiving from the server:
[
{
...item 1 details
},{
...item 2 details
},{
...ad details
},{
...item 3 details
},{
...item 4 details
},{
...ad details
}
]
and this is the Flatlist component
class ItemsList extends React.Component {
_renderItem = ({item, index}) => {
if (item.isAd) {
const unitId = Platform.OS === "ios" ? item.adIdIOS : item.adIdAndroid;
const Banner = firebase.admob.Banner;
const AdRequest = firebase.admob.AdRequest;
const request = new AdRequest();
const keyWords = item.admobKeywords || [];
keyWords.forEach(keyword => {
request.addKeyword(keyword);
});
return (
<View style={{ width:"100%", height: item.adHeight || "auto", marginTop: 5, marginBottom: 15, alignItems: 'center', justifyContent: 'center' }}>
<Banner
size={item.adSize}
request={request.build()}
unitId={unitId}
onAdLoaded={() => {}}
/>
</View>
)
} else {
renderItem()
}
}
render() {
return(
<View>
<FlatList
data={this.state.data}
renderItem={this._renderItem}
...
/>
</View>
)
};
};
the problem is that whenever a scroll event happens (user scrolls down), the Flatlist keeps re-rendering the banner (firing a new request) and the banner keeps refreshing. After a while, a lot of requests get fired and the application crashes!
I know that calling a network request inside a renderItem method is not a good practice so I also tried the following but the problem is still the same:
const Banner = firebase.admob.Banner;
const AdRequest = firebase.admob.AdRequest;
const request = new AdRequest();
class CatalogueSalesList extends React.Component {
_renderItem = ({item, index}) => {
if (item.isAd) {
const unitId = Platform.OS === "ios" ? item.adIdIOS : item.adIdAndroid;
const keyWords = item.admobKeywords || [];
keyWords.forEach(keyword => {
request.addKeyword(keyword);
});
return (
<View style={{ width:"100%", height: item.adHeight || "auto", marginTop: 5, marginBottom: 15, alignItems: 'center', justifyContent: 'center' }}>
<Banner
size={item.adSize}
request={request.build()}
unitId={unitId}
onAdLoaded={() => {}}
/>
</View>
)
} else {
renderItem()
}
}
render() {
return(
<View>
<FlatList
data={this.state.data}
renderItem={this._renderItem}
...
/>
</View>
)
};
};
Can someone please provide me with a solution to how a banner ad could be implemented inside a Flatlist without the banner getting re-rendered every time the user scrolls through the list?
the version that I'm using:
"react-native": "0.59.9",
"react-native-firebase": "~5.5.3"

Answer 1

Flatlist component contains onScroll event hooks you can use to determine when and what type of scrolling is happening:
onScrollBeginDrag, onScrollEndDrag,onMomentumScrollBegin, onMomentumScrollEnd
Use these and make your banner component/list item a stateful component.
The code below will render your admob stuff (and it's associated network requests) only when user is not scrolling and only once.
If your banner component is straight from admob, then wrap it in a stateful component and do the same as below.
List Parent Component
class CatalogueSalesList extends React.Component {
constructor() {
this.state = {
isDragging: false,
isGliding: false,
}
_renderItem = ({item, index}) => {
return (
<View>
<Banner
isDragging={this.state.isDragging}
isGliding={this.state.isGliding}
size={item.adSize}
request={request.build()}
unitId={unitId}
onAdLoaded={() => {}}
/>
</View>
)
} else {
renderItem()
}
}
render() {
return(
<View>
<FlatList
onScrollBeginDrag={
() => {this.setState({isDragging: true});}
}
onScrollEndDrag={
() => {this.setState({isDragging: false});}
}
onMomentumScrollBegin={
() => {this.setState({isGliding: true});}
}
onMomentumScrollEnd={
() => {this.setState({isGliding: false});}
}
data={this.state.data}
renderItem={this._renderItem}
...
/>
</View>
)
};
};
Banner.tsx
class Banner extends React.Component {
constructor(props) {
super(props)
this.state = {
shouldRenderAd: false,
}
}
componentDidMount() {
if (!this.props.isGliding && !this.props.isDragging) {
this.setState({
shouldRenderAd: true,
});
}
}
shouldComponentUpdate(nextProps: Props): boolean {
if (this.state.shouldRenderAd) {
// if it has already rendered the ad, don't re-render
return false;
} else if (!nextProps.isDragging && !nextProps.isGliding) {
// if stationary, ok to re-render
return true;
} else if (nextProps.isDragging && !nextProps.isGliding) {
// if dragging, but not gliding, ok to re-render
return true;
} else {
// otherwise (it is gliding) don't re-render
return false;
}
}
componentDidUpdate() {
if (!this.props.isGliding && !this.props.isDragging) {
// if no scrolling is happening
this.setState({
shouldRenderAd: true,
});
}
}
render() {
if (this.state.shouldRenderAd) {
return (
// render your admob (network requests) stuff here
);
} else {
return (
// Placeholder component for your ad
// probably an empty view the same dimensions as the ad banner
);
}
}
}