Skip to content

A View component with Haptic effect support for React Native

License

Notifications You must be signed in to change notification settings

hamidhadi/react-native-haptic-view

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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. 😉

License

Licensed under the MIT License.