react-native-haptic-view
ReactNativeHapticView provides native haptic effect on both iOS and Android platforms.
You can read about haptic effect in iOS here or Android here.
Installation
You can install this package via yarn
:
yarn add react-native-haptic-view
or npm
npm install react-native-haptic-view --save
Add to your project
Automatically:
react-native link react-native-haptic-view
Manually:
(iOS)
- Open your project in XCode, right click on
Libraries
and clickAdd Files to "Your Project Name"
Look undernode_modules/react-native-haptic-view
and addios/ReactNativeHapticView.xcodeproj
(Android)
- Add these lines to your
android/settings.gradle
include ':react-native-haptic-view'project(':react-native-haptic-view').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-haptic-view/android/app')
- Add this to
android/app/build.gradle
dependencies { ... compile project(':react-native-haptic-view')}
- Finally, add these to your
android/app/src/main/java/com/{YOUR_APP_NAME}/MainApplication.java
import com.hamidhadi.reactnativehapticview.HapticViewPackage;
@Overrideprotected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( ..., new HapticViewPackage() );}
Usage
;;; <Props> { if thishapticView thishapticView } { return <View style=stylescontainer> <TouchableOpacity style= flex: 0 onPress=thisonPress> <HapticView style= padding: 30 backgroundColor: 'gray' ref= thishapticView = me> <Text>Perform Haptic Effect</Text> </HapticView> </TouchableOpacity> </View> ; } const styles = StyleSheet;
Example
If you want to see this pckage in action:
- Clone it
- Go to
HapticViewExample
folder - Run
yarn
command - Run the project in real device
Todo
[ ] Provide fallback for devices that doesn't support haptic feedback.
Contribution
You can fork the repository, improve or fix some part of it and then send the pull requests back if you want to see them here. I really appreciate that. 😉
License
Licensed under the MIT License.