Splash screen; restyle

[jtklein]

Restyle the Splash screen according to the current designs.

[kueda]

Looked into this today and I need some intput from @abhasinat to move forward, specifically I need to know which of the many photo backgrounds in the designs he wants to use, or if he actually wants the background photo to vary by device size, device model, randomly, or something else. Since he's out for a while, I'll assign this to him and punt this to the next feature iteration. FWIW, there's a POC of plain, single-photo iOS updates in https://github.com/inaturalist/iNaturalistReactNative/tree/898-splash-screen

FWIW, using a photo background may run afoul of iOS's memory usage restrictions. When I add a photo to the launcher layout in XCode it complains about this and says the photo may not display during app launch, and that is indeed what I observe when I run a dev build on a real device. When I run a Release build on a real device the photo doesn't appear either, but the splash appears so briefly that you barely even notice.

A package like https://github.com/zoontek/react-native-bootsplash may provide us with more flexibility with splash screen content, but we will probably still run into memory constraints, or have issues with the photo loading later than the bird logo. It would provide us with some more in-app control over keeping the splash on screen while we do things like set up Realm, plus we could more easily add a bit of animation.

[abhasinat]

SImplified this design in Figma. fwiw- I think we did this in Seek and I really like it. I'd be open to an animation on the splash screen in the future as well

[kueda]

The current Figma designs show the "blue wing background" splash screen, even though that matches the "blue wing background" app icon that I think we don't want, so I need input form Abhas again on what we actually want here.

[kueda]

Ok, this is not working for me. I've tried

1. Adding a UIImage to the LaunchScreen storyboard: it never appears on device
2. Making sure that image is under 100kb: it never appears on device
3. react-native-bootsplash: it doesn't support image backgrounds because it doesn't seem doable on Android
4. Editing Seek to replace its splash image with this one (works) and then making our storyboard match the Seek one exactly, including constraints: the image never appears on device even though it appears just fine when building Seek

So, I have no idea what's going on here. I suspect some weird XCode evil is happening and I just don't know what secret checkbox isn't being checked. Either someone with more experience needs to walk me through this, or someone else needs to give this a try, or we give up on this and keep the (IMO) more sensible white logo on a green background.

My last failed attempt at this is in https://github.com/inaturalist/iNaturalistReactNative/tree/898-splash-screen

[kueda]

And now it's working, w/ help from Alex and Amanda. Some important things I've learned about iOS splash/launch screens:

1. You can't have transparency. If you have a UIImage with an alpha of something less than 1, iOS won't show it
2. There is a magical launch screen cache somewhere that cannot be cleared without restarting the device. Yes, seriously. Turn it off and turn it on again. Not joking about this joke of a developer experience. This was the only way I could get changes to an image in my launch screen storyboard to appear on device. Changes to something like view background color worked fine w/o restart. Thanks to Alex for this tip.
3. Positioning and scaling in a storyboard for multiple screen sizes is magical and hard to control. I ended up scaling every element to the size of the screen and controlling the scale of the logo in the logo SVG itself.