Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add inline view examples to RNTester #24814

Closed
wants to merge 4 commits into from

Conversation

rigdern
Copy link
Contributor

@rigdern rigdern commented May 11, 2019

Summary

Now that inline views are supported on iOS and Android, we can add some examples to RNTester. I brought back examples from 0366349.

I also added some new inline view examples in TextInlineView.js. Note that some examples are only supported on iOS because they rely on the inline view being able to size to content. Android's implementation requires that a width and height be specified on the inline view.

Here are the known bugs illustrated by these examples:

  • ClippedByText
    • Expected: The image/view wraps to the next line (because it is too wide) and gets clipped vertically (because it is too tall).
    • iOS bug: The image/view does not get wrapped to the next line
    • Android bug: The view gets wrapped to the next line but doesn't get clipped vertically. The image appears to be positioned too low.
  • ChangeImageSize/ChangeViewSize:
    • Expected: The "Change Image/View Width" button causes the image/view to toggle between a width of 50 and 100.
    • iOS bug: First update works. Subsequent updates don't get rendered.
    • Android bug: No updates get rendered.
  • ChangeInnerViewSize:
    • Expected: The "Change Pink View Width" button causes the pink inner view to toggle between a width of 50 and 100.
    • iOS bug: First update works but second update CRASHES the app.
    • Android bug: No updates get rendered.

Changelog

[Internal] [Added] - Added inline view examples to RNTester

Test Plan

Verified the new examples in RNTester on iOS and Android.

iOS: New Examples

image

image

image

image

Android: New Examples

image

image

Adam Comella
Microsoft Corp.

Adam Comella added 3 commits May 9, 2019 16:31
This reverts commit b87336b.

Bring back the inline view example
I brought back examples from facebook@0366349. "Inline views" works on iOS and Android. The other two only work on iOS. See the comment for details.

I also added some new inline view examples in TextInlineView.js. "Basic" works well. The others do not:
  - ClippedByText
    - iOS: The image/view do not get wrapped to the next line
    - Android: The view gets wrapped to the next line but isn't clipped vertically. The image appears to be positioned too low.
  - ChangeImageSize/ChangeViewSize:
    - iOS: First update works. Subsequent updates don't get rendered.
    - Android: No updates get rendered.
  - ChangeInnerViewSize:
    - iOS: First update works. Second update CRASHES the app.
    - Android: No updates get rendered.
@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Microsoft Partner: Microsoft Partner labels May 11, 2019
@react-native-bot react-native-bot added the Type: Enhancement A new feature or enhancement of an existing feature. label May 11, 2019
Co-Authored-By: James Ide <ide@users.noreply.github.com>
Copy link
Contributor

@cpojer cpojer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! Thanks for adding examples :)

Copy link
Contributor

@facebook-github-bot facebook-github-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @rigdern in a2a03bc.

When will my fix make it into a release? | Upcoming Releases

@react-native-bot react-native-bot added the Merged This PR has been merged. label May 13, 2019
@rigdern rigdern deleted the rigdern/inline-view-examples branch May 14, 2019 00:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. p: Microsoft Partner: Microsoft Partner Type: Enhancement A new feature or enhancement of an existing feature.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants