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/
1. Install the library
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.
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+
Libraries
➜ Add Files to [your project's name]
node_modules
➜ react-native-pointer-interactions
and add RNPointerInteractions.xcodeproj
libRNPointerInteractions.a
to your project's Build Phases
➜ Link Binary With Libraries
Cmd+R
)<Add this to the Info plists
<key>UIApplicationSupportsIndirectInputEvents</key>
<true/>
Wrap the views you want to be interactable in PointerInteractionView
import { PointerInteractionView } from '@thefunbots/react-native-pointer-interactions';
<PointerInteractionView pointerMode="lift">
<Text>Hi</Text>
</PointerInteractionView>
Soon
The component extends the regular View, so you can use the common properties too.
Prop | Description |
---|---|
pointerMode | [automatic , lift , highlight , hover , verticalBeam , horizontalBeam ] |
beamLength | Sets the cursor size for Beam modes only |
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:
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.
react-native-gesture-handler
buttonsAuthor: thefunbots
Source Code: https://github.com/thefunbots/react-native-pointer-interactions
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.
Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.
Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.
Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.