Bottom Sheet as a detail editor

[yolpsoftware]

We are using the Bottom Sheet in a few screens where some "items" are listed. If the user clicks on one of the item, a bottom sheet opens where the user can edito the details of the selected item. Some of the screens have just one item, others have several.

To avoid repeating code, we created a reusable component DetailsEditor which can be placed in whatever screen like this:

<DetailsEditor selectedItem={selectedItemId} onClose={() => setSelectedItemId(null)} />

As soon as the prop selectedItem is set to an ID, the editor bottom sheet opens and lets the user edit the details. The onClose prop is used to signal that the editor should be closed, so the selectedItemId state variable is set to null.

Unfortunately, all the simplicity of the react-native-bottom-sheet API seems to have gone in that scenario. Maybe we were doing it in an unnatural way, but our code ended up very messy. We had great difficulty to cover everything, but in the end, everything worked fine.

However, we are sure there must be an easier way to do this. Maybe #1171 would make this easier.

Is this use case covered in an example somewhere?