FlashList TextInput: Focus/Text Duplication on Scroll

[krishnan-456]

Current behavior

I have rendered a list of 40 TextInput fields. When I focus or typed on the last TextInput and scroll up, I notice that the focus and typed text is also applied to the first rendered TextInput.

"@shopify/flash-list": "^1.7.1",
"react-native": "^0.75.5"

Expected behavior

Focusing and typing in a TextInput within a long list should only affect the selected TextInput.

To Reproduce

import React from 'react'
import { View, TextInput, StyleSheet } from 'react-native'
import { FlashList } from '@shopify/flash-list'

const App = () => {
  const data = Array.from({ length: 40 }, (_, index) => ({
    key: index.toString(),
    question: `Question ${index + 1}`,
  }));

  // Render each TextInput
  const renderItem = ({ item }: { item: { question: string; answer: string } }) => (
    <View style={styles.itemContainer}>
      <TextInput
        style={styles.input}
        placeholder={item.question}
      />
    </View>
  );

  return (
    <View style={styles.container}>
      <FlashList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item.key}
        estimatedItemSize={50}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  itemContainer: {
    marginBottom: 10,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    paddingHorizontal: 8,
  },
});

export default App;

Flashlist.Text.Duplication.1.mp4

Platform:

• iOS
• Android

Environment

1.7.1