Infra/set haptic infra as an optional dependency (#1245)

* set haptic infra as optional dependency

* move haptic-feedback to devDep

* export HapticService

Author: lidord-wix

demo/src/index.js

@@ -58,6 +58,9 @@ module.exports = {
       get ChipsInputScreen() {
         return require('./screens/componentScreens/ChipsInputScreen').default;
       },
+      get HapticScreen() {
+        return require('./screens/componentScreens/HapticScreen').default;
+      },
       get HintsScreen() {
         return require('./screens/componentScreens/HintsScreen').default;
       },

demo/src/screens/MenuStructure.js

@@ -139,6 +139,7 @@ export const navigationData = {
     title: 'Animations & Gestures',
     screens: [
       {title: 'Animated Image', tags: 'animated image', screen: 'unicorn.components.AnimatedImageScreen'},
+      {title: 'Haptic feedback', tags: 'haptic feedback', screen: 'unicorn.components.HapticScreen'},
       {title: 'ProgressiveImage', tags: 'progressive image cover overlay', screen: 'unicorn.components.ProgressiveImageScreen'},
       {title: 'List Animations', tags: 'animated card', screen: 'unicorn.animations.ListAnimationsScreen'},
       {title: 'Card Animations', tags: 'animated card', screen: 'unicorn.animations.CardAnimationsScreen'},

demo/src/screens/componentScreens/HapticScreen.tsx

@@ -0,0 +1,26 @@
+import _ from 'lodash';
+import React, {Component} from 'react';
+import {ScrollView} from 'react-native';
+import {View, Text, Button, HapticService} from 'react-native-ui-lib';
+
+export default class HapticScreen extends Component {
+  onPress = ({method}: {method: string}) => {
+    HapticService.triggerHaptic(method, 'HapticScreen');
+  };
+
+  render() {
+    return (
+      <ScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="always">
+        <View padding-20>
+          <Text text30 dark10 marginB-20>
+            Haptic Screen
+          </Text>
+
+          {_.map(HapticService.HapticMethods, method => {
+            return <Button marginV-8 marginH-60 label={method} key={method} onPress={() => this.onPress({method})}/>;
+          })}
+        </View>
+      </ScrollView>
+    );
+  }
+}

demo/src/screens/componentScreens/index.js

@@ -18,6 +18,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.DrawerScreen', () => require('./DrawerScreen').default);
   registrar('unicorn.components.ExpandableSectionScreen', () => require('./ExpandableSectionScreen').default);
   registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
+  registrar('unicorn.components.HapticScreen', () => require('./HapticScreen').default);
   registrar('unicorn.components.HintsScreen', () => require('./HintsScreen').default);
   registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
   registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);

generatedTypes/optionalDependencies/HapticFeedbackPackage.d.ts

@@ -0,0 +1,2 @@
+declare let HapticFeedbackPackage: any;
+export default HapticFeedbackPackage;

generatedTypes/optionalDependencies/index.d.ts

@@ -1,5 +1,6 @@
 export { default as DateTimePickerPackage } from './DateTimePickerPackage';
 export { default as BlurViewPackage } from './BlurViewPackage';
 export { default as NetInfoPackage } from './NetInfoPackage';
+export { default as HapticFeedbackPackage } from './HapticFeedbackPackage';
 export { PickerPackage, CommunityPickerPackage } from './PickerPackage';
 export { default as SvgPackage } from './SvgPackage';

generatedTypes/services/HapticService.d.ts

@@ -0,0 +1,6 @@
+declare function triggerHaptic(hapticMethod: string, componentName: string): void;
+declare const _default: {
+    HapticMethods: string[];
+    triggerHaptic: typeof triggerHaptic;
+};
+export default _default;

generatedTypes/services/index.d.ts

@@ -1 +1,2 @@
 export { default as LogService } from './LogService';
+export { default as HapticService } from './HapticService';

package.json

@@ -98,6 +98,7 @@
     "react-dom": "^15.4.2",
     "react-native": "0.63.4",
     "react-native-gesture-handler": "1.9.0",
+    "react-native-haptic-feedback": "^1.11.0",
     "react-native-keyboard-tracking-view": "^5.6.1",
     "react-native-navigation": "7.6.0",
     "react-native-svg": "^12.1.0",

src/index.js

@@ -250,6 +250,9 @@ export default {
   get LogService() {
     return require('./services').LogService;
   },
+  get HapticService() {
+    return require('./services').HapticService;
+  },
 
   // NativeComponents
   get HighlighterOverlayView() {

src/index.ts

@@ -24,6 +24,7 @@ export {default as Avatar, AvatarPropTypes, AvatarProps} from './components/avat
 export {default as Badge, BadgeProps} from './components/badge';
 export {default as Card, CardPropTypes, CardProps, CardSectionProps} from './components/card';
 export {default as Constants} from './helpers/Constants';
+export {default as HapticService} from './services/HapticService';
 export {default as View, ViewPropTypes, ViewProps} from './components/view';
 export {default as Text, TextPropTypes, TextProps} from './components/text';
 export {default as TouchableOpacity, TouchableOpacityProps} from './components/touchableOpacity';

src/optionalDependencies/HapticFeedbackPackage.ts

@@ -0,0 +1,6 @@
+let HapticFeedbackPackage: any;
+try {
+  HapticFeedbackPackage = require('react-native-haptic-feedback').default;
+} catch (error) {}
+
+export default HapticFeedbackPackage;

src/optionalDependencies/index.ts

@@ -1,5 +1,6 @@
 export {default as DateTimePickerPackage} from './DateTimePickerPackage';
 export {default as BlurViewPackage} from './BlurViewPackage';
 export {default as NetInfoPackage} from './NetInfoPackage';
+export {default as HapticFeedbackPackage} from './HapticFeedbackPackage';
 export {PickerPackage, CommunityPickerPackage} from './PickerPackage';
 export {default as SvgPackage} from './SvgPackage';

src/services/HapticService.ts

@@ -0,0 +1,29 @@
+import {HapticFeedbackPackage} from '../optionalDependencies';
+
+const options = {
+  enableVibrateFallback: false,
+  ignoreAndroidSystemSettings: false
+};
+
+const HapticMethods = [
+  'selection',
+  'impactLight',
+  'impactMedium',
+  'impactHeavy',
+  'notificationSuccess',
+  'notificationWarning',
+  'notificationError'
+];
+
+function triggerHaptic(hapticMethod: string, componentName: string) {
+  if (HapticFeedbackPackage) {
+    HapticFeedbackPackage.trigger(hapticMethod, options);
+  } else {
+    console.error(`RNUILib ${componentName}'s requires installing "react-native-haptic-feedback" dependency`);
+  }
+}
+
+export default {
+  HapticMethods,
+  triggerHaptic
+};

src/services/index.ts

@@ -1 +1,2 @@
 export {default as LogService} from './LogService';
+export {default as HapticService} from './HapticService';