New Architecture Support Discussion

[hyochan]

Announcing the Migration of react-native-iap to an Expo Module for Improved Maintenance and Compatibility

Hello React Native developers!

Today, I would like to share some thoughts after deep consideration regarding the maintenance of the react-native-iap module.

TL;DR: We plan to migrate the react-native-iap module to an Expo module to align with the new industry standard, reduce maintenance costs, simplify the project, and improve compatibility.

To briefly summarize, we plan to migrate the existing react-native-iap module to an Expo module instead of a pure React Native module. The reasons are as follows:

1. New Industry Standard: With the release of React Native version 0.74, it seems that the React Native official website encourages starting projects with Expo. The method to start a project with react-native-cli is somewhat hidden and requires some effort to find. This suggests that Expo projects are expected to become the industry standard in the future.

2. Cost-Effective Maintenance: Developing as an Expo module makes it much easier to manage native modules. Maintainers of React Native modules have had to invest a lot of time. For react-native-iap alone, we had to periodically update as React Native upgraded, and we also had to provide new features such as hooks. Additionally, we had to migrate according to native framework updates. For Android, there were many changes as billingclient upgraded. For iOS, we provided StoreKit and even supported StoreKit2. To provide these updates more efficiently, we also migrated to preferred languages for native development. For iOS, we moved from Objective-C to Swift, and for Android, from Java to Kotlin. The version updates of Kotlin alone often broke project dependencies (incompatible version of Kotlin #2640, Update Kotlin Version In Docs  #2536, etc.). We also supported Expo config plugins to make it compatible with Expo (feat: add expo config plugin #2218). Now, we are at a point where we need to support the new architecture of React Native. After much effort to support the New Architecture, I believe that if we newly develop as an Expo module, we can greatly reduce these costs. Especially, Expo modules are "renderer-agnostic", meaning maintainers do not need to consider whether it is the New Architecture or Old Architecture when developing. Additionally, Expo modules can be easily installed with the npx install-expo-modules@latest command (https://docs.expo.dev/modules/overview).

3. Simpler Project: Following from reason 2, the current react-native-iap project has become very heavy and complex due to the effort to support multiple modules. We aim to simplify it based on the design of Expo Modules. Furthermore, we plan to provide easier and more convenient tutorials for all React Native developers starting with IAP.

4. Better Compatibility: By migrating to Expo Modules, we expect to resolve many compatibility issues we have faced over time.

These changes are expected to bring great advantages not only in developing the module but also in maintaining it, allowing many maintainers, including myself, to manage the module with much less burden.

As a potential downside, compatibility will follow Expo's support. Platforms not supported by Expo, such as Windows or Amazon, may not be supported. However, we can support them as Expo provides support.

I am sharing these thoughts to inform you of my current plan and to gather additional opinions from many of you. I expect to complete the work and release the expo-module in about 2 months.

Thank you for reading.

[MarkCSmith]

What would a migration of react-native-iap to an Expo module mean for existing React Native CLI projects? Does using a mix of Expo and React Native modules work well?

[hyochan]

Expo module is compatible with react-native cli project.
You can simply install expo-modules with npx install-expo-modules@latest command.

Here is the documentation.

[MarkCSmith]

Thanks for your response and for pointing to the documentation. I do not have any experience with Expo or Expo modules, so I will trust the maintainers of this project that this is a good choice. The most important thing is to have an IAP module that works reliably and minimizes platform differences (Android + iOS).

[appideasDOTcom]

I agree with the move. I just wish that I needed it "in about 2 months" instead of today. :-)

I had significant issues attempting to update my project from Expo 50 to 51, so I'm stuck there until I can take some time to unravel and/or rework a couple things. I presume that updating to the Expo module version of this, when it's available, will require the latest version of Expo?

[hyochan]

This sounds crucial. I hope I can help!

Regarding the question, "Will it require the latest version of Expo?" I'm not entirely sure, but I think Expo is quite well backward compatible if you are not using the bare workflow. They might deprecate some APIs, but I don't think these require crucial or urgent fixes.

[Jahanzeb009]

Excellent initiative!

[dev2xl]

Hello @hyochan do you have an estimated release date for this? I'm hoping to use this library after the migration. Thanks!

[hyochan]

I just posted in #2754 (comment). I think I might finish the minimal version by mid to late August.

[mym0404]

It is unfortunate that there are currently three ways to write native libraries: old architecture, new architecture, and Expo module API.

Honestly, while I understand that Expo is recommended as a good way to start with React Native, I'm still not sure if libraries should also be written using the Expo module API. This may be because I have not yet seen examples of major libraries written with the Expo module API.

It seems the React Native team does not provide clear guidance on which method to stick to, and the scattered documentation only serves to confuse developers.

Of course, I believe that the API and developer experience (DX) perspective of the Expo module API are quite excellent.

Separate from that, although there is a one-line command to make Expo modules usable in bare React Native projects, I think this process could be as much of an obstacle for some as migrating from the old architecture to the new architecture.

Naturally, I understand that the decisions made by the creators of these libraries are most important to the libraries themselves.

https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0759-react-native-frameworks.md#what-do-we-recommend-to-react-native-library-developers

[hyochan]

I'm having quite a good time using the Expo module API. The documentation is a bit weak, but as time goes by, I'm finding it really enjoyable. The modules are very well synced with the native side during development. Of course, I've faced some issues, such as functions that I previously implemented not working on another day. I found that I couldn't change some default configs that the Expo project provides to the module (such as iOS version in podspec) in order to make the module work concurrently when implementing a standalone library.

Also, I have a question about your comment below:

"Separate from that, although there is a one-line command to make Expo modules usable in bare React Native projects, I think this process could be as much of an obstacle for some as migrating from the old architecture to the new architecture."

How could a one-line command cause issues with the old and new architecture?

[mym0404]

Migrating to a new architecture was just a metaphor.

I meant that integrating an Expo module package into a bare React Native project can sometimes be problematic.

This is because there shoudn't be a magic in the Expo module integration CLI. It needs to modify several configuration files in the native project, like AppDelegate.

If a beginner React Native developer blindly follows the setup guide and changes their native files, they might end up confused.

However, in my opinion, this shouldn’t be a problem. Never mind!

[raffiniert]

also eagerly awaiting this. Thank you so much for your efforts!

[hyochan]

Thank you all for your interest and support. I anticipate that the basic migrations will be completed by mid to late August. As you know, testing in-app purchases has been challenging, with inconsistent results and frequent delays. The testing environment is less than ideal, which has extended the time required. Testing is taking significantly longer than coding.

For this migration, I will only support iOS from StoreKit 2 and Android from BillingClient version 7 onward. Initially, the release will focus on loading products and subscriptions, making purchases, and handling acknowledgments or consumptions. While other functionalities like getAvailablePurchases and getHistories have also been migrated, they require further testing. I plan to prioritize the main features first and gradually test additional functionalities as time allows. Documentation will be worked on afterward, and I also aim to improve the test codes over time.

Additionally, during the code revision process, I identified several complex or messy areas. This time, I hope to consistently improve and maintain the code without getting tired, working diligently even on weekends. If the in-app functionality is not just a one-time feature but a crucial part of your app that requires continuous stabilization and development, please consider supporting me through buymeacoffee. Your contributions would greatly help maintain this open-source project. Individual sponsorship starts at $25, and corporate sponsorship starts at $100, renewed monthly. Your support would be greatly appreciated.

[drmark1989]

waiting as well :)

[n8udd]

Please don't take this as a "why isn't this ready" kind of comment.

I'm working on my first RN app, and was planning on using Glassfy, but they're shutting down.

I'm now going to use this library, but was wondering whether I'm better off waiting a few weeks untli this is released as an Expo module.

Will it make my life easier in the long term to hold off installing now?

[fa2id]

@hyochan Hi, thanks for the library and for supporting the recent upgrades! Since it's almost the end of Aug, could you please let us know when you expect this library to support Expo 51?

We are seeing issues when building the app.

Example:
`* What went wrong:
Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.

Could not resolve all dependencies for configuration ':app:debugCompileClasspath'.
Could not resolve project :react-native-iap.
Required by:
project :app
> The consumer was configured to find a library for use during compile-time, preferably optimized for Android, as well as attribute 'com.android.build.api.attributes.AgpVersionAttr' with value '8.2.1', attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'debug', attribute 'org.jetbrains.kotlin.platform.type' with value 'androidJvm'. However we cannot choose between the following variants of project :react-native-iap:
- amazonDebugApiElements
- playDebugApiElements
All of them match the consumer attributes:
- Variant 'amazonDebugApiElements' capability MyApp:react-native-iap:unspecified declares a library for use during compile-time, preferably optimized for Android, as well as attribute 'com.android.build.api.attributes.AgpVersionAttr' with value '8.2.1', attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'debug', attribute 'org.jetbrains.kotlin.platform.type' with value 'androidJvm':
- Unmatched attributes:
- Provides attribute 'com.android.build.api.attributes.ProductFlavor:store' with value 'amazon' but the consumer didn't ask for it
- Provides attribute 'com.android.build.gradle.internal.attributes.VariantAttr' with value 'amazonDebug' but the consumer didn't ask for it
- Provides attribute 'store' with value 'amazon' but the consumer didn't ask for it
- Variant 'playDebugApiElements' capability MyApp:react-native-iap:unspecified declares a library for use during compile-time, preferably optimized for Android, as well as attribute 'com.android.build.api.attributes.AgpVersionAttr' with value '8.2.1', attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'debug', attribute 'org.jetbrains.kotlin.platform.type' with value 'androidJvm':
- Unmatched attributes:
- Provides attribute 'com.android.build.api.attributes.ProductFlavor:store' with value 'play' but the consumer didn't ask for it
- Provides attribute 'com.android.build.gradle.internal.attributes.VariantAttr' with value 'playDebug' but the consumer didn't ask for it
- Provides attribute 'store' with value 'play' but the consumer didn't ask for it
`

[SterlingVix]

Facing this exact same issue, which is what brought me here.

I think the move to Expo is a very smart one. Looking forward to a beta branch to test.

[hyochan]

Migration to expo-iap and Current Project Status

Hello, react-native-iap developers. The migration of react-native-iap to expo-iap has been delayed due to unexpected workloads, but I have made significant progress during my spare time. While there are still features like hooks that need to be migrated, I have verified that the module works correctly in the projects I have tested.

Please proceed with caution when using this module as it is still under development. I plan to continue working on documentation and completing pending tasks, but updates may not come as quickly as desired. For context, I have not used the IAP package in any app for over six years and have continued maintaining it purely for the sake of keeping the open-source community supported.

Currently, my company is in the process of winding down due to financial difficulties, and I've been experiencing burnout. Through open-sourcing, I've been reflecting on my past while seeking a broader perspective. Although this situation is challenging, it’s not overly dire. My goal was to create a sustainable business through open-source, but I’ve realized how difficult that can be.

The expo-iap package is now managed in a separate repository: https://github.com/hyochan/expo-iap. Feel free to test it, and please report any issues in the new repository. The package has also been published separately on npm: https://www.npmjs.com/package/expo-iap.

I wanted to share my current status and seek any ideas you might have. Below is a sample code I used while implementing expo-iap, which might be helpful when using the module:

import {
  endConnection,
  finishTransaction,
  getProducts,
  initConnection,
  isProductAndroid,
  isProductIos,
  purchaseErrorListener,
  purchaseUpdatedListener,
  requestPurchase,
} from 'expo-iap';
import type {
  Product,
  ProductPurchase,
  PurchaseError,
} from 'expo-iap/build/ExpoIap.types';
import type {} from 'expo-iap/build/types/ExpoIapAndroid.types';
import {Stack} from 'expo-router';
import {useEffect, useState} from 'react';
import {InteractionManager, View} from 'react-native';
import {t} from '../../../src/STRINGS';
import styled, {css} from '@emotion/native';
import {
  fetchCreatePurchase,
  fetchUserPoints,
} from '../../../src/apis/purchaseQueries';
import {useRecoilValue} from 'recoil';
import {authRecoilState} from '../../../src/recoil/atoms';
import {Button, Icon, Typography, useDooboo} from 'dooboo-ui';
import {showAlert} from '../../../src/utils/alert';

const productSkus = [
  'cpk.points.200',
  'cpk.points.500',
  'cpk.points.1000',
  'cpk.points.5000',
  'cpk.points.10000',
  'cpk.points.30000',
];

const Container = styled.View`
  background-color: ${({theme}) => theme.bg.basic};
  flex: 1;
  align-self: stretch;
`;

const Content = styled.ScrollView`
  padding: 16px;
`;

export default function App() {
  const [isConnected, setIsConnected] = useState(false);
  const [products, setProducts] = useState<Product[]>([]);
  const [userPoints, setUserPoints] = useState(0);
  const {authId} = useRecoilValue(authRecoilState);
  const {theme} = useDooboo();

  useEffect(() => {
    const getUserPoints = async () => {
      const data = await fetchUserPoints(authId!);
      setUserPoints(data || 0);
    };

    authId && getUserPoints();
  }, [authId]);

  useEffect(() => {
    const initIAP = async () => {
      if (await initConnection()) {
        setIsConnected(true);
      }

      const products = await getProducts(productSkus);
      products.sort((a, b) => {
        if (isProductAndroid(a) && isProductAndroid(b)) {
          return (
            parseInt(a?.oneTimePurchaseOfferDetails?.priceAmountMicros || '0') -
            parseInt(b?.oneTimePurchaseOfferDetails?.priceAmountMicros || '0')
          );
        }

        if (isProductIos(a) && isProductIos(b)) {
          return a.price - b.price;
        }

        return 0;
      });
      setProducts(products);
    };

    initIAP();

    return () => {
      endConnection();
    };
  }, []);

  useEffect(() => {
    const purchaseUpdatedSubs = purchaseUpdatedListener(
      (purchase: ProductPurchase) => {
        const ackPurchase = async (purchase: ProductPurchase) => {
          await finishTransaction({
            purchase,
            isConsumable: true,
          });
        };

        InteractionManager.runAfterInteractions(async () => {
          const receipt = purchase && purchase.transactionReceipt;

          if (receipt) {
            const result = await fetchCreatePurchase({
              authId: authId!,
              points: parseInt(purchase?.productId.split('.').pop() || '0'),
              productId: purchase?.productId || '',
              receipt,
            });

            if (result) {
              ackPurchase(purchase);
            }
          }
        });
      },
    );

    const purchaseErrorSubs = purchaseErrorListener((error: PurchaseError) => {
      InteractionManager.runAfterInteractions(() => {
        showAlert(error?.message);
      });
    });

    return () => {
      purchaseUpdatedSubs.remove();
      purchaseErrorSubs.remove();
      endConnection();
    };
  }, [authId]);

  return (
    <Container>
      <Stack.Screen options={{title: t('points.title')}} />
      <View
        style={css`
          align-self: stretch;
          flex-direction: row;
          padding: 8px 16px;
          align-items: center;
          gap: 12px;
          background-color: ${theme.bg.paper};
        `}
      >
        <Typography.Body2
          style={css`
            font-family: Pretendard-Bold;
          `}
        >
          {t('points.myPoints')}
        </Typography.Body2>
        <View
          style={css`
            flex-direction: row;
            align-items: center;
            gap: 4px;
          `}
        >
          <Icon name="Coins" />
          <Typography.Body2
            style={css`
              font-family: Pretendard-Bold;
            `}
          >
            {userPoints}
          </Typography.Body2>
        </View>
      </View>

      <Content>
        {isConnected
          ? products.map((item) => {
              if (isProductAndroid(item)) {
                return (
                  <View
                    key={item.title}
                    style={css`
                      flex: 1;
                      margin-bottom: 8px;
                      flex-direction: row;
                      gap: 12px;
                      justify-content: space-between;
                    `}
                  >
                    <Typography.Body2>
                      <Icon name="Coins" /> {item.title}
                    </Typography.Body2>
                    <Button
                      text={item.oneTimePurchaseOfferDetails?.formattedPrice}
                      onPress={() => {
                        requestPurchase({skus: [item.productId]});
                      }}
                    />
                  </View>
                );
              }

              if (isProductIos(item)) {
                return (
                  <View
                    key={item.id}
                    style={css`
                      flex: 1;
                      margin-bottom: 8px;
                      flex-direction: row;
                      gap: 12px;
                      justify-content: space-between;
                    `}
                  >
                    <Typography.Body2>
                      <Icon name="Coins" /> {item.displayName}
                    </Typography.Body2>
                    <Button
                      text={item.displayPrice}
                      size="small"
                      color="success"
                      styles={{
                        container: css`
                          border-width: 0;
                          width: 88px;
                          padding: 6px 4px;
                        `,
                      }}
                      onPress={() => {
                        requestPurchase({sku: item.id});
                      }}
                    />
                  </View>
                );
              }
            })
          : null}
      </Content>
    </Container>
  );
}

Lastly, thank you to Nami who've supported me over the year!

Thank you for your understanding and support.

[dmathisen]

Thanks for your amazing contributions. It's much appreciated.
For any new projects, it sounds like the recommendation is to use expo-iap, correct?

[hyochan]

@dmathisen Yes, that's correct. However, since the progress is slow, I wouldn't recommend using expo-iap just yet. That said, based on my simple tests, it seemed to work well. Moving forward, we need to continue identifying issues and go through the stabilization process.

[Moi6AP]

What should I do to run the package with expo go?

[bayramn]

I just tried it on Expo Managed Flow and it throws error for missing config plugin when trying to build dev-client:
Failed to resolve plugin for module "react-native-iap" relative to "/Users/User/ExpoApp"

[hyochan]

@bayramn Are you using react-native-iap and not expo-iap? Also, react-native-iap should work though.
Could you kindly tell your progress step by step? I am not sure without further details 🤔

[Moi6AP]

Ok, lo probare con expo-dev-client y te dire si me funciona o no, muchas gracias por hacer un paquete para expo 😭

[mym0404]

Please write with English in community. Whether using expo-dev-client isn't matter but building a standalone build(not expo go) is it.
Run your build with expo run:ios or expo run:android and start dev server with expo start -d or press s in development server menu for switching to development build mode.
Expo go is a development sandbox of Expo and is only able to contain pre-installed native packages.

[bayramn]

@hyochan yeah I mixed up both. I removed expo-iap and re-installed react-native-iap, and package works fine but couldn't make it work after spending all day on it. I looked into other issues and filled the tax and bank details for App Store but still says Invalid product ID

    `useEffect(() => {
          const initializeIAP = async () => {
          try {
            await RNIap.initConnection();
            console.log('IAP Initialized');
            // const availableProducts = await RNIap.getSubscriptions({skus: ['safarigpt_weekly_subscription']}); 
            const availableProducts = await RNIap.getProducts({skus: ['weekly_sub']});
            setProducts(availableProducts);
            console.log('Available subscriptions: ', availableSubscriptions);
          } catch (err) {
            console.warn('IAP initialization error: ', err);
          }
        };
        initializeIAP();
        return () => {
          RNIap.endConnection();
        };
    }, []);`

[hyochan]

@bayramn
FYI expo-iap module is tested in crossplatformkorea/CPK#12
Check app/(app)/settings/points.tsx