All Collections
Purchasely SDK
Paywall
Display a paywall in fullscreen
Display a paywall in fullscreen

Display a paywall for Android and iOS devices on React Native, Cordova and Flutter in fullscreen mode

Kevin Herembourg avatar
Written by Kevin Herembourg
Updated over a week ago

Android

In your activity, use WindowCompat to set your content edge to egde

WindowCompat.setDecorFitsSystemWindows(window, false)

Display Purchasely Fragment in your activity

val fragment = Purchasely.presentationFragment(presentationId)

if(fragment == null) {
finish()
return
}

supportFragmentManager
.beginTransaction()
.replace(R.id.fragmentContainer, fragment)
.commit()

Add a theme to your activity to set action bar and toolbar transparency

<style name="Theme.Purchasely.Fullscreen" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:navigationBarColor">@android:color/transparent</item>
<item name="android:statusBarColor">@android:color/transparent</item>

<!-- Optional, if your background is white -->
<!-- <item name="android:windowLightStatusBar">true</item> -->
</style>


React Native

Call present method with isFullScreen parameter

await Purchasely.presentPresentationWithIdentifier({isFullscreen: true});

Only for Android platfom you have to override Purchasely Activity in the Manifest

In your AndroidManifest.xml file, add tools namespace to manifest tag (first line of file)

<manifest 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">

Add Purchasely Activity in application tag to override theme

<application>
<activity
tools:replace="android:theme"
android:name="com.reactnativepurchasely.PLYProductActivity"
android:theme="@style/Purchasely.Theme.Fullscreen" />
</application>

You can use one of our provided themes or use your own

Purchasely.Theme.Fullscreen to display in fullscreen mode with dark barground

Purchasely.Theme.Fullscreen.Light to display in fullscreen mode with light barground


Cordova

First you need to call Purchasely.presentPresentationWithIdentifier method with fullscreen parameter set to true

Purchasely.presentPresentationWithIdentifier(null, null, true);

On iOS there is no additional configuration necessary.

On Android you need to override Purchasely Activity to change theme and allowing fullscreen.
In your AndroidManifest.xml file, change activity PLYProductActivity to this

<activity 
android:label="PLYProductActivity"
android:name="cordova.plugin.purchasely.PLYProductActivity"
android:theme="@style/Theme.Purchasely.Fullscreen"/>

Your cas use one of our provided themes or use your own
Purchasely.Theme.Fullscreen to display in fullscreen mode with dark barground
Purchasely.Theme.Fullscreen.Light (only SDK 23 and above) to display in fullscreen mode with light background

Workaround : You can also try to edit android config in your config.xml file

<edit-config	
file="AndroidManifest.xml"
target="/manifest/application/activity[@android:name='cordova.plugin.purchasely.PLYProductActivity']"
mode="overwrite">
<activity
android:label="PLYProductActivity"
android:name="cordova.plugin.purchasely.PLYProductActivity"
android:theme="@style/Theme.Purchasely.Fullscreen">
</activity>
</edit-config>

Flutter

Call present method with isFullScreen parameter

await Purchasely.presentPresentationWithIdentifier(isFullscreen: true);

Only for Android platfom you have to override Purchasely Activity in the Manifest

In your AndroidManifest.xml file, add tools namespace to manifest tag (first line of file)

<manifest 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">

Add Purchasely Activity in application tag to override theme

<application>
<activity
tools:replace="android:theme"
android:name="com.reactnativepurchasely.PLYProductActivity"
android:theme="@style/Purchasely.Theme.Fullscreen" />
</application>

You can use one of our provided themes or use your own

Purchasely.Theme.Fullscreen to display in fullscreen mode with dark barground

Purchasely.Theme.Fullscreen.Light to display in fullscreen mode with light bargroundround

Did this answer your question?