Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thefunbots/react-native-pointer-interactions
Expose iPad mouse & trackpads interactions to React Native
https://github.com/thefunbots/react-native-pointer-interactions
interactions ipad mouse pointer react-native swift trackpad
Last synced: about 2 months ago
JSON representation
Expose iPad mouse & trackpads interactions to React Native
- Host: GitHub
- URL: https://github.com/thefunbots/react-native-pointer-interactions
- Owner: thefunbots
- License: apache-2.0
- Created: 2020-05-07T10:06:05.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T17:19:56.000Z (almost 2 years ago)
- Last Synced: 2024-08-16T17:54:03.710Z (6 months ago)
- Topics: interactions, ipad, mouse, pointer, react-native, swift, trackpad
- Language: JavaScript
- Homepage:
- Size: 1.32 MB
- Stars: 35
- Watchers: 3
- Forks: 4
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-pointer-interactions ★2 - Expose iPad mouse & trackpads interactions to React Native. (Components / Navigation)
- awesome-react-native - react-native-pointer-interactions ★2 - Expose iPad mouse & trackpads interactions to React Native. (Components / Navigation)
README
React Native Pointer Interactions
Expose iPad mouse & track pads interactions to React Native.
---
Expose iPad mouse & track pads interactions to React Native
Ref: https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/pointers/
## Getting started
### Mostly automatic installation
**1. Install the library**
```bash
npm install @thefunbots/react-native-pointer-interactions --save
```
**2. (Optional) Install react-native-swift**
If 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.
### Install react-native-swift
```bash
npm install --save react-native-swift
```
After installing it, you will need to link it. **Requires project to use Swift 5.0 and iOS SDK 13.4+**
### Manual installation
#### iOS
1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `react-native-pointer-interactions` and add `RNPointerInteractions.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNPointerInteractions.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<
## Setup
Add this to the Info plists
```xml
UIApplicationSupportsIndirectInputEvents
```
## Usage
### Basic usage
Wrap the views you want to be interactable in `PointerInteractionView`
```jsx
import { PointerInteractionView } from '@thefunbots/react-native-pointer-interactions';
Hi
```
### Using the High Order Component
Soon
### Props
The component extends the regular View, so you can use the common properties too.
| Prop | Default | Description |
|-------------|---------------|-------------------------------------------------------------------------------|
| pointerMode | `'automatic'` | [`automatic`, `lift`, `highlight`, `hover`, `verticalBeam`, `horizontalBeam`] |
| beamLength | | Sets the cursor size for Beam modes only |
| hoverShadow | `true` | Determines if the view should have a shadow when hovered |
| hoverScale | `true` | Determines if the view should scale up when hovered |
| hoverTing | `true` | Determines if the view should have an overlay tint when hovered |
## Examples
If 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:
```bash
npm install
```
If you are running on ios, run `pod install` in the ios folder
Run `react-native start` to start the metro bundler
Run `react-native run-ios` (depending on which platform you want to run the example app on).
You will need to have an iOS device or emulator connected as well as `react-native-cli` package installed globally.
## Troubleshooting
- It doesn't work when wrapping `react-native-gesture-handler` buttons