[RNMobile] Add badges on gifs

[kmdupr33]

Description

This pr adds badges to the GIF images.

This feature was implemented to support some reusability of badges (since the issue mentions that badges are something we're interested in reusing). The Badge and Badgeable components in badgeable.native.js are how we achieve this (limited) reusability.

Badge, as the name suggests, is a simple presentational component that merely handles the styling of the badge and takes in a text prop to support arbitrary text inside the badge.

Badgeable can wrap a component we want to display a badge overtop it's content. A Badgeable component allows us to easily add badges to existing components without duplicating code for overlaying and positioning the Badge component. Moreover, with this approach, changing the positioning of badges can be done in one place instead of every place where a badge is visible.

HOCs and render props were briefly considered as a way of accomplishing this same sort of DRY implementation, but ultimately I decided that these two solutions were overkill. Although either of these solutions could have worked, Badgeable doesn't need add or share state or functionality with the component it's wrapping, so a simpler wrapper component is a better solution.

How has this been tested?

The main sample post has a GIF image, so I simply opened the app and checked to see if the GIF badge was visible over the GIF image and not visible over other images that weren't GIFs.

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR. .

Fixes wordpress-mobile/gutenberg-mobile#968

[test-case-reminder]

Here are some suggested test cases for this PR.

WordPress iOS:

• Simultaneous uploads - steps
• Image block - Insert image from device (failing) - steps
• Image block - Insert image from device (cancel) - steps
• Image block - Add Caption - steps
• Image block - Close/Re-open post with an ongoing image upload - steps
• Image block - Close post with an ongoing image upload - steps
• Image block - Switch to classic editor with an image block in page - steps

WordPress Android:

• Simultaneous uploads - steps
• Image block - Insert image from device (failing) - steps
• Image block - Insert image from device (cancel) - steps
• Image block - Add Caption - steps
• Image block - Close/Re-open post with an ongoing image upload - steps
• Image block - Close post with an ongoing image upload - steps
• Image block - Switch to classic editor with an image block in page - steps

If you think that suggestions should be improved please edit the configuration file here. You can also modify/add test-suites to be used in the configuration.

If you are a beginner in mobile platforms follow build instructions.

[Tug]

@kmdupr33 A quick feedback on the format of your PR.

I think you could have created a draft PR instead of having it as part of the title https://github.blog/2019-02-14-introducing-draft-pull-requests/
But it's ok, I added the "[Status] In Progress" label which has similar meaning ;)

first draft of adding gif functionality #19111

Could you update the title to be more specific? Gutenberg (native) already supports gifs, what we're adding here is the badge. Another nice to have is to use a prefix to indicate that it's a gutenberg mobile related PR: [RNMobile ] PR title.

This pr resolves an issue for gutenberg-mobile

We usually adds that at the end of the PR with the format:

Fixes wordpress-mobile/gutenberg-mobile#968

Github is going to prettify the url as much as possible and it's clearer to see the actual issue number before hovering it to get more info.

[Tug]

I had a few comments but the code looks good so far 👍

As discussed on slack I believe Badge/Badgeable could be moved to packages/components/mobile so we can reuse them for other media content in the future

[Tug]

Quick update for @iamthomasbishop : This is how the badge looks like now (on Android)

[iamthomasbishop]

The styling looks about right, other than the font-size diff that was already mentioned. Thanks for the update!

[Tug]

This LGTM 👍
(You'll need to rebase and fix conflicts before we can merge this PR)

[gziolo]

Any plans to rebase and merge this PR or should it be closed? It looks abandoned 🙁