Image caption editing

[beaucollins]

Image caption editing for observation form uploads.

iOS

https://github.com/NWACus/avy/assets/19795/003a6353-cf1a-4ee6-81b9-51b12e625097

Android

Note: Android fails to auto-open when focusing a TextField. A potential hack is to use a setTimeout to open it after it's animated in.

https://github.com/NWACus/avy/assets/19795/9c9810b3-0015-462c-a81d-70039cd18f15

[beaucollins]

It seems like that might make the state management easier here, allowing us to simply set the caption value in the ObservationImageEditView itself as opposed to having to use a navigation prop to back-propagate a setter.

The tradeoff here is pretty big for the user experience we can deliver. Probably worth syncing up on to see which ones we want to make.

[beaucollins]

I don't think we'd be able to duplicate the form management that TextField does, and the end user experience tradeoff will be more like this where the navigation bar will be on top of everything still.

react-navigation doesn't seem to give us any good apis to control the header or tab bar presentation from one of its screens (or child Navigator).

https://github.com/NWACus/avy/assets/19795/d5259da8-3bf4-42e4-b398-2793ef59189b

[beaucollins]

Trying to see what we can do with the navigation bar and looks like we should be able to hide it from a screen, but only with Android

  /**
   * Sets the visibility of the navigation bar. Defaults to `false`.
   *
   * @platform android
   */
  navigationBarHidden?: boolean;

So assuming we're tracking the state within SimpleForm:

  useEffect(() => {
    const navigationBarHidden = editingImageCaption != null;
    navigation.setOptions({navigationBarHidden});
  }, [editingImageCaption, navigation]);

---

Update In the end it seems to just flash the navigation bar, something else is always attempting to turn it back on.

[stevekuznetsov]

Hm, that's a huge shame ... point taken on the UX impact for sure. We were able to get a full-screen modal with the AvalancheCenterSelectionModal which seems to hide everything from the navigation layer, but I don't know if it would apply here. I don't want to ask you to go on a goose-chase but if you have a chance to look into that overlay, it would be good to know if it would be something we could leverage here for the captions to try to get the best of both worlds.

[beaucollins]

Ha, the more obvious answer via your AvalancheCenterSelectionModal suggestion: just use react-native's Modal.

[beaucollins]

721 updates the form handling so that images can be managed in a comparable way to the other fields.

[beaucollins]

@stevekuznetsov this now implements everything based on a Modal.

To make it work with useForm() like TextField does this is built on #721

[stevekuznetsov]

/preview

[github-actions[bot]]

expo_preview: failed ❌ https://github.com/NWACus/avy/actions/runs/8490959173

[stevekuznetsov]

When you rebase, if you don't mind squashing, it would help review if you'd like to have each commit get some attention.

[beaucollins]

When you rebase, if you don't mind squashing, it would help review if you'd like to have each commit get some attention.

Would it be useful to make a fresh PR since this has so much noise in it now related to all the others I've spun out of these changes?

[stevekuznetsov]

Up to you! I don't mind keeping it here.

[stevekuznetsov]

/preview

[github-actions[bot]]

expo_preview: failed ❌ https://github.com/NWACus/avy/actions/runs/8559692121

[stevekuznetsov]

/preview

[github-actions[bot]]

Preview in Expo Go

iOS	Android
exp://u.expo.dev/update/16dbd65a-11d7-4e87-8403-f24458aab1e4	exp://u.expo.dev/update/fc83547c-f27a-4a58-af35-207ff3cef66d

[github-actions[bot]]

expo_preview: succeeded ✅ https://github.com/NWACus/avy/actions/runs/9003808855