SortableList Android - Loss of precision during arithmetic conversion

[MR-AMDEV]

Description

Related to

• Components
• Demo
• Docs
• Typings

Steps to reproduce

1. Create a new expo project
2. Download and fresh install react native ui lib
3. Try using SortableList component with any kind of data
4. On the android emulator running android (version 14 or 15), try to drag and sort an item
5. The emulator will throw the error, on a real android device app will crash

Expected behavior

It should just work fine, as it works on web/ios.

Actual behavior

When i begin to drag an item, it instantly throw the error below/crashses the application.

More Info

Here is the Expo Snack:
https://snack.expo.dev/@abdulon3/sortablelist-android-bug?platform=web

Code snippet

import { Pressable } from 'react-native';
import { SortableList, Text } from 'react-native-ui-lib';

<SortableList
            flexMigration
            data={[
               {id: '1', title: 'A'},
               {id: '2', title: 'B'},
               {id: '3', title: 'C'},
               {id: '4', title: 'D'},
               {id: '5', title: 'E'},
               {id: '6', title: 'F'},
               {id: '7', title: 'G'},
               {id: '8', title: 'H'},
            ]}
            onOrderChange={(info) => {console.log('order changed', info)}}
            renderItem={({ item }) => (
               <Pressable style={{ backgroundColor: 'orange', padding: 16, marginBottom: 5}}>
                  <Text>{item.title}</Text>
               </Pressable>
            )}
         />

Screenshots/Video

Environment

• React Native version: 0.76.6
• React Native UI Lib version: 7.34.x/7.35.1/7.36.0
• react-native-reanimated: 3.16.7
• react-native-gesture-handler: 2.20.2
• Android Versions: Tried on 14 and 15

Affected platforms

• Android
• iOS
• Web

[hiitsmax]

+1

[chehsing]

I resolved this issue by replacing the withTiming in draggedAnimatedStyle in node_modules/react-native-ui-lib/src/components/sortableList/SortableListItem.js

 const draggedAnimatedStyle = useAnimatedStyle(() => {
    const roundedTranslation = Math.round(translation.value);
    const scale = withSpring(isDragging.value ? propsScale : 1);
    // Replace withTiming to fix arithmetic issue on New Architecture
    const zIndex = isDragging.value ? 100 : 0 //withTiming(0, animationConfig);
    const opacity = isDragging.value ? 0.95 : 1;
    const shadow = isDragging.value ? draggedItemShadow.value : defaultItemShadow.value;
    return {
      backgroundColor: itemProps?.backgroundColor ?? LIST_ITEM_BACKGROUND,
      // required for elevation to work in Android
      zIndex,
      transform: [horizontal ? {
        translateX: roundedTranslation
      } : {
        translateY: roundedTranslation
      }, {
        scale
      }],
      opacity,
      ...itemProps?.margins,
      ...shadow
    };
  });