Tutorial: How To Add an iOS App Clip to a React Native App

After releasing my Expo Config Plugin react-native-app-clip yesterday, I wanted to create a little tutorial on how to use it in the most straightforward case. All the details can be found in the package’s readme, but for some people, it might be valuable to see a step-by-step guide. This tutorial assumes you’re creating a brand new React Native app using Expo. It does not cover building for the App Store, I’ll cover this in a separate post.

The plugin can be found on GitHub and NPM. Please feel free to leave feedback, make suggestions, or report bugs in the issues. Or reach out to me on Twitter.

First, create a new Expo app and choose the blank (TypeScript) template.

npx create-expo-app clipper

Then install react-native-app-clip:

npx expo install react-native-app-clip

Make sure that the plugin has been added to the plugins section of app.json:

"expo": {
  "plugins": ["react-native-app-clip"]
}

Within App.tsx, you can now use the boolean prop “isClip” to determine whether your app is running as an App Clip. For a simple demo, it could look something like this:

export default function App({ isClip }: { isClip: boolean }) {
  return (
    <View style={styles.container}>
      {isClip ? (
        <Text>AppClip</Text>
      ) : (
        <Text>Open up App.tsx to start working on your app!</Text>
      )}
    </View>
  );
}

Now run eas build:configure to create the eas.json configuration file in your project.

Next, you need to run the full app in the Simulator before you can run the App Clip (this is only true during development): npx expo run:ios

Now you’re ready to build the App Clip. Run npx expo run:ios --scheme and select the scheme that ends with “Clip”. Attention: After building, the Simulator will open the full app again. Within the Simulator, you need to go to the home screen and click on the “App Clip” icon next to your app’s icon.