React Native in-app purchases implementation tutorial

yarn add react-native-adapty

# in your project root
pod install --project-directory=ios

# you can open Xcode via terminal with xed CLI
# in your project root:
xed -b ./ios

// src/android/build.gradle
...
buildscript {
	...
	dependencies {
		...
		сlasspath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.6.21" // ← Add this
	}
}

// src/android/app/build.gradle
...
android {
	...
	defaultConfig {
		...
		multiDexEnabled true // ← Add this
	}
}

npm install -g eas-cli

expo install expo-dev-client

expo install react-native-adapty

eas build --profile development --platform all
# ----- or ----- # 
eas build --profile development --platform ios
# ----- or ----- # 
eas build --profile development --platform android

yarn start --dev-client

adapty.activate('MY_SDK_KEY');

// /App.tsx
import React from 'react';

import {adapty} from 'react-native-adapty'
// ...

// Replace MY_SDK_KEY with your public SDK key
// You can find it in your Adapty Dashboard
// App settings > API keys > Public SDK key
adapty.activate('MY_SDK_KEY', {
  lockMethodsUntilReady: true,
});

function App(): JSX.Element {
  // ...
}

import AsyncStorage from '@react-native-async-storage/async-storage';
import {adapty} from 'react-native-adapty';

async function activateAdapty() {
  const userId = await AsyncStorage.getItem('MY_USER_ID'); 
      
  // Replace MY_SDK_KEY with your public SDK key
  // You can find it in your Adapty Dashboard
  // App settings > API keys > Public SDK key
  await adapty.activate('MY_SDK_KEY', {
    lockMethodsUntilReady: true,
    customerUserId: userId,
  });
}

activateAdapty();

import {adapty} from 'react-native-adapty';

export async function activateAdaptyOrWait() {
  // Replace MY_SDK_KEY with your public SDK key
  // You can find it in your Adapty Dashboard
  // App settings > API keys > Public SDK key
  await adapty.activate('MY_SDK_KEY', {
    lockMethodsUntilReady: true,
  });
}

import React from 'react';
import {adapty} from 'react-native-adapty';

function Paywall(): JSX.Element {
  // ...

  useEffect(() => {
    async function fetch() {
      await activateAdaptyOrWait();

      const paywall = await adapty.getPaywall("yearly");
      // ...
    }

    fetch();
  }, []);

  // ...
}

function Profile(): JSX.Element {
  // ... 

  useEffect(() => {
    async function fetch() {
      await activateAdaptyOrWait();

      const profile = await adapty.getProfile();
      // ...
    }

    fetch();
  }, []);

  // ...
}

const profile = await adapty.getProfile();
// premium can be replaced with your access level
const isActive = profile.accessLevels["premium"]?.isActive

adapty.addEventListener('onLatestProfileLoad', profile => {
  const isActive = profile.accessLevels["premium"]?.isActive
  // ...
});

import React, {useState, useEffect} from 'react';
import {adapty} from 'react-native-adapty';


const App = () => {
  const [isSubscribed, setIsSubscribed] = useState(undefined);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function fetch() {
      setIsLoading(true);
      const profile = await adapty.getProfile();
      setIsSubscribed(profile.accessLevels["premium"]?.isActive);
      setIsLoading(false);
    }

    fetch();
  },[]);

  // ...
};

import React, {useState, useEffect} from 'react';
import {adapty} from 'react-native-adapty';


function App(): JSX.Element {
  const [isSubscribed, setIsSubscribed] = useState(undefined);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function fetch() {
      setIsLoading(true);
      const profile = await adapty.getProfile();
      setIsSubscribed(profile.accessLevels["premium"]?.isActive);
      setIsLoading(false);
    }
    fetch();

    adapty.addEventListener('onLatestProfileLoad', profile => {
      setIsSubscribed(profile.accessLevels["premium"]?.isActive);
    });
    
    return () => {
      adapty.removeAllListeners();
    }
  },[]);

  // ...
};

// /profile.ts
import {adapty, AdaptyProfile} from 'react-native-adapty';

// do not expose
let _profile: AdaptyProfile | undefined = undefined;

export async function getProfile(): AdaptyProfile {
  if (!_profile) {
    // consider wrapping in try-catch
    const profile = await adapty.getProfile();
    _profile = profile;
  }

  return _profile;
}

// For event
export function setProfile(profile: AdaptyProfile) {
  _profile = profile;
}

// /App.tsx
import {adapty} from 'react-native-adapty';
import {setProfile, getProfile} from './profile';

// ...
function App(): JSX.Element {
  // ...

  useEffect(() => {
    adapty.addEventListener('onLatestProfileLoad', setProfile);

    return () => {
      adapty.removeAllListeners();
    }
  }, []);

  // ...
}

const paywall = await adapty.getPaywall('paywall_id');

await adapty.logShowPaywall(paywall);

const products = await adapty.getPaywallProducts(paywall);

import React, {useEffect, useState} from 'react';
import {adapty, AdaptyProduct, AdaptyPaywall} from 'react-native-adapty';

interface PaywallProps {
  paywallId: stirng | undefined;
}

export function Paywall(props: PaywallProps): JSX.Element {
  const [paywall, setPaywall] = useState<AdaptyPaywall | undefined>();
  const [products, setProducts] = useState<AdaptyProduct[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    async function fetch() {
      if (!props.paywallId) {
        return;
      }


      setIsLoading(true);

      // consider wrapping into try-catch for production use
      const paywallResp = await adapty.getPaywall(props.paywallId);
 
      const productsResp = await adapty.getPaywallProducts(paywallResp);
    
      setPaywall(paywallResp);
      setProducts(productsResp);
      setIsLoading(false);
    }
    
    fetch();
  }, [props.paywallId]);

  // ...
} 

import {useState, useEffect} from 'react';
import {
  adapty, 
  AdaptyError, 
  AdaptyPaywall,
  AdaptyProduct,
} from 'react-native-adapty';

interface PaywallState {
  paywall: AdaptyPaywall | null;
  products: AdaptyProduct[];

  loading: boolean;
  error: AdaptyError | null;

  logShow: () => Promise<void>;
  refetch: () => Promise<void>;
}

const PAYWALL_ID = "MY_PAYWALL_ID";

export function usePaywallData(): PaywallState {
  const [paywall, setPaywall] = useState<PaywallState['paywall']>(null);
  const [products, setProducts] = useState<PaywallState['products']>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<PaywallState['error']>(null);

  const fetch = async (): Promise<void> => {
    try {
      setIsLoading(true);
      setError(null);

      const paywallResp = await adapty.getPaywall(PAYWALL_ID);
      const productsResp = await adapty.getPaywallProducts(paywallResp);

      setPaywall(paywallResp);
      setProducts(productsResp);
    } catch (error) {
      console.error(error.message);
      setError(error);
    } finally {
      setIsLoading(false);
    }
  }

  const logShow = async (): Promise<void> => {
    try {
      if (!paywall) {
        return console.error("Tried to log show empty paywall");
      }

      await adapty.logShowPaywall(paywall);
    } catch (error) {
      console.log(error.message);
    }
  }
  
  useEffect(() => {
    if (!paywall && !isLoading && !error) {
      fetch();
    }
  }, []);  
  
  return {
    paywall,
    products,

    loading: isLoading,
	error,

    logShow,
    refetch: fetch,
  };  
}

function App(): JSX.Element {
  // fetches paywall data, not using here
  usePaywallData();
  // ...
}

function Paywall(): JSX.Element {
  const {paywall, products, loading, error} = usePaywallData();
  // ...
}

npx react-native@latest init CatsFan

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  useColorScheme,
} from 'react-native';

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  const styles = useMemo(() => getStyles(isDarkMode), [isDarkMode]);

  return (
    <SafeAreaView style={styles.app}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={styles.app.backgroundColor}
      />
    </SafeAreaView>
  );
}


function getStyles(dark: boolean) {
  return StyleSheet.create({
    app: {
      backgroundColor: dark ? 'rgb(44,44,46)' : '#fff',
      width: '100%',
      height: '100%',
    },
    container: {
      marginTop: 32,
      paddingHorizontal: 24,
      fontWeight: '700',
    },
  });
}

export default App;

// /adapty.ts
import {adapty} from 'react-native-adapty';
import {MY_API_KEY} from './credentials';

export async function activateAdapty() {
  try {
    await adapty.activate(MY_API_KEY, {
      lockMethodsUntilReady: true,
    });
  } catch (error) {
    console.error('Failed to activate Adapty: ', error);
  }
}

// /App.tsx
// ...
import {activateAdapty} from './adapty';
// ...
activateAdapty();

function App(): JSX.Element {
  // ...

npm install --save react-tinder-card
npm install --save @react-spring/[email protected]

// /Card.tsx
import React, {ForwardedRef, PropsWithChildren, useMemo} from 'react';
import {StyleSheet, View, useColorScheme} from 'react-native';
import TinderCard from 'react-tinder-card';

type CardProps = PropsWithChildren<{
  onSwipeCompleted?: (direction: string) => void;
  onLeftScreen?: (id: string) => void;
  preventSwipe?: string[];
  synthetic?: boolean;
}>;

export const CARD_RADIUS = 12;

export const Card = React.forwardRef<any, CardProps>(
  (
    {
      children,
      preventSwipe = ['up', 'down'],
      onSwipeCompleted = () => undefined,
      onLeftScreen = () => undefined,
      synthetic = false,
    }: CardProps,
    ref: ForwardedRef<any>,
  ) => {
    const isDarkMode = useColorScheme() === 'dark';
    const styles = useMemo(() => getStyles(isDarkMode), [isDarkMode]);

    // if synthetic, we don't want to use the tinder card,
    // as it will cause issues with the pressables
    if (synthetic) {
      return (
        <View style={{...styles.container, marginLeft: 12}}>{children}</View>
      );
    }

    return (
      <TinderCard
        ref={ref}
        onSwipe={onSwipeCompleted}
        onCardLeftScreen={onLeftScreen}
        preventSwipe={preventSwipe}>
        <View style={styles.container}>{children}</View>
      </TinderCard>
    );
  },
);

function getStyles(dark: boolean) {
  return StyleSheet.create({
    container: {
      position: 'absolute',
      backgroundColor: dark ? '#rgb(28,28,30)' : '#ddd',
      width: '100%',
      justifyContent: 'center',
      alignItems: 'center',

      height: 500,
      shadowColor: '#000',
      shadowOpacity: 0.05,
      shadowRadius: CARD_RADIUS,
      borderRadius: CARD_RADIUS,
      resizeMode: 'cover',
    },
  });
}

import React from 'react';
import {Card} from './Card';
import {Image, StyleSheet} from 'react-native';

interface CardImageProps {
  onSwipeCompleted?: (direction: string) => void;
  url: string;
}

export function CardImage(props: CardImageProps): JSX.Element {
  return (
    <Card onSwipeCompleted={props.onSwipeCompleted}>
      <Image style={styles.image} source={{uri: props.url}} />
    </Card>
  );
}

const styles = StyleSheet.create({
  image: {width: '100%', height: 500, borderRadius: 12},
});

// /images.ts
import {CATAPI_KEY} from './credentials';

const LIMIT = 5;

const getEndpoint = (page: number) =>
  `https://api.thecatapi.com/v1/images/search?limit=${LIMIT}&page=${page}&api_key=${CATAPI_KEY}`;

export interface CatImage {
  id: string;
  url: string;
  width: number;
  height: number;
}

export async function fetchImages(page: number = 0): Promise<CatImage[]> {
  const response = await fetch(getEndpoint(page));
  const data = await response.json();

  return data;
}

// /data.ts
import {useRef, useState} from 'react';
import {AdaptyPaywall, AdaptyProduct} from 'react-native-adapty';
import {fetchImages} from './images';

type CardInfo =
  | {type: 'image'; id: string; url: string}
  | {
      type: 'paywall';
      id: string;
      paywall: Promise<AdaptyPaywall>;
      product: Promise<AdaptyProduct[]>;
    };

interface CardsResult {
  cards: CardInfo[];
  fetchMore: (currentCard?: CardInfo) => Promise<void>;
  removeCard: (card: CardInfo, index: number) => void;
  init: () => Promise<void>;
}

// When to start fetching new data
export const TOLERANCE = 1;

export function useCards(): CardsResult {
  const [cards, setCards] = useState<CardsResult['cards']>([]);
  const page = useRef<number>(0);

  const init = async () => {
    await fetchMore();
  };

  const removeCard = async (card: CardInfo, index: number) => {
    if (index === TOLERANCE) {
      fetchMore(card);
    }
  };

  const fetchMore = async (currentCard?: CardInfo) => {
    const images = await fetchImages(page.current);

    const result = images.map<CardInfo>(value => {
      return {
        type: 'image',
        // // CatAPI returns duplicates, so we mark them with page number, so React keys are unique
        id: page.current + '__' + value.id,
        url: value.url,
      };
    });

    const requestedAtIndex = cards.findIndex(v => v.id === currentCard?.id);
    const newCards = [...result, ...cards.slice(0, requestedAtIndex)];

    page.current += 1;
    setCards(newCards);
  };

  return {
    cards,
    init,
    fetchMore,
    removeCard,
  };
}

// App.tsx
import React, {useEffect, useMemo} from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  View,
  useColorScheme,
} from 'react-native';
import {activateAdapty} from './adapty';

import {useCards} from './data';
import {CardImage} from './CardImage';

activateAdapty();
function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  const styles = useMemo(() => getStyles(isDarkMode), [isDarkMode]);

  const {cards, fetchMore, removeCard, init} = useCards();

  useEffect(() => {
    init(); // fetch initial cards
  }, []);

  return (
    <SafeAreaView style={styles.app}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={styles.app.backgroundColor}
      />

      <Text style={styles.headerText}>CatsFan</Text>
      <View style={styles.cardsContainer}>
        {cards.map((card, index) => {
          switch (card.type) {
            case 'paywall':
              return null;
            case 'image':
              return (
                <CardImage
                  key={card.id}
                  onSwipeCompleted={() => removeCard(card, index)}
                  url={card.url}
                />
              );
          }
        })}
      </View>
    </SafeAreaView>
  );
}

function getStyles(dark: boolean) {
  return StyleSheet.create({
    app: {
      backgroundColor: dark ? 'rgb(44,44,46)' : '#fff',
      width: '100%',
      height: '100%',
    },
    headerText: {
      fontWeight: '700',
      fontSize: 32,
      marginHorizontal: 24,
      marginTop: 24,
      marginBottom: 12,
      color: dark ? '#fff' : '#000',
    },
    container: {
      marginTop: 32,
      paddingHorizontal: 24,
      fontWeight: '700',
    },
    cardsContainer: {
      width: '100%',
      paddingHorizontal: 12,
      height: 500,
    },
  });
}

export default App;

// /data.ts
import {useRef, useState} from 'react';
import {AdaptyPaywall, AdaptyProduct} from 'react-native-adapty';
import {fetchImages} from './images';
+import {MY_PAYWALL_ID} from './credentials';

type CardInfo =
  | {type: 'image'; id: string; url: string}
  | {
      type: 'paywall';
      id: string;
      paywall: Promise<AdaptyPaywall>;
      product: Promise<AdaptyProduct[]>;
    };

interface CardsResult {
  cards: CardInfo[];
  fetchMore: (currentCard?: CardInfo) => Promise<void>;
  removeCard: (card: CardInfo, index: number) => void;
  init: () => Promise<void>;
}

// When to start fetching new data
export const TOLERANCE = 2;
+// Where to insert a paywall
+export const PAYWALL_POSITION = 2;

export function useCards(): CardsResult {
  const [cards, setCards] = useState<CardsResult['cards']>([]);
  const page = useRef<number>(0);
+  const shouldPresentPaywall = useRef<boolean>(true);

  const init = async () => {
    await fetchMore();
  };

  const removeCard = async (card: CardInfo, index: number) => {
    if (index === TOLERANCE) {
      fetchMore(card);
    }
  };

  const fetchMore = async (currentCard?: CardInfo) => {
    const images = await fetchImages(page.current);

    const result = images.map<CardInfo>(value => {
      return {
        type: 'image',
        // // CatAPI returns duplicates, so we mark them with page number, so React keys are unique
        id: page.current + '__' + value.id,
        url: value.url,
      };
    });

    const requestedAtIndex = cards.findIndex(v => v.id === currentCard?.id);
    const newCards = [...result, ...cards.slice(0, requestedAtIndex)];

+    // insert a paywall at the third position, if user is not subscribed
+    if (shouldPresentPaywall) {
+      const paywallPromise = adapty.getPaywall(MY_PAYWALL_ID);
+      const productsPromise = paywallPromise.then(paywall =>
+        adapty.getPaywallProducts(paywall),
+      );
+
+      newCards.splice(2, 0, {
+        type: 'paywall',
+        id: 'paywall_' + page.current,
+        paywall: paywallPromise,
+        products: productsPromise,
+      });
+    }
+

    page.current += 1;
    setCards(newCards);
  };

  return {
    cards,
    init,
    fetchMore,
    removeCard,
  };
}

npm install @react-native-async-storage/async-storage

// /helpers.ts
import AsyncStorage from '@react-native-async-storage/async-storage';

// How many cards user have swiped
export const KEY_TODAY_VIEWS = '@views';
// When user last swiped a card (timestamp)
export const KEY_VIEWED_AT = '@viewed_at';

export async function getTodayViews(): Promise<number> {
  const lastViewTs = await AsyncStorage.getItem(KEY_VIEWED_AT);
  const now = Date.now();

  if (!lastViewTs) {
    return 0;
  }
  const diff = now - parseInt(lastViewTs, 10);
  // If it's been more than a day since last view, reset views
  if (diff > 24 * 60 * 60 * 1000) {
    await AsyncStorage.setItem(KEY_TODAY_VIEWS, '0');
    return 0;
  }

  const views = await AsyncStorage.getItem(KEY_TODAY_VIEWS);
  if (views) {
    return parseInt(views, 10);
  }

  return 0;
}

export async function getLastViewedAt(): Promise<number | null> {
  const lastViewTs = await AsyncStorage.getItem(KEY_VIEWED_AT);
  if (lastViewTs) {
    return parseInt(lastViewTs, 10);
  }

  return null;
}

export async function recordView(viewsAmount: number): Promise<void> {
  await AsyncStorage.setItem(KEY_VIEWED_AT, Date.now().toString());
  await AsyncStorage.setItem(KEY_TODAY_VIEWS, viewsAmount.toString());
}

import {useRef, useState} from 'react';
import {AdaptyPaywall, AdaptyProduct, adapty} from 'react-native-adapty';
import {fetchImages} from './images';
import {MY_PAYWALL_ID} from './credentials';
+import {getLastViewedAt, getTodayViews, recordView} from './helpers';

type CardInfo =
  | {type: 'image'; id: string; url: string}
  | {
      type: 'paywall';
      id: string;
      paywall: Promise<AdaptyPaywall>;
      products: Promise<AdaptyProduct[]>;
    };

interface CardsResult {
  cards: CardInfo[];
  fetchMore: (currentCard?: CardInfo) => Promise<void>;
  removeCard: (card: CardInfo, index: number) => void;
  init: () => Promise<void>;
}

// When to start fetching new data
export const TOLERANCE = 2;
// Where to insert a paywall
export const PAYWALL_POSITION = 2;

export function useCards(): CardsResult {
  const [cards, setCards] = useState<CardsResult['cards']>([]);
  const page = useRef<number>(0);
  const shouldPresentPaywall = useRef<boolean>(true);
+  const sessionViews = useRef<number>(0);
+  const lastViewedAt = useRef<number | null>(null); // Date timestamp

  const init = async () => {
+    sessionViews.current = await getTodayViews();
+    lastViewedAt.current = await getLastViewedAt();

    await fetchMore();
  };

  const removeCard = async (card: CardInfo, index: number) => {
+    sessionViews.current += 1;
+    recordView(sessionViews.current);

    if (index === TOLERANCE) {
      fetchMore(card);
    }
  };

  const fetchMore = async (currentCard?: CardInfo) => {
    const images = await fetchImages(page.current);

    const result = images.map<CardInfo>(value => {
      return {
        type: 'image',
        // // CatAPI returns duplicates, so we mark them with page number, so React keys are unique
        id: page.current + '__' + value.id,
        url: value.url,
      };
    });

    const requestedAtIndex = cards.findIndex(v => v.id === currentCard?.id);
    const newCards = [...result, ...cards.slice(0, requestedAtIndex)];

    // insert a paywall at the third position, if user is not subscribed
    if (shouldPresentPaywall) {
      const paywallPromise = adapty.getPaywall(MY_PAYWALL_ID);
      const productsPromise = paywallPromise.then(paywall =>
        adapty.getPaywallProducts(paywall),
      );

+      // viewing is from the last to first
+      const index =
+        newCards.length - Math.max(PAYWALL_POSITION - sessionViews.current, 0);
-      newCards.splice(2, 0, {
+      newCards.splice(index, 0, {
        type: 'paywall',
        id: 'paywall_' + page.current,
        paywall: paywallPromise,
        products: productsPromise,
      });
    }

    page.current += 1;
    setCards(newCards);
  };

  return {
    cards,
    init,
    fetchMore,
    removeCard,
  };
}

// /CardPaywall.tsx
import React, {useEffect, useRef, useState} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {
  AdaptyError,
  AdaptyPaywall,
  AdaptyProduct,
  adapty,
} from 'react-native-adapty';
import {Card} from './Card';

interface CardPaywallProps {
  onSwipeCompleted?: (direction: string) => void;
  paywall: Promise<AdaptyPaywall>;
  products: Promise<AdaptyProduct[]>;
}

export function CardPaywall(props: CardPaywallProps): JSX.Element {
  const [isLoading, setIsLoading] = useState(true);
  const [paywall, setPaywall] = useState<AdaptyPaywall>();
  const [products, setProducts] = useState<AdaptyProduct[]>([]);
  const [error, setError] = useState<AdaptyError | null>(null);
  const [isLocked, setIsLocked] = useState(true);

  const card = useRef<any>(null);

  useEffect(() => {
    async function fetch() {
      try {
        setError(null);
        const paywallResult = await props.paywall;
        const productsResult = await props.products;

        // log paywall opened
        adapty.logShowPaywall(paywallResult);

        setPaywall(paywallResult);
        setProducts(productsResult);
      } catch (error) {
        setError(error as AdaptyError);
      } finally {
        setIsLoading(false);
      }
    }

    fetch();
  }, []);

  async function tryPurchase(product: AdaptyProduct) {
    try {
      await adapty.makePurchase(product);
      setIsLocked(false);

      // wait until card is unlocked :(
      setTimeout(() => {
        card.current.swipe('left');
      }, 100);
    } catch (error) {
      setError(error as AdaptyError);
    }
  }

  const renderContent = (): React.ReactNode => {
    if (isLoading) {
      return <Text style={styles.titleText}>Loading...</Text>;
    }
    if (error) {
      return <Text style={styles.titleText}>{error.message}</Text>;
    }

    if (!paywall) {
      return <Text style={styles.titleText}>Paywall not found</Text>;
    }
    return (
      <View>
        <Text style={styles.titleText}>{paywall?.name}</Text>
        <Text style={styles.descriptionText}>
          Join to get unlimited access to images of cats
        </Text>

        <View style={styles.productListContainer}>
          {products.map(product => (
            <TouchableOpacity
              key={product.vendorProductId}
              activeOpacity={0.5}
              onPress={() => tryPurchase(product)}>
              <View style={styles.productContainer}>
                <Text style={styles.productTitleText}>
                  {product.localizedTitle}
                </Text>
                <Text style={styles.productPriceText}>
                  {product.localizedPrice}
                </Text>
              </View>
            </TouchableOpacity>
          ))}
        </View>
      </View>
    );
  };

  return (
    <Card
      onSwipeCompleted={props.onSwipeCompleted}
      synthetic={isLocked}
      preventSwipe={['up', 'left', 'down', 'right']}
      ref={card}>
      {renderContent()}
    </Card>
  );
}

const styles = StyleSheet.create({
  titleText: {
    color: 'white',
    fontSize: 16,
    paddingLeft: 10,
    fontWeight: '500',
  },
  descriptionText: {
    color: 'white',
    marginTop: 8,
    marginBottom: 8,
    paddingLeft: 10,
    maxWidth: 210,
  },
  productListContainer: {
    marginTop: 8,
    width: '100%',
  },
  productContainer: {
    marginTop: 8,
    width: '100%',
    flexDirection: 'row',
    paddingHorizontal: 10,
    paddingVertical: 16,
    borderRadius: 12,
    backgroundColor: '#0A84FF',
  },
  productTitleText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '500',
    flexGrow: 1,
    marginRight: 32,
  },
  productPriceText: {
    color: '#FF9F0A',
    fontWeight: '500',
    fontSize: 16,
  },
});

// /App.tsx
// ...
{cards.map((card, index) => {
  switch (card.type) {
    case 'paywall':
      return null;
    case 'image':
      return (
        <CardImage
          key={card.id}
          onSwipeCompleted={() => removeCard(card, index)}
          url={card.url}
         />
      );
    }
  }
)}
// ... 

// /helpers.ts
// ...

// Does user have premium
export const IS_PREMIUM = '@is_premium';

export async function getIsPremium(): Promise<boolean> {
  const isPremium = await AsyncStorage.getItem(IS_PREMIUM);
  return isPremium === 'true';
}

export async function setIsPremium(isPremium: boolean): Promise<void> {
  await AsyncStorage.setItem(IS_PREMIUM, isPremium.toString());
}

// /data.ts
import {useEffect, useRef, useState} from 'react';
import {AdaptyPaywall, AdaptyProduct, adapty} from 'react-native-adapty';
import {fetchImages} from './images';
import {MY_PAYWALL_ID} from './credentials';
import {
+  getIsPremium,
  getLastViewedAt,
  getTodayViews,
  recordView,
+  setIsPremium,
} from './helpers';

type CardInfo =
  | {type: 'image'; id: string; url: string}
  | {
      type: 'paywall';
      id: string;
      paywall: Promise<AdaptyPaywall>;
      products: Promise<AdaptyProduct[]>;
    };

interface CardsResult {
  cards: CardInfo[];
  fetchMore: (currentCard?: CardInfo) => Promise<void>;
  removeCard: (card: CardInfo, index: number) => void;
  init: () => Promise<void>;
}

// When to start fetching new data
export const TOLERANCE = 2;
// Where to insert a paywall
export const PAYWALL_POSITION = 2;

export function useCards(): CardsResult {
  const [cards, setCards] = useState<CardsResult['cards']>([]);
  const page = useRef<number>(0);
  const shouldPresentPaywall = useRef<boolean>(true);
  const sessionViews = useRef<number>(0);
  const lastViewedAt = useRef<number | null>(null); // Date timestamp

+  useEffect(() => {
+    adapty.addEventListener('onLatestProfileLoad', async profile => {
+      // premium is an access level, that you set in Dashboard -> Product
+      shouldPresentPaywall.current =
+        profile?.accessLevels?.premium?.isActive || false;
+
+      const isPremium = await getIsPremium();
+      if (isPremium !== shouldPresentPaywall.current) {
+        setIsPremium(shouldPresentPaywall.current);
+      }
+    });
+
+    return () => {
+      adapty.removeAllListeners();
+    };
+  }, []);

  const init = async () => {
    sessionViews.current = await getTodayViews();
    lastViewedAt.current = await getLastViewedAt();
+    shouldPresentPaywall.current = !(await getIsPremium());

+    try {
+      // do not await, as it's not critical for the app to work
+      adapty.getProfile().then(profile => {
+        const isSubscribed = profile?.accessLevels?.premium?.isActive || false;
+        if (isSubscribed !== shouldPresentPaywall.current) {
+          setIsPremium(isSubscribed);
+          shouldPresentPaywall.current = isSubscribed;
+        }
+      });
+    } catch (error) {
+      console.error('failed to receive user profile', error);
+    }
+
    await fetchMore();
  };

  const removeCard = async (card: CardInfo, index: number) => {
    sessionViews.current += 1;
    recordView(sessionViews.current);

    if (index === TOLERANCE) {
      fetchMore(card);
    }
  };

  const fetchMore = async (currentCard?: CardInfo) => {
    const images = await fetchImages(page.current);

    const result = images.map<CardInfo>(value => {
      return {
        type: 'image',
        // // CatAPI returns duplicates, so we mark them with page number, so React keys are unique
        id: page.current + '__' + value.id,
        url: value.url,
      };
    });

    const requestedAtIndex = cards.findIndex(v => v.id === currentCard?.id);
    const newCards = [...result, ...cards.slice(0, requestedAtIndex)];

    // insert a paywall at the third position, if user is not subscribed
    if (shouldPresentPaywall) {
      const paywallPromise = adapty.getPaywall(MY_PAYWALL_ID);
      const productsPromise = paywallPromise.then(paywall =>
        adapty.getPaywallProducts(paywall),
      );

      // viewing is from the last to first
      const index =
        newCards.length - Math.max(PAYWALL_POSITION - sessionViews.current, 0);
      newCards.splice(index, 0, {
        type: 'paywall',
        id: 'paywall_' + page.current,
        paywall: paywallPromise,
        products: productsPromise,
      });
    }

    page.current += 1;
    setCards(newCards);
  };

  return {
    cards,
    init,
    fetchMore,
    removeCard,
  };
}