React hook form doesn't work with flash list in react native

[milon27]

i have a react hook form fields list, by which I am rendering list of input element on flashlist, all works fine but when I manually update the value of the list state using react-hook-form setValue function it does update the fields list but the UI is not updated specially input field value

Expected behavior

TextInput Value should update

To Reproduce

• after running this code. you will get 2 button

1. set value
2. submit
   set value should set random value on the input field. it won't be visible with the flash list. it will visible with flat list. to check actually its set new value just click on submit you will see the taost of new values. as well as in the console.

code

import { FlashList } from "@shopify/flash-list"
import React, { useEffect, useState } from "react"
import { Controller, useFieldArray, useForm } from "react-hook-form"
import { FlatList, Text, View, TextInput, Button, ToastAndroid } from "react-native"

interface IData {
    list: {
        name: string
        age: string
    }[]
}

const TestInput = ({ control, name }: { name: string; control: any }) => {
    return (
        <Controller
            name={name}
            control={control}
            render={({ field }) => {
                return <TextInput keyboardType="number-pad" value={field.value} onChangeText={field.onChange} />
            }}
        />
    )
}
export default function SingleMealScreen() {
    const { control, setValue, handleSubmit } = useForm<IData>({
        defaultValues: { list: [] },
    })
    const { fields } = useFieldArray({
        name: "list",
        control,
    })
    const [reload, setReload] = useState(false)

    useEffect(() => {
        const random = Math.floor(Math.random() * 100)
        setValue("list", [
            {
                age: (random === 0 ? 7 : random).toString(),
                name: "milon",
            },
            {
                age: (random === 0 ? 7 : random + 1).toString(),
                name: "rahim",
            },
        ])
    }, [reload])

    const onSubmit = (data: IData) => {
        console.log({ data: JSON.stringify(data) })
        ToastAndroid.showWithGravity(
            "result: " + data.list.map(te => te.age).toString(),
            ToastAndroid.LONG,
            ToastAndroid.BOTTOM
        )
    }

    return (
        <View className="min-h-[200px]">
            <Text className="text-primary-dark">SingleMealScreen</Text>
            <Button
                title="set value"
                onPress={() => {
                    setReload(old => !old)
                }}
            />

            <FlashList
                data={fields}
                renderItem={({ item, index }) => {
                    return (
                        <>
                            <Text>{item.name}</Text>
                            <TestInput control={control} name={`list.${index}.age`} />
                        </>
                    )
                }}
                keyExtractor={item => item.id}
                estimatedItemSize={50} // height of the single item
            />
            {/* <FlatList
                data={fields}
                renderItem={({ item, index }) => {
                    return (
                        <>
                            <Text>{item.name}</Text>
                            <TestInput control={control} name={`list.${index}.age`} />
                        </>
                    )
                }}
                keyExtractor={item => item.id}
            /> */}

            <Button
                title="Submit"
                onPress={async () => {
                    await handleSubmit(onSubmit)()
                }}
            />
        </View>
    )
}

[Moshyfawn]

I've not looked too deep into your use-case, since it would take a while for me to get a React Native sandbox running, but I believe most of the virtual lists including FlashList should generally work the same, so this section on virtual lists might help you solve it.

[milon27]

not really solve my issue. please check the issue please

[milon27]

useEffect(() => {
        const random = Math.floor(Math.random() * 100)
        setValue("list", [
            {
                age: (random === 0 ? 7 : random).toString(),
                name: "milon",
            },
            {
                age: (random === 0 ? 7 : random + 1).toString(),
                name: "rahim",
            },
        ])
    }, [reload])

here setValue doesn't rerender the list. is there any way we can do rerender, maybe generate a completely new list with new field.id

[Moshyfawn]

From what I've been able to compile, you need to provide a non-empty container element to renderItem with the key prop set to item.id

<FlashList
  data={fields}
  renderItem={({ item, index }) => {
    return (
-     <>
+     <View key={item.id}>
        <Text>{item.name}</Text>
        <TestInput control={control} name={`list.${index}.age`} />
-     </>
+     </View>
    )
  }}
  keyExtractor={(item) => item.id}
/>

[Moshyfawn]

Here's a working Snack

[milon27]

let me try this.

[milon27]

it works thanks a lot