How to do Reactive.TextInput in React Native properly?

[thiagobrez]

Hey! I believe I'm doing something wrong due to being very new to Legend State and observables, so I'd like to ask :)

I'm trying to render a list of Reactive.TextInputs, and every time you change the input, it syncs with Supabase using the available integration.

The problem I have is that as the input auto-saves, the list items seem to re-render and the text value in the TextInput gets replaced, so you loose the text you were typing, and it becomes a very jarring UX.

---

This is what I have currently:

[id].tsx (an Expo Router page)

export default observer(function PostsScreen() {
	const { id: draftId } = useLocalSearchParams<{ id: string }>();

        // Is it okay to declare the observable in the component? I need to filter by `draftId` which comes in the URL
	const posts$ = observable(
		customSynced({
			supabase,
			collection: "posts",
			filter: (select) => select.eq("draft_id", draftId),
			persist: { name: `posts-${draftId}` },
		}),
	);

        // I found no better way to convert the observable value to an array to use in the list?
	const posts = Object.values(posts$.get() ?? {});

	const onCreatePost = () => {
		createPost({ posts$, draftId });
	};

	const renderItem = ({ item, index }: LegendListRenderItemProps<Post>) => {
		const isLastItem = index === posts.length - 1;

		return (
			<PostItem
				post$={posts$[item.id]}
				isLastItem={isLastItem}
				onCreatePost={onCreatePost}
			/>
		);
	};

	return (
		<View style={styles.container}>
			<LegendList
				data={posts}
				renderItem={renderItem}
				estimatedItemSize={80}
                                 ...
			/>
		</View>
	);
});

PostItem.tsx (list item)

export default function PostItem({ post$, isLastItem, onCreatePost }: PostItemProps) {
	return (
		<View style={styles.container}>
                         ...

			{/* @ts-expect-error No types */}
			<Reactive.TextInput
				$value={post$.text}
				inputAccessoryViewID={`accessory-view-${post$.peek().id}`}
				multiline
			/>

			<InputAccessoryView nativeID={`accessory-view-${post$.peek().id}`}>
				<View style={styles.accessoryView}>
					<IconButton name="plus" onPress={onCreatePost} />
				</View>
			</InputAccessoryView>
		</View>
	);
}

---

I've tried different variations of this that I can't count anymore, with/without observer, with/without Supabase realtime, using the Memo component, etc.

I've also tried removing the list entirely, and just rendering a single Reactive.TextInput to see if it would work correctly, but it didn't.

I believe this is not a very uncommon use case, and I might be doing something very wrong that I'm not aware of.

---

Questions:

1. Is it okay to create the posts$ observable in the page component as I'm doing? I found no other better way since I need access to certain data to use in filter
2. Is it the best way to convert the observable value to an array before passing it to the list?
3. And then, can I pass the observable to the list item by indexing? <PostItem post$={posts$[item.id]} />

Any tips appreciated. Thank you!

[thiagobrez]

Fixed it by using a regular TextInput, updating manually on change, and only using a shallow listener in the page!

But I feel like it's a good discussion anyway since I couldn't really make it work with Reactive...