bndkt / react-native-app-clip

Easily add an App Clip for iOS apps built with React Native
https://bndkt.com/blog/2022/react-native-app-clip
504 stars 25 forks source link

šŸš€ Suggestions #3

Closed EvanBacon closed 2 days ago

EvanBacon commented 2 years ago

Great work on this plugin, I'm ecstatic about the progress so far! Below I've outlined some things that you can use (or ignore).

Entry Point

Two possible approaches:

App Icon

We should expose the upstream plugin in @expo/config-plugins but since we don't, you can use this to get all of the dynamic values we support in the app.json icon property (resizing, urls, caching between runs, etc).

Entitlements

Here is an example of adding a safe modifier for the entitlements file, this is good because it means users can easily extend or add values to the template you provide. I also do the same with the custom Info.plist. Ultimately this will scale nicely and help end-users.

It can be used like this.

Further, I recommend using this static value $(AppIdentifierPrefix)$(CFBundleIdentifier) for com.apple.developer.parent-application-identifiers so users can more easily change the bundle identifier. Apple automatically expands this value during code signing. Ref: used this to simplify some other plugins.

Accent Color

Here's an example for adding the accent color the color getter probably doesn't work. For that you can try this helper from react-xib.

Name / Defaults

Docs

We added support for running app clips with expo run:ios --scheme a few months ago so this should make development a bit easier. If you find an issue with this workflow please let me know, Xcode is no fun.


Again, great work! Excited to follow the progress of this project!

bndkt commented 2 years ago

Thanks for the great suggestions, Evan! I completely agree that having the same entry point and then distinguishing between App Clip or not within the components is more elegant. As this is quite a change to how people implement the plugin, I tackled this one today and already released an update with the new behavior so that people do not get started in the "wrong" direction.

I also added instructions to the docs on how to run using expo run:ios --scheme, which really works like a charm. The only issue seems to be that you have to run the full app one time (without specifying --scheme) before you can run the App Clip. And the Simulator doesn't open the App Clip, you have to go to the home screen in Simulator and open it yourself.

wkozyra95 commented 2 years ago

Hi, I would recommend moving that config from extra field into your plugin, it would simplify setup for your users significantly. You can check example of that in e.g. https://github.com/OneSignal/onesignal-expo-plugin/blob/main/support/eas/getEasManagedCredentialsConfigExtra.ts and if you want to support configuring any of those values by users you can just make them arguments of the plugin

nandorojo commented 2 years ago

To echo some suggestions here, I like the idea of putting the extra.eas code config into your plugin's options:

{
  "expo": {
    "name": "my-app",
    "plugins": [
      [
        "react-native-app-clip",
        {
          "name": "My App Clip",
          "extension": {
            "targetName": "my-appClip",
            "bundleIdentifier": "com.example.my-app.Clip",
            "entitlements": {
              "com.apple.developer.parent-application-identifiers": "com.example.my-app",
              "com.apple.developer.on-demand-install-capable": true
            }
          }
        }
      ]
    ]
  }
}

Btw ā€“ is it necessary to specify the entitlements there, or should the plug-in do this under the hood?

bndkt commented 2 years ago

@wkozyra95 @nandorojo thanks for your input! This extra config is actually what I'd like to tackle next as it annoys me and I'd like react-native-app-clip to add an App Clip "with one additional line of configuration only". The plugin is actually already generating the extra config automatically inspired by the OneSignal plugin you also mentioned @wkozyra95 - see here. And it is also handling the entitlements internally (see here).

In the simplified tutorial I wrote, this config is actually left out, and running the App Clip in Simulator works fine without it.

BUT: It seems to me this additional configuration is still required right now if you want to build for the App Store. Because it is used by EAS Build to determine which provisioning profiles are required from your Apple Developer account and it seems to me the app config that is injected by the plugin is coming too late for that. I did however just test a little bit again and if I run "expo prebuild" before and then run "eas build", it now which provisioning profiles to use. I'll test a little bit more and report back.

This is how the credentials need to look.

image
wkozyra95 commented 2 years ago

I see, the problem here https://github.com/bndkt/react-native-app-clip/blob/1f9f1c7edecc92e3f1c5a2cf8185a541080f8a90/src/withAppClipAppConfig.ts#L6 is that you are doing it inside mod so those values are not applied if you run e.g. expo config, but if you drop the mod part e.g https://gist.github.com/wkozyra95/d6a769ba09824959837cdd3d146feffc (not tested that) it should work without extra field in app.json

just FYI extra field is not needed for the build itself, it's only there to pass information to eas-cli, so it can generate correct provisioning profiles for all targets

bndkt commented 2 years ago

Ahhh, that simple! Thank you so much @wkozyra95, I just tested it and released 0.0.10 with the fix, where I also removed the now unnecessary extra config from the instructions.

Noitidart commented 1 year ago

This is super cool thanks for this awesome library. I heard Android has something similar called "Instant App"s is that something on mind?

Also is there something as easy as this, to make home screen, and lock screen, widgets on iOS Android? lol this is so awesome, thanks again!

nathan-ahn commented 2 days ago

Thank you for the suggestions @EvanBacon! With the release of v0.5.0 and its support for separate .clip.ts file bundling, I believe every suggestion here has been incorporated into this package (or some alternative).

nathan-ahn commented 2 days ago

@Noitidart There's no immediate plans for Android "Instant App" support, but a PR would be welcome! The amount of work required would likely be similar to the scope of this entire package, so Instant Apps may be better as a separate package.

You can check out Benedikt's react-native-widget-extension for a similar package that adds support for widgets and live activities for iOS.