.clip extension questions

[Kaiffa]

Hi,

I have some questions regarding the .clip extension (https://github.com/bndkt/react-native-app-clip?tab=readme-ov-file#app-clip-file-extension-clip)

Once we add the .clip files in the project, do we have to build the app 2 times before eas building? Once with BUILDING_FOR_APP_CLIP being 0, once with 1?
Can you use .clip for the assets folder or is it just for tsx components?
Do you maybe have a small example project with .clip used, and some instructions how to correctly build it for apple store submission with eas build/submit?
Because I get some weird behaviors when trying to use the .clip, like running the app with npx expo run:ios runs the full app but it thinks it's the clip version, and eas build does the same. Just want to see if I'm doing something wrong, because the instructions are not very detailed.
(I'm using the latest version of expo and all libraries, expo-doctor returns no issues)

Thanks

[nathan-ahn]

Hi Kaiffa!

Thanks for your questions! I'll work on the docs to help clarify the unclear usage here, but until then I'll give you some quick answers for your questions.

You don't need to change anything with how you build. BUILDING_FOR_APP_CLIP is automatically populated by this library within the XCode build step (only for App Clip). So, you can continue just creating a singular build which contains both the app and App Clip.
I haven't tried it, but I don't see any reason why .clip couldn't be used with assets.
I'll clarify the existing instructions to better explain that there's no additional steps to build for Apple App Store submission, as long as you've modified your metro.config.js. Works on EAS with the exact same workflows. I'd recommend checking the usage in the source code here.
That's strange! Are you potentially accidentally importing the .clip file directly? For example, if index.ts were to accidentally use import isClip from "./isClip.clip"; (incorrect) instead of import isClip from "./isClip"; (correct) you would likely see this effect.

Let me know if there's anything else I can clarify!

[Kaiffa]

Thanks for reply!

So the issue was not with the import (I was using "import { isClip } from "react-native-app-clip";") The reason it was not working correctly was because I tought BUILDING_FOR_APP_CLIP was something we had to assign into our enviroments, not that it was automatically populated. So I used a local EXPO_PUBLIC_BUILDING_FOR_APP_CLIP insted of BUILDING_FOR_APP_CLIP. After switching back it works fine now.
The only issue is that when pushing on test flight, the app clip crashes as soon as I open it. The full app works fine, just the app clip crashes in test flight.
But when running locally in simulator, both work fine.

Any ideas why this would happen?

Not sure if relavent, but I'm using "jsEngine": "jsc" and "deploymentTarget": "16.0" to meet app size requirements.

[Kaiffa]

Ok, nevermind 😅

Didn't put the App Clip Invocation Url in the App Store Connect. After adding that it works.

[nathan-ahn]

Ah gotcha! Glad it's working now. The docs definitely need to be clarified to make clear that BUILDING_FOR_APP_CLIP is automatically populated. Thanks for creating this issue!

Also, yep, that invocation URL issue is a massive pain. I believe Evan Bacon found the root issue in the React Native directory, but I don't happen to know the status on a fix there. I'll likely add a Known Issues section to the docs to try to help save time for anyone else who encounters that problem.

[vishaljak]

Hi @Kaiffa

I am trying to add an app clip to my app as well but keep running into some issues. Would you be able to help me since you have been to get this working?

Here are the questions I have:

1. Where do you define the .clip files? could they be any files? or they need to have the same name as existing files for something like that?
2. How do you test this? For example, I have added an index.clip.tsx file for the app clip but whenever I run the app clip using the instructions in the README.md, it just runs the main app code but the app is actually the app clip.

I am sure I am missing something here. I have a few more issues but let's start with this

Would highly appreciate your help as I have spent a lot of time on this but still haven't got it working. Thanks

[Kaiffa]

The .clip files should be defined right next to the main file and have the same name. I only used the .clip files in my components folder, not in the app folder (if you are using expo router) because it won't work otherwise I think. Not sure if .clip would work for any other files (like assets, for example).

After that I just do what the README says:

Generate the native code:
npx expo prebuild

Run the App Clip scheme (Release mode tends to be more reliable):
npx expo run:ios --configuration Release --scheme

After installing the App Clip scheme, you can launch the App Clip:
xcrun simctl launch <DEVICE-UUID> <APP_CLIP_BUNDLE_ID>

Maybe @nathan-ahn has more info that could be helpful. Please chime in if I missed something.

[vishaljak]

I appreciate your response 🙏🏻

Where exactly should I add the initial .clip file? I currently have one in my app folder and it's called index.clip.tsx

[nathan-ahn]

Hi @vishaljak!

I'd generally recommend against an initial .clip file. Instead, just import a root component in your index.ts file. That root component would then have normal and .clip variants. If you're tempted to replace the entire application with a .clip file, then I'd recommend taking a look at Evan's approach to App Clips (linked below).

In general, .clip is an advanced optimization feature to reduce bundle size. If you're prototyping or just creating a demo App Clip, I'd recommend avoiding .clip due to the added complexity.

A few clarification answers:

• You should define your .clip files in the same way you define .native, .web or .ios files (at the same level as the base file it's replacing)
• Yep @Kaiffa 's response for testing sounds right. I'd also recommend testing on TestFlight for good measure.
• .clip should work for assets as well!
• Make sure you've followed the instructions and configured your metro.config.js

I also haven't tested the .clip extension with Expo Router. If you're using Expo Router, I'd recommend taking a look at Evan Bacon's work on App Clip in Expo Router.

[vishaljak]

Thanks @nathan-ahn

I am using expo-router. I'll give your approach a go

One more question with EAS build, I keep getting entitlement errors while building. One of the errors says my provisioning profile doesn't support associated-parent-app-identifier and other two errors are along the same lines (associated-appclip-identifier, etc)

Are you aware of this already or you need me to provide more info?

Thanks

[nathan-ahn]

@vishaljak I'd recommend double checking the steps described here in the README as well as a few debugging options in this related issue.

[vishaljak]

@Kaiffa one more question, did you ever run into #65? If not, what steps did you follow to build for test flight?

[nathan-ahn]

Clarified the README in #71. If you have any further questions, please open a new issue.