SortableList Android - Loss of precision during arithmetic conversion

[MR-AMDEV]

Description

Related to

• [x] 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

• [x] 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
    };
  });

[fokion]

Same issue in iOS, when I use the solution above it does not crash.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[M-i-k-e-l]

Hello,

We have a version that supports new-arch (RN77), you can use the next tag for now. Please make sure to go over the v8 doc, it includes breaking changes and some known issues.

Please close this ticket if it solved your bug.