Skip to content

SortableList Android - Loss of precision during arithmetic conversion #3495

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
2 of 7 tasks
MR-AMDEV opened this issue Jan 30, 2025 · 3 comments
Open
2 of 7 tasks
Labels
bug a bug in one of the components

Comments

@MR-AMDEV
Copy link

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

Image

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
@MR-AMDEV MR-AMDEV added the bug a bug in one of the components label Jan 30, 2025
@hiitsmax
Copy link

hiitsmax commented Mar 1, 2025

+1

@chehsing
Copy link

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
Copy link

fokion commented May 26, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug a bug in one of the components
Projects
None yet
Development

No branches or pull requests

4 participants