In the  previous chapter, we configured the in-app purchase in our React Native app. In this chapter, we are going to apply it in order to implement the Remove Ads feature. First, we are going to implement the Remove ads screen which will have a privacy policy and terms of use along with buttons to trigger the subscription-based payments. The chapter is a bit complex since we are dealing with the actual money here. But, we are going to go step by step to make the implementation simple and easy to understand. At the end of this tutorial, we will be able to make the test remove ads purchase from the app itself.

Let’s get started!

Control banner display on the home screen

Hence, the subscription-based purchase is also successful. Since the purchase is successful, the ads will auto-hide themselves.

Now in the Home screen, we need to import the state that we are going to use in order to toggle the ads state. First, we need to import IApContext as shown in the code snippet below:

import { IApContext } from ‘…/components/IApController’

Then, we need to get the showads function from IApContext using the useContext hook as shown in the code snippet below:

const { showads } = useContext( IApContext)

Hence, we can now use it as a condition on render as shown in the code snippet below:

JavaScript

renderItem={({ item , index}) = > (

< React. Fragment >

<FlatlistItem item={ item} navigation={ navigation} / >

{ showads && index % 3 == 0 ? renderBanner() : < View / >}

/ React. Fragment >

)}

Hence, we will get the result as displayed in the screenshots below:

Showing banner on home page

Control banner display on the single post screen

Another screen is the SinglePost post screen in which we do the same thing. We start by importing the context class as shown in the code snippet below:

import { IApContext } from '…/components/IApController

#javascript #react native #react native lessons