LUN-400: Image for own vocabulary

[ztefanie]

This pull request belongs to an issue on our bugtracker.
You can find it there by looking for an issue with the key which is mentioned in the title of this pull request.
It starts with the keyword LUN.

Should work for Android and iOS. Saves images in app specific storage for both.

[charludo]

Looks like the failing tests are due to the same error we've talked about in Lun-407 recently.

Adding jest.mock('@react-navigation/native') here should fix it.

[steffenkleinle]

Looks really good already, well done! Tested on android.

Things I noticed:

1. The error messages of the image overlay are not adjusted, e.g. it says Kamerazugriff zum Scannen von QR-Codes erforderlich even though I am trying to add images for vocabulary.
2. There is no kind of feedback that I already took an image. I think it would be better if the camera overlay would close after taking one image and the user has to klick on Bild hochladen again if more than one images are wanted (I think it will not be that common)
3. Bild hochladen sounds like it is uploaded to a server or something which I personally as a privacy oriented user would be very hesitant to do. Instead, the naming Bild hinzufügen would be better imo. Not sure if we should use plural.
4. Is it planned to add an option to add images from the gallery instead of having to take new pictures?
5. What is the small image button in the bottom left of the camera view doing? Nothing happens for me and I got a unhandled promise rejection once upon clicking it.
6. The view for user vocabulary is broken, see screenshot (probably not done in your PR though).

[ztefanie]

1. The error messages of the image overlay are not adjusted, e.g. it says Kamerazugriff zum Scannen von QR-Codes erforderlich even though I am trying to add images for vocabulary.

Good catch. Fixed.

2. There is no kind of feedback that I already took an image. I think it would be better if the camera overlay would close after taking one image and the user has to klick on Bild hochladen again if more than one images are wanted (I think it will not be that common)

Good point. There is feedback (audio shutter sound), but closing is completely fine too. Changed it.

3. Bild hochladen sounds like it is uploaded to a server or something which I personally as a privacy oriented user would be very hesitant to do. Instead, the naming Bild hinzufügen would be better imo. Not sure if we should use plural.

Naming is a little difficult always, as we try only to use A2 or at least really simple german. I changed to "hinzufügen" anyways.

4. Is it planned to add an option to add images from the gallery instead of having to take new pictures?

Yes will be done in separate ticket (as mentioned as a todo in the comment).

5. What is the small image button in the bottom left of the camera view doing? Nothing happens for me and I got a unhandled promise rejection once upon clicking it.

Used for selection from gallery, will be done in separate ticket.

6. The view for user vocabulary is broken, see screenshot (probably not done in your PR though).

Not happend in my PR, already fixed this in LUN-420.

[sarahsporck]

Tested on Android.

[sarahsporck]

Not happend in my PR, already fixed this in LUN-420.

Created and already rejected an issue for this (LUN-444). I thought this happened because of my phone resolution ^^. Also it seems, I had a really bad timing when reviewing this PR.

[f1sh1918]

Tested on android and ios
ListItem.tsx line 23, pls add flex: 1; to fix listItem fullwidth issue
The rest steffen mentioned is fine for me since select image from gallery is a separate task. Maybe you could just comment out the gallery icon for now to not confuse testers

[f1sh1918]

Tested on android (real device) and ios (real device).
Android works fine.
On iOS the images were not shown taken by camera. (real device & emulator)

Additionally there is an initCap for the Word missing (bar)

Looks like document-image couldn't be saved correctly (empty array)
ListItem should be fixed as steffen mentioned (ListItem line 23) width: 100%;
(added it for my screenshot to show missing thumbnail)

[steffenkleinle]

Tested on android, great job 🖼️

[sarahsporck]

When using the article Dropdown I get an error saying Closed Virtualizedlist should never be nested inside scrollview. This should be fixable like this: hossein-zare/react-native-dropdown-picker#56 (comment).
Would you mind if you'd add this line in this PR? :)

[ztefanie]

Tested on android (real device) and ios (real device). Android works fine. On iOS the images were not shown taken by camera. (real device & emulator)

Will have a look at this.

Additionally there is an initCap for the Word missing (bar)

Not part of this ticket. Add to LUN-401 if you think this should be done.

[ztefanie]

Tested on android and ios ListItem.tsx line 23, pls add flex: 1; to fix listItem fullwidth issue

Added with 100%, as you suggested in the other comment

The rest steffen mentioned is fine for me since select image from gallery is a separate task. Maybe you could just comment out the gallery icon for now to not confuse testers

Won't do, as this whole feature is wip. We also didn't do this for other icons, which do nothing yet.

[ztefanie]

When using the article Dropdown I get an error saying Closed Virtualizedlist should never be nested inside scrollview. This should be fixable like this: hossein-zare/react-native-dropdown-picker#56 (comment). Would you mind if you'd add this line in this PR? :)

Done and close the ticket @f1sh1918 opened for it.

[f1sh1918]

Could only test on ios simulator and that worked now. Can not build on real device atm

[ztefanie]

Tested on ios emulator and real devices again, works just fine.