Skip to main content

React Native UI component

As you know we're on a mission to make in-app purchase as easy as possible.
The react-native-iaphub is already doing that pretty well but we've decided to make things even easier!

Our React Native component react-native-iaphub-ui is providing all the UI necessary to sell in-app purchases!
You'll be able to display a beautiful paywall that is highly customizable and includes (so far) the translations in 6 languages (English, Spanish, French, German, Portuguese, Japanese).

Install component

npm install react-native-iaphub-ui --save
npm install react-native-iaphub --save // Peer dependency
// Update dependency on xcode (in the ios folder)
pod install

Initialize IAPHUB

In order to initialize the IAPHUB SDK, you must render the IaphubDataProvider component in the main tree on your app (it should be executed when starting the app).

import {IaphubDataProvider} from 'react-native-iaphub-ui';

{/* App Code */}

Properties of the component:

appIdStringThe app id is available on the settings page of your app
apiKeyStringThe (client) api key is available on the settings page of your app
langStringLanguage ISO code (Possible values: 'en', 'es', 'de', 'fr', 'pt', 'jp')
userIdBooleanOptional, user ID of the logged user
allowAnonymousPurchaseBooleanOptional, if you want to allow purchases when the user isn't logged in (false by default)
userTagsObjectOptional, user tags
deviceParamsObjectOptional, device params
onErrorFunctionOptional, event triggered when an error occurs (err provided as argument)
onPurchaseFunctionOptional, event triggered when a purchase is successful (transaction provided as argument)

Access IAPHUB data

Whenever it is needed, you can access the IAPHUB data (such as the active subscriptions or the products for sale) by using the IaphubDataConsumer component.
The component requires a callback for its children that will be executed with the IAPHUB data.
The component will also be automatically re-rendered everytime the data is updated.

import {IaphubDataConsumer} from 'react-native-iaphub-ui';

{(iaphubData) => /* Render here anything that needs the IAPHUB data */}

Render paywall

You can render at any time a beautiful paywall by using the Paywall component.
The component requires the IAPHUB data. You should use the IaphubDataConsumer component in order to get it.

import {IaphubDataConsumer, Paywall} from 'react-native-iaphub-ui';

{(iaphubData) => <Paywall {...paywallProps} />}

Preview of the component (the image and title isn't part of the component):

Properties of the component

isLoadingBooleanDisplay a spinner when the data is loading
activeProductsArrayList of active products
productsForSaleArrayList of products for sale
errObject/StringCustomize the error message when the list of products for sale is empty by providing the error code
langStringLanguage ISO code (Possible values: 'en', 'es', 'fr', 'pt', 'jp') ('en' by default)
i18nObjecti18n data (if you want to provide your own translations)
defaultSelectedProductIndexNumberIndex of the product selected by default (0 by default)
themeObjectTheme object to customize the styles of the components (see style customization below)
displayStringOrientation of the products for sale list (Possible values: 'horizontal', 'vertical') ('horizontal' by default)
onBuyStartFunctionEvent triggered when the user clicks on the buy button (product provided as argument)
onBuyEndFunctionEvent triggered when the user purchase is done (err, transaction provided as arguments)
onRestoreStartFunctionEvent triggered when the user clicks on the restore button
onRestoreEndFunctionEvent triggered when the user restore is done
onShowManageSubscriptionsFunctionEvent triggered when the user clicks on the button to manage the subscriptions
onRefreshProductsFunctionEvent triggered when the user clicks on the button to refresh the products (when the loading previously failed)

Render paywall optimized for a subscription group

A subscription group is needed when you offer the same subscription with different durations.
Since it is a pretty common practice we've developped a separate PaywallSubscriptionGroup component optimized to display a subscription group.


If the data provided doesn't have one (and only) subscription group, an error message will be displayed.

import {IaphubDataConsumer, PaywallSubscriptionGroup} from 'react-native-iaphub-ui';

{(iaphubData) => <PaywallSubscriptionGroup {...paywallProps} />}

Preview of the component (the image and title isn't part of the component):

Properties of the component

The component has the same properties as the Paywall component.

Customize the paywall's style

You can customize any style of the component by using the theme property.
You simply have to provide an object containing the name and style of the component you're looking to customize.
You can find all the components and styles in our codebase here.

Product: {
root: {
backgroundColor: 'red'

Advanced paywall customization

If customizing the style isn't enough, you can easily replace any component of the paywall.
We recommend copying the component you're looking to replace in our codebase first and then modify it as much as you want.
The PaywallSubscriptionGroup is a good example of how we've customized the Paywall component to optimize it for a subscription group.

Example modifying the product title component:

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import withStyles from 'react-native-iaphub-ui/src/util/with-styles';
import style from 'react-native-iaphub-ui/src/util/style';

class CustomProductTitle extends Component {

render() {
var {product, isSelected, styles} = this.props;

return (
<Text style={[styles.root, style(styles.selectedRoot, isSelected)]}>


const styles = StyleSheet.create({
// Root style
root: {
fontSize: 22,
color: 'black',
marginBottom: 10,
textAlign: 'left'
// Root style when the product is selected
selectedRoot: {
color: 'white'

export default withStyles(styles, 'ProductTitle')(CustomProductTitle);
import CustomProductTitle from './custom-product-title';

<Paywal {...props} ProductTitle={CustomProductTitle}/>