Milestones

• get steps count in the app
• make steps widget

Get Steps Count in the App

• get custom development build working
• get health kit data working
• create navigation for going to the steps tab in the app

Custom Development Build

• We are going to need to extend expo to use some custom native code
  • see steps here: https://github.com/agencyenterprise/react-native-health/blob/master/docs/Expo.md
  • and here: https://www.notjust.dev/projects/step-counter/apple-healthkit
  • we need to make a development build
    • this is great and fully supported by expo
    • we can still use CNG (Continuous Native Generation) with this aka the ability to change javascript code and not need to rebuild the native parts of the app

Make Steps Widget

• research how to create widget that displays the step count and create next steps plan

Building A Widget Alongside CNG?

• CNG (Continuous Native Generation) is a feature in Expo where it manages the native code so much so that you dont even need to keep it in version control. will that be possible while building a widget?
  • Here Evan, creator of Expo Router explains how he did just this!
    • article: https://evanbacon.dev/blog/apple-home-screen-widgets
    • source code: https://github.com/EvanBacon/pillar-valley/blob/fba10cbedd593e4976ad4d1aeada1a5834f1100e/targets/widgets/widgets.swift

Notes on the above article:

• add expo-apple-targets

  • add /targets directory

  • add /targets/widgets directory

  • add /targets/widgets/expo-target.config.js file

    • something like:

      /** @type {import('@bacons/apple-targets').Config} */
      
      module.exports = {
        type: 'widget',
        name: 'My Widget',
        frameworks: ['SwiftUI'],
        colors: {
          $accent: 'steelblue',
        },
        deploymentTarget: '13.4',
      };

    • add /targets/widgets/target.entitlements

    • for code signing to work, you need to teamId to app.config.js in plugins

      {
        "plugins": [
          [
            "@bacons/apple-targets",
            {
              "teamId": "XXXXXXXXXX"
            }
          ]
        ]
      }

• with expo-apple-targets in place we can run npx expo prebuild and it should build the widget

• careful of SwiftUI Preview being really buggy

• setup up App Groups to share data between main app and the widget

  • in app.json:

  {
    "ios": {
      "entitlements": {
        "com.apple.security.application-groups": ["group.cogell.gym-time.data"]
      }
    }
  }

  • in /targets/widgets/expo-target.config.js:

  module.exports = {
    type: 'widget',
    ...
    entitlements: {
      'com.apple.security.application-groups': ['group.cogell.gym-time.data'],
    },
  };

  • we DONT need to tell eas about this inside app.json, because this was built into expo-apple-targets and it will automatically add the entitlements to the widget, thank you Evan!

  {
    "extra": {
      "eas": {
        "projectId": "XXXXXXXX"
        "build": {
          "experimental": {
            "ios": {
              "appExtensions": [
                {
                  "bundleIdentifier": "com.cogell.gym-time.widgets",
                  "targetName": "widgets",
                  "entitlements": {
                    "com.apple.security.application-groups": ["group.cogell.gym-time.data"]
  
                  }
                }
              ]
            }
          }
        }
      }
    }

Reference Reading

https://evanbacon.dev/blog/apple-home-screen-widgets https://github.com/bndkt/react-native-widget-extension https://github.com/gitn00b1337/expo-widgets https://docs.expo.dev/config-plugins/introduction/

References

🌱 Projects

May 22, 2023

Current things that bring me joy to work on