Last item from a long vertical list flies off the screen

[MichaelTao]

Thanks for taking the time for making this library. Not many up kept up to date.

Everything seems to be working well. I've noticed on a long vertical list I'm trying to reorder the moment I click on any item, the last item flies off the screen. Do you know what's causing it and what I can do to fix it? I tried a bunch of props trying to tweak it but it still happening.

react-native-sortables.mp4

[MatiPl01]

Hey @MichaelTao!
Do you use a Sortable.Flex or a Sortable.Grid component? It looks similar to the #241 issue that happened on Android but it might not be the same as I can see that you change the items content when making them draggable.

Can you possibly share your code so that I can reproduce it on my side and check what is wrong?

[MichaelTao]

@MatiPl01 sorry for late reply, didn't get notification. I reverted the code so I don't have it anymore. Pretty much it was your example code but with my mapping. Just create a long list.

I only tested this in a bottom sheet, so I'm not sure if it would do the same in a normal screen view.

[MatiPl01]

Ok, but do you remember if you used a Sortable.Flex or a Sortable.Grid component with with a single column? There is no List component in the library so I wonder what you used to build a list.

[MichaelTao]

I used Sortable.Flex to create that that list.

[MatiPl01]

Ok, thanks. That is what I assumed. Sortable.Flex does quite complex layout calculations and, in general, should be used with items that have their dimensions calculated based on the contents size or are set to fixed numbers. The layout might start to break when you use % values, like width: '100%' or set alignment to stretch.

It will be hard to debug if you cannot provide code which caused the issue but I will try to experiment with that on my own when I finish working on other things or when someone reports an issue with a reproduction example.

[MichaelTao]

I got a copy of it from an old branch.

<Animated.ScrollView ref={scrollableRef}>
            <Sortable.Flex
              flexDirection='column'
              overDrag='none'
              activeItemScale={1}
              inactiveItemScale={1}
              enableActiveItemSnap={true}
              scrollableRef={scrollableRef}
              sortEnabled={isReorder}
              autoScrollEnabled={true}
              autoScrollSpeed={15}
              itemsLayoutTransitionMode='reorder'
              paddingVertical={0}
              onDragEnd={handleOrderChange}>
              {menus.map((menu) => (
                <View key={menu.id} id={menu.id}>
                  <View className='flex flex-row items-center gap-1'>
                    {isReorder && <AlignJustifyIcon size={20} color='#1f2021' />}

                    <View className={`flex-row items-center border-b border-b-gray-100 py-5`}>
                      <View className='flex-col flex-1'>
                        <Pressable className='flex-col gap-1 w-3/4' onPress={() => handleToggleMode('edit', menu)}>
                          <View className='flex-row items-center gap-1'>
                            <Text className='text-lg font-semibold'>{menu.name}</Text>
                            {!isReorder && <SquarePenIcon size={14} color='#1f2021' />}
                          </View>
                        </Pressable>
                      </View>
                      {!isReorder && (
                        <View className='flex-row items-center gap-5'>
                          <Pressable onPress={() => menu.id && handleDeletePrice(menu.id)}>
                            <TrashIcon size={18} color='#1f2021' />
                          </Pressable>
                        </View>
                      )}
                    </View>
                  </View>
                </View>
              ))}
            </Sortable.Flex>
          </Animated.ScrollView>

[MatiPl01]

Thank you for sharing code. I will look into that.

[MichaelTao]

Hey @MatiPl01 any luck reproducing the issue?

[MatiPl01]

Hey @MichaelTao!

Sorry, I forgot about this problem. Thanks for reminding me about this issue. I think I managed to reproduce it and find a solution which I implemented in #347. Could you test if adding changes from this PR will fix your problem?

[MichaelTao]

Hey @MatiPl01 thanks for the fixes. I think i'm getting issues because my reordering is inside of a bottomsheet. Should there be any problems with the library + bottomsheet?