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 click Add Files to "Your Project Name" Look under node_modules/react-native-haptic-view and add ios/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;

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      ...,
      new HapticViewPackage()
  );
}

Usage

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import HapticView, { HapticFeedbackConstants } from 'react-native-haptic-view';

export default class App extends Component<Props> {
  onPress = () => {
    if (this.hapticView) {
      this.hapticView.performHaptic({
        ios: HapticFeedbackConstants.ios.IMPACT_FEEDBACK,
        android: HapticFeedbackConstants.android.CLOCK_TICK
      })
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={{ flex: 0 }} onPress={this.onPress}>
          <HapticView style={{ padding: 30, backgroundColor: 'gray' }} ref={me => this.hapticView = me}>
            <Text>Perform Haptic Effect</Text>
          </HapticView>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

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. :wink:

License

Licensed under the MIT License.