{"id":20058658,"url":"https://github.com/roboflow/roboflowexpoexample","last_synced_at":"2026-03-08T23:33:38.895Z","repository":{"id":39569665,"uuid":"484471553","full_name":"roboflow/RoboflowExpoExample","owner":"roboflow","description":null,"archived":false,"fork":false,"pushed_at":"2023-07-11T05:15:26.000Z","size":932,"stargazers_count":25,"open_issues_count":5,"forks_count":6,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-09-29T09:42:59.855Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Java","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/roboflow.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-22T14:51:56.000Z","updated_at":"2025-03-18T02:18:10.000Z","dependencies_parsed_at":"2024-11-13T13:02:57.208Z","dependency_job_id":"bbe6f145-0972-4e84-bf4b-1473642f7290","html_url":"https://github.com/roboflow/RoboflowExpoExample","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/roboflow/RoboflowExpoExample","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roboflow%2FRoboflowExpoExample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roboflow%2FRoboflowExpoExample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roboflow%2FRoboflowExpoExample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roboflow%2FRoboflowExpoExample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/roboflow","download_url":"https://codeload.github.com/roboflow/RoboflowExpoExample/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roboflow%2FRoboflowExpoExample/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30277001,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-08T20:45:49.896Z","status":"ssl_error","status_checked_at":"2026-03-08T20:45:49.525Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-13T13:02:50.877Z","updated_at":"2026-03-08T23:33:38.866Z","avatar_url":"https://github.com/roboflow.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Getting Started with Roboflow in Expo\n\n## Running the Example\n\nMake sure Expo[https://expo.dev] and CocoaPods[https://cocoapods.org] are installed.\n\n1. Clone the project.\n2. Open the project and run `expo install`\n3. Open the iOS directory in the project and run `pod install`\n4. Open `RoboflowExpoExample.xcworkspace` in Xcode\n5. Click on the project name on the left, then Signing and Capabilites, then select your team.\n6. Open `RoboflowFrameProcessorPlugin.swift` in XCode and add your apiKey, model name, and model version from Roboflow[https://roboflow.com]\n7. Run the app on a device using XCode\n\n## Expo Project Setup\n\n### Init Expo Project\n\nStart by setting up an expo project if you haven't already using the `expo init \u003cProjectName\u003e` command.\n\n### Eject Project\n\nRoboflow relies on native code which means you have to eject your expo project out of the managed workflow into the bare workflow. Note, this means you either have to use the EAS build system or compile the iOS app yourself in xcode. Eject using this command `expo prebuild`.\n\nThis will build the naive iOS and Android projects in the `ios` and `android` folders now present in your project. Roboflow only supports iOS for the time being so we will focus there first.\n\n## Native iOS Project Setup\n\n### Adding CocoaPod to Podfile\n\nRoboflow is distributed using cocoapods, a package manager for native iOS apps. In order to install the app first open the `Podfile` in the iOS directory.\n\nUnder the line that says `config = use_native_modules!` add the Roboflow pod using the line `pod 'Roboflow'`.\n\n### Change iOS target\n\nRoboflow requires a minimum iOS version of 15.4. Edit the line at the top of the `Podfile` that says `platform :ios, '12.0'` and change it to `platform :ios, '15.4'`\n\n### Installing New Cocoa Pod\n\nNext, in a terminal window, run `pod install` to install the Roboflow package into your iOS project.\n\n### Using Roboflow\n\nNow that you have Roboflow installed you can use it in any native file, the remainder of the example will focus on using Roboflow to process a camera stream using the `react-native-vision-camera` package.\n\n## react-native-vision-camera Installation\n\n### Installing Package using NPM\n\nMake sure you are in the root of your expo project (not the ios folder) and run `expo install react-native-vision-camera react-native-reanimated` to install react-native-vision-camera and its dependency react-native-reanimated.\n\n### Install Pods\n\nThese npm dependencies also come bunled with native dependencies which we must also install. Run `pod install` in the ios directory.\n\n## Using react-native-vision-camera\n\n### Setting up a Native Frame Processor\n\nreact-native-vision-camera lets you use custom frame processors to process frames in the videos tream with high performance. Roboflow should be used in a swift frame processor like the one in this example called `RoboflowFrameProcessorPlugin.swift`.\n\nYou should first open the .xcworkspace file in the ios folder in XCode for easier development on this part.\n\n### Configuring Camera Permissions\n\nIn XCode, open `Info.plist`. At the bottom click the little plus symbol while hovering over `View controller-based status bar appearance`. In the new row that appears, type `Privacy - Camera Usage Description` into the key column. Then type a custom message in the value column that will show when someone opens your app for the first time.\n\n#### Adding Frame Processor\n\nEither create a swift file called `RoboflowFrameProcessorPlugin.swift` or copy the one provided in this example. If XCode prompts you to create a bridging header file click create. Inside this frame processor we will implement roboflow for processing images in the incoming frames. First, we need to connect our swift file to the objective-c vision-camera library.\n\n#### Setup Headers\n\nIn the `Bridging-Header.h` file add these two lines to the top.\n\n```\n#import \u003cVisionCamera/FrameProcessorPlugin.h\u003e\n#import \u003cVisionCamera/Frame.h\u003e\n```\n\nNext create a file called `RoboflowFrameProcessorPlugin.m` with the following lines to tell expo where our function is.\n\n```\n#import \u003cFoundation/Foundation.h\u003e\n#import \u003cVisionCamera/FrameProcessorPlugin.h\u003e\n\n@interface VISION_EXPORT_SWIFT_FRAME_PROCESSOR(roboflowDetect, RoboflowFrameProcessorPlugin)\n@end\n```\n\n#### Using Your Model\n\nIn RoboflowFrameProessorPlugin, we first define an instance of RoboflowWrapper with our apiKey. Insert your apiKey, found at roboflow.com. The loadRoboflowModelWith function loads your model from roboflow using the model name and version, set those values to your custom ones from roboflow.com.\n\nFinally, custmize the confidence threshold, and overlap threshold to your desired values.\n\n### Connecting Native Framework to Expo\n\n#### Adding the Detect Function in Expo\n\nIn a new JS file, create a function called roboflowDetect which connects to your native function like so.\n\n```\nimport \"react-native-reanimated\";\n\nexport const roboflowDetect = (frame) =\u003e {\n  \"worklet\";\n  return [__roboflowDetect(frame), frame.width, frame.height];\n};\n```\n\n#### Add Worklet to babel config\n\nOpen the `babel.config.js` file to expose the native function to your react native app using react-native-reanimated. Make sure your file includes the plugins section from below.\n\n```\nmodule.exports = function (api) {\n  api.cache(true);\n  return {\n    presets: [\"babel-preset-expo\"],\n    plugins: [\n      [\n        \"react-native-reanimated/plugin\",\n        {\n          globals: [\"__roboflowDetect\"],\n        },\n      ],\n    ],\n  };\n};\n```\n\n#### Add react-native-vision-camera to App\n\nIn App.js add these imports.\n\n```\nimport {\n  useCameraDevices,\n  Camera,\n  useFrameProcessor,\n} from \"react-native-vision-camera\";\nimport { roboflowDetect } from \"./roboflowDetect\";\nimport {\n  runOnJS,\n  useSharedValue,\n} from \"react-native-reanimated\";\n```\n\nThen add these lines to get the camera device.\n\n```\nconst devices = useCameraDevices(\"wide-angle-camera\");\nconst device = devices.back;\nif (device == null) return \u003cText\u003eLoading...\u003c/Text\u003e;\n```\n\nNext Add the the following lines to your return to add the camera.\n\n```\n\u003cCamera\n    style={StyleSheet.absoluteFill}\n    device={device}\n    isActive={true}\n/\u003e\n```\n\n#### Process Frames using roboflowDetect\n\nTo connect the camera to our frameprocessor lets first build a worklet function to access the native frame processor.\n\n```\nconst frameProcessor = useFrameProcessor((frame) =\u003e {\n    \"worklet\";\n    const [detections, width, height] = roboflowDetect(frame);\n    console.log(`Detections in Frame: ${detections.length}`);\n}, []);\n```\n\nThen set the camera to use this worklet by adding `frameProcessor={frameProcessor}` to the `\u003cCamera /\u003e` tag.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froboflow%2Froboflowexpoexample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froboflow%2Froboflowexpoexample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froboflow%2Froboflowexpoexample/lists"}