{"id":15832950,"url":"https://github.com/davealdon/react-native-homekit-example","last_synced_at":"2025-04-05T07:42:05.613Z","repository":{"id":105659072,"uuid":"480532633","full_name":"DaveAldon/react-native-homekit-example","owner":"DaveAldon","description":"📱 ❤️ 🏠 How to integrate HomeKit with React Native","archived":false,"fork":false,"pushed_at":"2024-08-03T17:33:11.000Z","size":6431,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T22:38:48.462Z","etag":null,"topics":["homekit","homekit-accessory","homekit-accessory-protocol","homekit-api","homekit-bridge","homekit-controller","homekit-device","react","react-native","react-native-app","swift","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DaveAldon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-11T20:00:48.000Z","updated_at":"2025-02-26T03:43:40.000Z","dependencies_parsed_at":"2024-08-03T18:44:31.430Z","dependency_job_id":"088b9f84-1a2c-4f4b-91ee-b83783c3eb98","html_url":"https://github.com/DaveAldon/react-native-homekit-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveAldon%2Freact-native-homekit-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveAldon%2Freact-native-homekit-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveAldon%2Freact-native-homekit-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DaveAldon%2Freact-native-homekit-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DaveAldon","download_url":"https://codeload.github.com/DaveAldon/react-native-homekit-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305897,"owners_count":20917202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["homekit","homekit-accessory","homekit-accessory-protocol","homekit-api","homekit-bridge","homekit-controller","homekit-device","react","react-native","react-native-app","swift","typescript"],"created_at":"2024-10-05T13:01:09.824Z","updated_at":"2025-04-05T07:42:05.592Z","avatar_url":"https://github.com/DaveAldon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## How to Combine HomeKit with React Native in 10 Minutes\n\n\u003cp\u003e\n\u003cimg width=\"100%\" src=\"./resources/title.png\"\u003e\n\u003c/p\u003e\n\nWhether you’re developing the next home automation app or a new hardware device for your home, if you want it integrated with HomeKit and Siri, the developer resources out there are pretty slim. Apple provides their API docs, which are a great starting point. However, there’s a huge gray area if you don’t already understand how services, accessories, and characteristics work. And to make matters worse, if you want to do all of this in React Native, you’ll find neither official documentation, nor updated/documented 3rd party libraries.\n\nWith no easy tutorials, drag-and-drop libraries, or hand holding, I took the plunge. In this post, I’m sharing what I learned over a long weekend, so that it only takes you 10 minutes.\n\n### Step 1: Project Setup\n\nCreate a new React Native project using the TypeScript template:\n`npx react-native init MyApp --template react-native-template-typescript`\n\n**For M1 Users:**\nIn the package.json file I like to preemptively add some helper commands that I know I’m going to need, because Xcode and Pods are fickle. I also replaced the ios command to just open the project directly in Xcode, because currently running a React Native iOS project from the terminal on an M1 is nebulous and error-prone:\n\n```bash\n\"clean-ibuild\": \"cd ios \u0026\u0026 rm -rf Pods Podfile.lock \u0026\u0026 pod deintegrate \u0026\u0026 pod setup \u0026\u0026 pod install \u0026\u0026 cd ..\"\n\"ios\": \"xed -b ios\"\n```\n\n### Step 2: HomeKit Capabilities\n\nOpen up the Xcode project and go to your `project’s name -\u003e Targets -\u003e Signing and Capabilities -\u003e Plus Button -\u003e Add the HomeKit integration`\n\n\u003cp\u003e\n\u003cimg width=\"100%\" src=\"./resources/capability.png\"\u003e\n\u003c/p\u003e\n\nThis is necessary so that your app can access your HomeKit data. The app will then be able to ask for HomeKit permission the first time you run it.\n\nWhile you’re here, make sure to assign a Development Team to your app.\n\n\u003cp\u003e\n\u003cimg width=\"100%\" src=\"./resources/change_team.png\"\u003e\n\u003c/p\u003e\n\nThen build the app in Xcode and make sure to run it on a physical device. Adding HomeKit accessories doesn’t work in a simulator. You’ll get some nonsense error like this that Apple doesn’t have any docs to explain:\n\n`sendMessageWithDictionary: Failed to get remote object proxy: Error Domain=NSCocoaErrorDomain Code=4097 \"connection to service named com.apple.rtcreportingd\" UserInfo={NSDebugDescription=connection to service named com.apple.rtcreportingd}`\n\n### Step 3: HomeKit Simulator\n\nDownload the HomeKit Accessory Simulator. This tool is really great, and allows us to simulate any type of home device we want and control it! Once you add the HomeKit capability, there will be a button to go to additional dev downloads:\n\n\u003cp\u003e\n\u003cimg width=\"100%\" src=\"./resources/download_homekit.png\"\u003e\n\u003c/p\u003e\n\nGo to that page, and be immediately confused because there’s nothing in there called “HomeKit Simulator.” But don’t worry, it’s inside this package:\n\n\u003cp\u003e\n\u003cimg width=\"100%\" src=\"./resources/additional_tools.png\"\u003e\n\u003c/p\u003e\n\nOnce downloaded, open up the simulator and add a new accessory (bottom left corner there’s a plus sign). Call it whatever you like:\n\n\u003cp\u003e\n\u003cimg width=\"100%\" src=\"./resources/accessory.png\"\u003e\n\u003c/p\u003e\n\nThen add a Service at the bottom. Call this whatever you like as well.\n\n\u003cp\u003e\n\u003cimg width=\"100%\" src=\"./resources/service.png\"\u003e\n\u003c/p\u003e\n\nAs long as your computer and phone are on the same network, the simulator should broadcast the device correctly.\n\n### Step 4: Swift Setup\n\nWe’re now going to go through the process of making a Native Module, which is how React Native interacts with our own native code made with Swift or Kotlin. In Xcode, create a new Swift file called **RCTHomeKitModule**. The name can be whatever you like, but I like using this pattern so that I know what files React Native is meant to consume.\n\n\u003cp\u003e\n\u003cimg width=\"50%\" src=\"./resources/swift.png\"\u003e\n\u003c/p\u003e\n\nYou’ll then be asked if you want to automatically create an Objective-C bridging header file. We absolutely want this, so accept:\n\n\u003cp\u003e\n\u003cimg width=\"50%\" src=\"./resources/bridge.png\"\u003e\n\u003c/p\u003e\n\nThen create an m file, or Objective-C file, with the same name. Your project structure should look like this:\n\n\u003cp\u003e\n\u003cimg width=\"50%\" src=\"./resources/project.png\"\u003e\n\u003c/p\u003e\n\n### Step 5: Basic HomeKit Action\n\nNow let’s add a single interaction with the HomeKit API. There are a million ways we could interact with this, but for the sake of simplicity, this post will just cover one. We’re going to add a function that brings up the iPhone HomeKit accessory QR scanner, which adds a device to our home. In `RCTHomeKitModule.swift`, add this in place of everything:\n\n```swift\nimport HomeKit\n\n@objc(HomeKitModule)\nclass HomeKitModule: RCTEventEmitter {\nvar homeManager = HMHomeManager()\n\n// Specifically for React Native to know what the intention of our Native Module is (our init method is calling UI)\n@objc override static func requiresMainQueueSetup() -\u003e Bool {\n    return true\n}\n\n// A necessary override which we won’t directly use, however this array holds the names of HomeKit events emitted that we can capture another time.\noverride func supportedEvents() -\u003e [String]! {\n    return [\"findNewAccessory\"]\n}\n\n// The function in question. When called, it will add a device you scan to your default home\n@objc(addAndSetupAccessories:withResolver:withRejecter:)\nfunc addAndSetupAccessories(name: String, resolve: @escaping(RCTPromiseResolveBlock), reject: @escaping(RCTPromiseRejectBlock)) -\u003e Void {\n    homeManager.homes[0].addAndSetupAccessories(completionHandler:\n        { error in\n            if let error = error {\n\n            } else {\n                resolve(\"\")\n            }\n        })\n    }\n}\n```\n\nNext, replace everything in the `RCTHomeKitModule.m` file with this:\n\n```objc\n#import \u003cReact/RCTBridgeModule.h\u003e\n#import \u003cHomeKit/HomeKit.h\u003e\n#import \"React/RCTEventEmitter.h\"\n\n@interface RCT_EXTERN_MODULE(HomeKitModule, RCTEventEmitter)\n\nRCT_EXTERN_METHOD(addAndSetupAccessories: (NSString \\*)name withResolver:(RCTPromiseResolveBlock)resolve withRejecter:(RCTPromiseRejectBlock)reject)\n\n@end\n```\n\nThis exports the swift function so that it’s visible to React Native. Finally, replace everything in your `.h` bridging header file with this:\n\n```objc\n#import \u003cReact/RCTBridgeModule.h\u003e\n#import \u003cReact/RCTViewManager.h\u003e\n#import \u003cReact/RCTLog.h\u003e\n#import \u003cReact/RCTEventEmitter.h\u003e\n```\n\nThis exposes our public headers to swift. We’re all done on Xcode’s side.\n\n### Step 6: Native Module Interaction\n\nSwitch back to your React Native project and open up `ios/reactNativeHomeKitExample/Info.plist`. Add this to the list of keys:\n\n```xml\n\u003ckey\u003eNSHomeKitUsageDescription\u003c/key\u003e\n\u003cstring\u003eHomeKit Example permission request message\u003c/string\u003e\n```\n\nThis registers the app’s ability to ask permission to access the HomeKit capability we added earlier in Xcode. The string message can be whatever you like for now.\n\nNext, create a new file in `src/HomeKitModule/HomeKitModule.tsx`. Place this inside the file:\n\n```typescript\nimport {NativeModules} from 'react-native';\n\ntype HomeKitType = {\n  addAndSetupAccessories(name: string): Promise\u003cany\u003e;\n};\n\nconst {HomeKitModule} = NativeModules;\n\nexport default HomeKitModule as HomeKitType;\n```\n\nThis adds some basic types to our Native Module, based on what’s exported in the Objective-C file we made in Xcode. The promise returned by `addAndSetupAccessories` actually has a very specific type that I included in the repo, but for the sake of time, we’re just going to use any in this snippet. This small project isn’t going to do anything with the result of the promise anyway.\n\nNext, in `App.tsx` replace everything with this:\n\n```typescript\nimport React from 'react';\nimport {SafeAreaView, Text, TouchableOpacity} from 'react-native';\nimport HomeKitModule from './src/HomeKitModule/HomeKitModule';\n\nconst App = () =\u003e {\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cTouchableOpacity\n        onPress={async () =\u003e {\n          await HomeKitModule.addAndSetupAccessories('');\n        }}\n        style={{\n          backgroundColor: 'gray',\n          padding: 10,\n          margin: 10,\n          borderRadius: 10,\n        }}\u003e\n        \u003cText\n          style={{\n            color: 'white',\n          }}\u003e\n          {' '}\n          + Add HomeKit Device\n        \u003c/Text\u003e\n      \u003c/TouchableOpacity\u003e\n    \u003c/SafeAreaView\u003e\n  );\n};\n\nexport default App;\n```\n\nThis adds a simple button that will call on the Native Module function we created.\n\n### Step 7: Add Your Accessory!\n\nRun the app in Xcode, making sure that you’re targeting a **physical** device! When the app loads, you should see a prompt to access your home data. After you accept, tap the `Add HomeKit Device` button and you should see this prompt:\n\n\u003cp\u003e\n\u003cimg width=\"50%\" src=\"./resources/add_accessory.png\"\u003e\n\u003c/p\u003e\n\nHold your camera over the QR code in your HomeKit simulator here:\n\n\u003cp\u003e\n\u003cimg width=\"50%\" src=\"./resources/qr.png\"\u003e\n\u003c/p\u003e\n\nAnd then verify that the device was added by checking the official Home app on your phone. If it’s there, congratulations! Your simulated device is now a part of your home, and controllable by your phone! Play around with it in the Home app, and see how the HomeKit simulator characteristic values change live!\n\n\u003cp\u003e\n\u003cimg width=\"50%\" src=\"./resources/final.jpeg\"\u003e\n\u003c/p\u003e\n\n### What’s Next\n\nThis post shows the starting point and how to get the hard parts of HomeKit + React Native integration out of the way. In the future, we can build off of this topic and delve deeper into more advanced accessory management, characteristic updates, zone/room handling, filtering on manufacturers, and more!\n\n### Troubleshooting\n\nIn this repo I use a `patch-package` patch for React Native to unset `npm_config_prefix` due to M1 build issues. If you're using an Intel Mac and are having build issues, try disabling the patch first.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavealdon%2Freact-native-homekit-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavealdon%2Freact-native-homekit-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavealdon%2Freact-native-homekit-example/lists"}