Skip to content

Add a note that you may need more than one component in the tree to properly cascade overflow upward #35

@EdwardDrapkin

Description

@EdwardDrapkin

Hey there,

I love this component, it's probably saved me 2-3 days of refactoring a layout.

That said, I had some issues getting it to work because I to use multiple <ViewOverflow> components in the hierarchy to get things to render correctly. Basically my design has a screen split into two halves (when a menu is open) and icons from the right half (menu icons) are supposed to sit on top of the left half (an opacity overlay). I had to put a <ViewOverflow> on the Views that split the screen as well as inside the right side (the menu) itself. I've worked with some other graphics libraries before, so it didn't take more than a few minutes to figure out what was happening, but it wasn't super obvious initially and if I didn't have prior experience, I might not have known to figure out the multiple clipping points and use multiple <ViewOverlay> components.

So I think it might be worth mentioning in the README. Something along the lines of...

Clipping at multiple levels in the component tree

Sometimes absolutely positioned components can be clipped at multiple points in the rendering tree. Image you have a container element that renders a series of box elements and you want to absolutely position something from within the box component. The box itself will clip the absolutely positioned element as well as the container, so you will need to wrap both the container and the box component in <ViewOverflow>.

... but that's pretty poorly worded and I can't do better :(

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions