feat: add haptics

kosmydel · Aug 24, 2023 · 3732223 · 3732223
1 parent eb5b9d1
commit 3732223
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 0 deletions.
diff --git a/example/package.json b/example/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "expo": "~49.0.8",
+    "expo-haptics": "~12.4.0",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -14,6 +14,7 @@ import { DraggableList, ScaleDecorator } from 'react-native-x-draggable-list';
 import type { RenderItemParams } from 'react-native-draggable-flatlist';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import type { Item } from 'src/DraggableList/types';
+import * as Haptics from 'expo-haptics';
 
 const COLORS = {
   LIST: ['#FAF1E4', '#CEDEBD', '#9EB384'],
@@ -41,6 +42,8 @@ const getCurrentTime = () => {
   return new Date().toLocaleTimeString();
 };
 
+const isNative = Platform.OS === 'ios' || Platform.OS === 'android';
+
 export default function App() {
   const [items, setItems] = useState(getItems(15));
   const [lastEvent, setLastEvent] = useState('Listening for events...');
@@ -82,9 +85,25 @@ export default function App() {
           onDragEnd={({ data }: any) => {
             logEvent('onDragEnd');
             setItems(data);
+            if (isNative) {
+              Haptics.notificationAsync(
+                Haptics.NotificationFeedbackType.Success
+              );
+            }
           }}
           onDragBegin={() => {
             logEvent('onDragBegin');
+            if (isNative) {
+              Haptics.notificationAsync(
+                Haptics.NotificationFeedbackType.Success
+              );
+            }
+          }}
+          onPlaceholderIndexChange={(index: number) => {
+            logEvent(`onPlaceholderIndexChange ${index}`);
+            if (isNative) {
+              Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+            }
           }}
         />
       </SafeAreaView>

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -3972,6 +3972,11 @@ expo-font@~11.4.0:
   dependencies:
     fontfaceobserver "^2.1.0"
 
+expo-haptics@~12.4.0:
+  version "12.4.0"
+  resolved "https://registry.yarnpkg.com/expo-haptics/-/expo-haptics-12.4.0.tgz#99ad9d6a8eafb219aee022ec1412a998e1c90d71"
+  integrity sha512-eELhZOO64oJa6AtEUxosatjSENE/tQgF2rVJxDsvRdx8Vgd3uFC+FRoM3nbMVJkxDgAaP3EKOPT1zVM41sNurw==
+
 expo-keep-awake@~12.3.0:
   version "12.3.0"
   resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-12.3.0.tgz#c42449ae19c993274ddc43aafa618792b6aec408"

diff --git a/src/DraggableList/types.tsx b/src/DraggableList/types.tsx
@@ -10,4 +10,5 @@ export type DraggableListProps = {
   renderItem: (params: RenderItemParams<Item>) => React.ReactNode;
   onDragEnd?: (params: { data: Item[] }) => void;
   onDragBegin?: () => void;
+  onPlaceholderIndexChange?: (params: { index: number }) => void;
 };