{"id":4404,"url":"https://github.com/thefunbots/react-native-pointer-interactions","last_synced_at":"2025-08-04T01:32:22.719Z","repository":{"id":40769141,"uuid":"262015480","full_name":"thefunbots/react-native-pointer-interactions","owner":"thefunbots","description":"Expose iPad mouse \u0026 trackpads interactions to React Native","archived":false,"fork":false,"pushed_at":"2023-02-28T17:19:56.000Z","size":1381,"stargazers_count":37,"open_issues_count":17,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-07T08:33:30.440Z","etag":null,"topics":["interactions","ipad","mouse","pointer","react-native","swift","trackpad"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thefunbots.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-05-07T10:06:05.000Z","updated_at":"2024-10-15T10:51:11.000Z","dependencies_parsed_at":"2024-01-08T01:03:03.826Z","dependency_job_id":"61b267e1-22fb-40c5-9c63-10c171727820","html_url":"https://github.com/thefunbots/react-native-pointer-interactions","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/thefunbots/react-native-pointer-interactions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thefunbots%2Freact-native-pointer-interactions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thefunbots%2Freact-native-pointer-interactions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thefunbots%2Freact-native-pointer-interactions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thefunbots%2Freact-native-pointer-interactions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thefunbots","download_url":"https://codeload.github.com/thefunbots/react-native-pointer-interactions/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thefunbots%2Freact-native-pointer-interactions/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268636338,"owners_count":24282077,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["interactions","ipad","mouse","pointer","react-native","swift","trackpad"],"created_at":"2024-01-05T20:17:10.859Z","updated_at":"2025-08-04T01:32:22.355Z","avatar_url":"https://github.com/thefunbots.png","language":"JavaScript","readme":"\n\u003cp align=\"center\"\u003e\n  \u003cimg height=\"150\" src=\"assets/logo.svg\" /\u003e\n  \u003ch1 align=\"center\"\u003eReact Native Pointer Interactions\u003c/h1\u003e\n  \u003ch3 align=\"center\"\u003eExpose iPad mouse \u0026 track pads interactions to React Native.\u003c/h3\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://badge.fury.io/js/%40thefunbots%2Freact-native-pointer-interactions\"\u003e\u003cimg src=\"https://badge.fury.io/js/%40thefunbots%2Freact-native-pointer-interactions.svg\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@thefunbots/react-native-pointer-interactions\"\u003e\u003cimg alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/@thefunbots/react-native-pointer-interactions.svg\" height=\"18\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.codacy.com/gh/thefunbots/react-native-pointer-interactions\"\u003e\u003cimg src=\"https://app.codacy.com/project/badge/Grade/fa3faa2983494f5fb496d122612ac831\" alt=\"Codacy Badge\" height=\"18\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://twitter.com/intent/follow?screen_name=thefunbots\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/follow/thefunbots.svg?label=Follow%20@thefunbots\" height=\"18\" alt=\"Follow @thefunbots\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\nExpose iPad mouse \u0026 track pads interactions to React Native\n\nRef: https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/pointers/\n\n![demo](https://cdn.thefunbots.com/file/thefunbots-cdn/projects/react-native-pointer-interactions/demo-2.gif\n \"Demo\")\n\n## Getting started\n\n### Mostly automatic installation\n\n**1. Install the library**\n\n```bash\nnpm install @thefunbots/react-native-pointer-interactions --save\n```\n\n**2. (Optional) Install react-native-swift**\n\nIf you are not already using any other swift based modules in your app, install and run react-native-swift to configure your iOS project to support swift.\n\n### Install react-native-swift\n\n```bash\nnpm install --save react-native-swift\n```\n\nAfter installing it, you will need to link it. **Requires project to use Swift 5.0 and iOS SDK 13.4+**\n\n### Manual installation\n\n#### iOS\n\n1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n2. Go to `node_modules` ➜ `react-native-pointer-interactions` and add `RNPointerInteractions.xcodeproj`\n3. In XCode, in the project navigator, select your project. Add `libRNPointerInteractions.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n4. Run your project (`Cmd+R`)\u003c\n\n## Setup\n\nAdd this to the Info plists\n\n```xml\n\u003ckey\u003eUIApplicationSupportsIndirectInputEvents\u003c/key\u003e\n\u003ctrue/\u003e\n```\n\n## Usage\n\n### Basic usage\n\nWrap the views you want to be interactable in `PointerInteractionView`\n\n```jsx\nimport { PointerInteractionView } from '@thefunbots/react-native-pointer-interactions';\n\n\u003cPointerInteractionView pointerMode=\"lift\"\u003e\n  \u003cText\u003eHi\u003c/Text\u003e\n\u003c/PointerInteractionView\u003e\n```\n\n### Using the High Order Component\n\nSoon\n\n### Props\n\nThe component extends the regular View, so you can use the common properties too.\n\n| Prop        | Default       | Description                                                                   |\n|-------------|---------------|-------------------------------------------------------------------------------|\n| pointerMode | `'automatic'` | [`automatic`, `lift`, `highlight`, `hover`, `verticalBeam`, `horizontalBeam`] |\n| beamLength  |               | Sets the cursor size for Beam modes only                                      |\n| hoverShadow | `true`        | Determines if the view should have a shadow when hovered                      |\n| hoverScale  | `true`        | Determines if the view should scale up when hovered                           |\n| hoverTing   | `true`        | Determines if the view should have an overlay tint when hovered               |\n\n## Examples\n\nIf you want to play with the API but don't feel like trying it on a real app, you can run the example project. Clone the repo, go to the `example/` folder and run:\n\n```bash\nnpm install\n```\n\nIf you are running on ios, run `pod install` in the ios folder\n\nRun `react-native start` to start the metro bundler\n\nRun `react-native run-ios` (depending on which platform you want to run the example app on).\n\nYou will need to have an iOS device or emulator connected as well as `react-native-cli` package installed globally.\n\n## Troubleshooting\n\n- It doesn't work when wrapping `react-native-gesture-handler` buttons","funding_links":[],"categories":["Components","JavaScript"],"sub_categories":["Navigation"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthefunbots%2Freact-native-pointer-interactions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthefunbots%2Freact-native-pointer-interactions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthefunbots%2Freact-native-pointer-interactions/lists"}