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/

!demo

Getting started

$3

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.

$3

`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+

$3

#### 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

$3

Wrap the views you want to be interactable in PointerInteractionView

`jsx
import { PointerInteractionView } from '@thefunbots/react-native-pointer-interactions';


Hi

`

$3

Soon

$3

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