Closed beaucollins closed 3 months ago
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.
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
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.
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.
Ha, the more obvious answer via your AvalancheCenterSelectionModal
suggestion: just use react-native
's Modal
.
images
can be managed in a comparable way to the other fields.@stevekuznetsov this now implements everything based on a Modal.
To make it work with useForm()
like TextField does this is built on #721
/preview
expo_preview: failed ❌ https://github.com/NWACus/avy/actions/runs/8490959173
When you rebase, if you don't mind squashing, it would help review if you'd like to have each commit get some attention.
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?
Up to you! I don't mind keeping it here.
/preview
expo_preview: failed ❌ https://github.com/NWACus/avy/actions/runs/8559692121
/preview
iOS | Android |
---|---|
exp://u.expo.dev/update/16dbd65a-11d7-4e87-8403-f24458aab1e4 |
exp://u.expo.dev/update/fc83547c-f27a-4a58-af35-207ff3cef66d |
expo_preview: succeeded ✅ https://github.com/NWACus/avy/actions/runs/9003808855
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