Packages dependant on reanimated don't work on web

[AlejandroGutierrezB]

Using https://github.com/computerjazz/react-native-draggable-flatlist doesn't work on web.

The snack works fine, so there has to be something with the next config.

I guess this is not strictly related to solito but since you wrote have work on the renimated plugins and so on, you might at least know some directions to point me out to try and solve it.

The error occurred in the component:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'toString')

Call Stack
toString
../node_modules/react-native-reanimated/lib/module/reanimated2/hook/utils.js (52:30)
Array.reduce
<anonymous>
reduce
../node_modules/react-native-reanimated/lib/module/reanimated2/hook/utils.js (51:33)
buildWorkletsHash
../node_modules/react-native-reanimated/lib/module/reanimated2/hook/utils.js (66:22)
buildDependencies
../node_modules/react-native-reanimated/lib/module/reanimated2/hook/utils.js (39:17)
scrollHandlers
../node_modules/react-native-reanimated/lib/module/reanimated2/hook/useAnimatedScrollHandler.js (10:17)
DraggableFlatListInner
../node_modules/react-native-draggable-flatlist/lib/module/components/DraggableFlatList.js (289:49)
renderWithHooks
../node_modules/react-dom/cjs/react-dom.development.js (16305:0)
updateFunctionComponent
../node_modules/react-dom/cjs/react-dom.development.js (19588:0)
updateSimpleMemoComponent
../node_modules/react-dom/cjs/react-dom.development.js (19425:0)
updateMemoComponent
../node_modules/react-dom/cjs/react-dom.development.js (19284:0)
beginWork
../node_modules/react-dom/cjs/react-dom.development.js (21673:0)
HTMLUnknownElement.callCallback
../node_modules/react-dom/cjs/react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
../node_modules/react-dom/cjs/react-dom.development.js (4213:0)
invokeGuardedCallback
../node_modules/react-dom/cjs/react-dom.development.js (4277:0)
beginWork$1
../node_modules/react-dom/cjs/react-dom.development.js (27451:0)
performUnitOfWork
../node_modules/react-dom/cjs/react-dom.development.js (26557:0)
workLoopSync
../node_modules/react-dom/cjs/react-dom.development.js (26466:0)
renderRootSync
../node_modules/react-dom/cjs/react-dom.development.js (26434:0)
performConcurrentWorkOnRoot
../node_modules/react-dom/cjs/react-dom.development.js (25738:0)
workLoop
../node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
../node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
../node_modules/scheduler/cjs/scheduler.development.js (533:0)

Seteps to reproduce

1. npx create-solito-app@latest my-solito-app -t with-tailwind.
2. Install react-native-draggable-flatlist at the packages level (packages/app).
3. Add react-native-draggable-flatlis to the transpilePackages array at next.config.js.
4. Import the following code example.

import { useCallback, useState } from 'react';
import { Text, StyleSheet, TouchableOpacity, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import DraggableFlatList, { ScaleDecorator, RenderItemParams } from 'react-native-draggable-flatlist';

function getColor(i: number, numItems: number) {
  const multiplier = 255 / (numItems - 1);
  const colorVal = i * multiplier;
  return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;
}

const mapIndexToData = (d: any, index: number, arr: any[]) => {
  const backgroundColor = getColor(index, arr.length);
  return {
    text: `${index}`,
    key: `key-${backgroundColor}`,
    backgroundColor,
  };
};

type Item = ReturnType<typeof mapIndexToData>;

const NUM_ITEMS = 10;

const initialData: Item[] = [...Array(NUM_ITEMS)].map(mapIndexToData);

export default function Horizontal() {
  const [data, setData] = useState(initialData);

  const renderItem = useCallback(({ item, drag, isActive }: RenderItemParams<Item>) => {
    return (
      <ScaleDecorator>
        <TouchableOpacity
          activeOpacity={1}
          onLongPress={drag}
          onPress={() => console.log('something')}
          disabled={isActive}
          style={[
            styles.rowItem,
            {
              opacity: isActive ? 0.5 : 1,
              padding: 5,
              backgroundColor: item.backgroundColor,
            },
          ]}
        >
          <Text style={styles.text}>{item.text}</Text>
        </TouchableOpacity>
      </ScaleDecorator>
    );
  }, []);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <DraggableFlatList
          horizontal
          data={data}
          onDragEnd={({ data }) => setData(data)}
          keyExtractor={(item) => {
            return item.key;
          }}
          renderItem={renderItem}
          ItemSeparatorComponent={() => <View className='w-2' />}
          renderPlaceholder={() => <View style={{ flex: 1, backgroundColor: '#CBF062', maxWidth: '94%' }} />}
        />
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  rowItem: {
    height: 100,
    width: 100,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

[anirudhsama]

Solito 3.1 works with Reanimated 3. This is the migration guide if you are upgrading from an older version: https://github.com/nandorojo/solito/releases/tag/v3.1.0.

In the stack trace it looks the library might be using Reanimated 2?

[AlejandroGutierrezB]

Solito 3.1 works with Reanimated 3. This is the migration guide if you are upgrading from an older version: https://github.com/nandorojo/solito/releases/tag/v3.1.0.

In the stack trace it looks the library might be using Reanimated 2?

That was my initial thought but it seems like they are carrying the name as there are no api changes. Also from dragglist release notes, this version should support reanimatedv2+, so my understanding is that versions should be good.

[anirudhsama]

Try installing react-native-draggable-flatlist in apps/expo and add it to transpilePackages.

[AlejandroGutierrezB]

Try installing react-native-draggable-flatlist in apps/expo and add it to transpilePackages.

I installed it at packages/app and added it to transpilePackages as shown in the initial comment. Tried also installing it at both expo and next level but it doesn't work either :(

[nandorojo]

FWIW, this is a matter of that library adding Web support. But also, are you using Reanimated 3.x (latest?) I added a PR to Reanimated 3 improving Web support for Next.js.

[nandorojo]

Closing as I haven't heard back. Certain libraries may not support Web, that would technically be on them. For the draggable list, I'd suggest having a separate component on Web most likely.

[AlejandroGutierrezB]

Closing as I haven't heard back. Certain libraries may not support Web, that would technically be on them. For the draggable list, I'd suggest having a separate component on Web most likely.

Sorry I missed this.., I opened an issue in the library's repo, but haven't get any reply yet.

In the mean time that is what we did use a web only component.

Thanks for your time once again 👍