feat(example): adding example for the usage

Author: Mhp23

example/src/App.tsx

@@ -1,17 +1,79 @@
-import {View, StyleSheet} from 'react-native';
+import React from 'react';
+import {
+  Text,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  SafeAreaView,
+  type TextStyle,
+  useColorScheme,
+} from 'react-native';
+import Haptics from '@mhpdev/react-native-haptics';
+import HapticButton from './components/HapticButton';
+import {AndroidHaptics, Impacts, Notifications} from './core/config';
 
 export default function App() {
+  const scheme = useColorScheme();
+
+  const titleStyle = React.useMemo<TextStyle>(() => {
+    return {
+      fontSize: 20,
+      fontWeight: 'bold',
+      textAlign: 'center',
+      marginVertical: 10,
+      color: scheme === 'dark' ? 'white' : 'black',
+    };
+  }, [scheme]);
+
   return (
-    <View style={styles.container}>
-      <></>
-    </View>
+    <SafeAreaView style={styles.container}>
+      <Text style={titleStyle}>React Native Haptics Examples</Text>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.content}>
+        <Text style={titleStyle}>Haptics Impacts</Text>
+        {Impacts.map(impact => (
+          <HapticButton
+            key={impact.name}
+            title={impact.name}
+            onPress={() => Haptics.impact(impact.style)}
+          />
+        ))}
+        <Text style={titleStyle}>Haptics Notfications</Text>
+        {Notifications.map(notification => (
+          <HapticButton
+            key={notification.name}
+            title={notification.name}
+            onPress={() => Haptics.notification(notification.type)}
+          />
+        ))}
+        <Text style={titleStyle}>Haptics Selection</Text>
+        <HapticButton title="Selection" onPress={Haptics.selection} />
+        {Platform.OS !== 'android' ? null : (
+          <React.Fragment>
+            <Text style={titleStyle}>Android Haptics</Text>
+            {AndroidHaptics.map(haptic => (
+              <HapticButton
+                key={haptic.name}
+                title={haptic.name}
+                onPress={() => Haptics.androidHaptics(haptic.type)}
+              />
+            ))}
+          </React.Fragment>
+        )}
+      </ScrollView>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    paddingVertical: 30,
+  },
+  content: {
+    marginTop: 10,
+    paddingBottom: 40,
     alignItems: 'center',
-    justifyContent: 'center',
   },
 });

example/src/components/HapticButton.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {
+  Text,
+  useColorScheme,
+  TouchableOpacity,
+  type ViewStyle,
+  type TextStyle,
+  type TouchableOpacityProps,
+} from 'react-native';
+import {getRandomColor} from '../core/config';
+
+interface HapticButtonProps extends TouchableOpacityProps {
+  title: string;
+}
+
+const HapticButton: React.FC<HapticButtonProps> = ({style, title, ...rest}) => {
+  const scheme = useColorScheme();
+
+  const textStyle = React.useMemo<TextStyle>(() => {
+    return {
+      fontSize: 18,
+      fontWeight: '600',
+      textAlign: 'center',
+      color: scheme === 'dark' ? 'white' : 'black',
+    };
+  }, [scheme]);
+
+  const buttonStyle = React.useMemo<ViewStyle>(() => {
+    return {
+      padding: 10,
+      borderRadius: 7.5,
+      marginVertical: 10,
+      backgroundColor: getRandomColor(),
+    };
+  }, []);
+
+  return (
+    <TouchableOpacity style={[buttonStyle, style]} {...rest}>
+      <Text style={textStyle}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default HapticButton;

example/src/core/config.ts

@@ -0,0 +1,127 @@
+import type {
+  AndroidHapticsFeedback,
+  ImpactFeedback,
+  NotificationFeedback,
+} from '@mhpdev/react-native-haptics';
+import type {HapticsDataWithStyle, HapticsDataWithType} from './types';
+
+export const getRandomColor = () => {
+  return `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.5)`;
+};
+
+export const Impacts: HapticsDataWithStyle<ImpactFeedback>[] = [
+  {
+    name: 'Light',
+    style: 'light',
+  },
+  {
+    name: 'Medium',
+    style: 'medium',
+  },
+  {
+    name: 'Heavy',
+    style: 'heavy',
+  },
+  {
+    name: 'Soft',
+    style: 'soft',
+  },
+  {
+    name: 'Rigid',
+    style: 'rigid',
+  },
+];
+
+export const Notifications: HapticsDataWithType<NotificationFeedback>[] = [
+  {
+    name: 'Error',
+    type: 'error',
+  },
+  {
+    name: 'Success',
+    type: 'success',
+  },
+  {
+    name: 'Warning',
+    type: 'warning',
+  },
+];
+
+export const AndroidHaptics: HapticsDataWithType<AndroidHapticsFeedback>[] = [
+  {
+    name: 'Long Press',
+    type: 'long-press',
+  },
+  {
+    name: 'Keyboard Tap',
+    type: 'keyboard-tap',
+  },
+  {
+    name: 'Virtual Key',
+    type: 'virtual-key',
+  },
+  {
+    name: 'Clock Tick',
+    type: 'clock-tick',
+  },
+  {
+    name: 'Confirm',
+    type: 'confirm',
+  },
+  {
+    name: 'Reject',
+    type: 'reject',
+  },
+  {
+    name: 'Toggle On',
+    type: 'toggle-on',
+  },
+  {
+    name: 'Toggle Off',
+    type: 'toggle-off',
+  },
+  {
+    name: 'Drag Start',
+    type: 'drag-start',
+  },
+  {
+    name: 'Gesture Start',
+    type: 'gesture-start',
+  },
+  {
+    name: 'Gesture End',
+    type: 'gesture-end',
+  },
+  {
+    name: 'Context Click',
+    type: 'context-click',
+  },
+  {
+    name: 'Keyboard Press',
+    type: 'keyboard-press',
+  },
+  {
+    name: 'Keyboard Release',
+    type: 'keyboard-release',
+  },
+  {
+    name: 'Virtual Key Release',
+    type: 'virtual-key-release',
+  },
+  {
+    name: 'Text Handle Move',
+    type: 'text-handle-move',
+  },
+  {
+    name: 'Segment Tick',
+    type: 'segment-tick',
+  },
+  {
+    name: 'Segment Frequent Tick',
+    type: 'segment-frequent-tick',
+  },
+  {
+    name: 'No Haptics',
+    type: 'no-haptics',
+  },
+];

example/src/core/types.ts

@@ -0,0 +1,9 @@
+export type HapticsDataWithType<T> = {
+  name: string;
+  type: T;
+};
+
+export type HapticsDataWithStyle<T> = {
+  name: string;
+  style: T;
+};