fix: Invalid ScrollView position on input focus

[MatiPl01]

Description

Issue description

This PR fixes invalid ScrollView behavior when the TextInput component was focused. I noticed that this is caused by the fact that all items rendered within the sortable component use transforms for positioning (as transforms are said to be faster than top/left props).

Unfortunately, the position of the ScrollView is adjusted based on the render position of the TextInput component but in our case all items are rendered in the top left corner of the sortable component container and then transformed to their proper positions on the screen.

Solution

I decided to replace transforms with top and left layout props which seem to work fine.

Test example

Before	After
Screen_recording_20250726_010612.mp4	Screen_recording_20250726_010142.mp4

Source code

import { useCallback } from 'react';
import { TextInput, View } from 'react-native';
import Animated, { useAnimatedRef } from 'react-native-reanimated';
import Sortable, { type SortableGridRenderItem } from 'react-native-sortables';

const testData = new Array(50).fill(0).map((_, i) => ({
  id: i,
  name: `Exercise ${i}`
}));

export default function PlaygroundExample() {
  const scrollableRef = useAnimatedRef<Animated.ScrollView>();

  const renderExerciseItem = useCallback<
    SortableGridRenderItem<(typeof testData)[0]>
  >(
    ({ item }) => (
      <View style={{ backgroundColor: '#ef4444', height: 160 }}>
        <TextInput
          keyboardType='numeric'
          placeholder={`TextInput#${item.id}`}
        />
      </View>
    ),
    []
  );

  return (
    <Animated.ScrollView
      contentContainerStyle={{ padding: 16, paddingBottom: 128, gap: 16 }}
      keyboardShouldPersistTaps='handled'
      ref={scrollableRef}>
      <Sortable.Grid
        activeItemScale={1.02}
        columnGap={40}
        columns={1}
        data={testData}
        enableActiveItemSnap={false}
        overDrag='vertical'
        renderItem={renderExerciseItem}
        rowGap={10}
        scrollableRef={scrollableRef}
      />
    </Animated.ScrollView>
  );
}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
react-native-sortables-docs	⬜️ Ignored (Inspect)	Visit Preview		Jul 25, 2025 11:02pm

[MatiPl01]

Performance

Interestingly, the performance got even better on android. It seems that the application of transforms on android is slow and it is better to use theoretically slower layout props to position items, so this PR will also introduce better performance of items reordering.

Test example

The test example consists of 300 animated views which position is changed either via x and y translation or via the top/left layout position.

Fabric (New Arch)

Slightly faster with layout props

transform	top/left
Screen_recording_20250726_004111.mp4	Screen_recording_20250726_004133.mp4

Paper (Old Arch)

Almost 2 times faster with layout props

transform	top/left
Screen_recording_20250726_003919.mp4	Screen_recording_20250726_003851.mp4

[Copilot]

Pull Request Overview

This PR fixes an issue where ScrollView positioning was incorrect when TextInput components inside sortable items received focus. The problem occurred because sortable items used CSS transforms for positioning, which caused the ScrollView to calculate incorrect positions based on the original render location rather than the transformed position.

• Replaced transform-based positioning with layout properties (top/left)
• Removed architecture-specific positioning logic and the isPaper() utility function
• Simplified the positioning system by using a single position reference instead of separate initial and current positions

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
useItemStyles.ts	Core fix replacing transform positioning with layout props and simplifying position management
platform.ts	Removed unused isPaper() function that was checking for Paper architecture
SortableGrid.tsx	Changed flexBasis from undefined to 'auto' for better layout behavior

[MatiPl01]

Well, performance is not improved then the onLayout callback is used. It gets even worse, so this PR doesn't really improve perf and makes it even worse. Unfortunately, there is no easy way to ensure that the input works properly so I will leave it with a worse perf for now and will have to reimagine the entire implementation in the future - likely in the sortables v2.

[MatiPl01]

🎉 This issue has been resolved in version 1.8.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀