react-native-iap-kit/example/App.js

In app purchase UI Kit for React Native

import * as React from 'react';
import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
import IapKitScreen, {IapKit} from 'react-native-iap-kit';

const plans = [
  {
    name: 'LIFETIME PREMIUM',
    description: 'ONLY $9.99',
    isRecommend: false,
    price: '$3.49',
    sku: 'inlove.weekly',
    type: 'subs',
  },
  {
    name: '3 DAYS FREE TRIAL',
    description: 'then $9.99 each 3 months',
    sku: 'inlove.monthly',
    isRecommend: true,
    trial: 3,
    type: 'subs',
    price: '$3.49',
  },
  {
    name: '3 DAYS FREE TRIAL',
    description: 'then $9.99 each 3 months',
    sku: 'inlove.yearly',
    type: 'subs',
    price: '$3.49',
  },
];
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isVisible: false,
      theme: 'theme1',
    };
  }

  componentDidMount() {
    IapKit.init(
      plans,
      () => {},
      () => {},
    );
  }
  onShowTheme1 = () => {
    this.setState({isVisible: true, theme: 'theme1'});
  };

  onShowTheme2 = () => {
    this.setState({isVisible: true, theme: 'theme2'});
  };

  onClosePopup = () => {
    this.setState({isVisible: false});
  };
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <TouchableOpacity onPress={this.onShowTheme1}>
          <Text>Mẫu card (theme1)</Text>
        </TouchableOpacity>

        <TouchableOpacity style={{marginTop: 15}} onPress={this.onShowTheme2}>
          <Text>Mẫu row (theme2)</Text>
        </TouchableOpacity>

        <IapKitScreen
          existSubs
          privacyUrl="https://vinsofts.com/en/privacy-policy/"
          termsUrl="https://vinsofts.com/en/terms-of-use/"
          onRestorePressed={this.onRestorePressed}
          onBackPressed={this.onClosePopup}
          benefits={[
            'Remove all ads',
            'Beautiful Effects',
            'Passcode Lock',
            'Background Store',
          ]}
          plans={plans}
          visible={this.state.isVisible}
          theme={this.state.theme}
        />
      </View>
    );
  }
}