[Bug]: Doesn't work with Expo Image on web but works with vanilla RN Image

[kevgrig]

Description

First, thank you for an amazing project!

I'm not sure if this is an issue with Expo Image or this library, but this library doesn't work with Expo Image on web. The behavior falls back to the default browser behavior of being able to drag the image itself. Reproduced in Chrome and Firefox. Swiching back to vanilla React Native Image fixes the issue (which is an acceptable workaround for me but not ideal). Failing example:

import { useCallback } from 'react';
import { Image } from 'expo-image';
import {
//  Image,
  ImageSourcePropType, ScrollView, StyleSheet, View
} from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';

interface Visual {
  id: number;
  image: ImageSourcePropType;
}

const DATA : Visual[] = [
  {
    id: -1,
    image: { uri: 'https://upload.wikimedia.org/wikipedia/commons/a/a5/Information_example_page2_300px.jpg' },
  },
  {
    id: -2,
    image: { uri: 'https://upload.wikimedia.org/wikipedia/commons/a/a5/Information_example_page2_300px.jpg' },
  }
];

export default function App() {
  const renderItem = useCallback<SortableGridRenderItem<Visual>>(
    ({ item }) => (
      <View style={styles.card}>
        <Sortable.Touchable style={{ width: 300, height: 300 }}>
        <Image
          source={item.image}
          resizeMode="contain"
          style={styles.image}
        />
        </Sortable.Touchable>
      </View>
    ),
    []
  );

  return (
    <GestureHandlerRootView>
      <ScrollView contentContainerStyle={styles.container}>
        <Sortable.Grid
          columns={3}
          data={DATA}
          renderItem={renderItem}
          rowGap={20}
          columnGap={20}
          dragActivationDelay={100}
        />
      </ScrollView>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  card: {
    height: 300,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
  },
  image: {
    width: '100%',
    height: 300,
  },
});

Workaround:

diff --git a/App.tsx b/App.tsx
index f7ca313..43200ae 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
-import { Image } from 'expo-image';
+//import { Image } from 'expo-image';
 import {
-//  Image,
+  Image,
   ImageSourcePropType, ScrollView, StyleSheet, View
 } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';

Steps to reproduce

1. Use with Expo Image instead of React Native Image
2. Launch on web
3. Try to reorder an item

Code snippet, Snack or GitHub repository link

https://snack.expo.dev/@myplaceonline/react-native-sortables-expo-image-issue

React Native Sortables version

1.9.4

Reanimated version

4.1.1

React Native Gesture Handler version

2.28.0

React Native version

0.81.5

Platforms

Web

Architecture

None

Workflow

None

Device

No response

Acknowledgements

Yes

[MatiPl01]

Hey! Have you tried setting pointerEvents="none" on the Image component? It should fix the issue.

[kevgrig]

That works, thanks.