Add modal with web support and animations

[RichardLindhout]

Fixes: #1020

[RichardLindhout]

Improvement would be listening to animationEnding instead of the

 setTimeout(() => {
        setDelayUnmounting(false)
      }, animationDurationMs + 100)

Also the internalVisible could be removed in favor of css animations instead of transition. Is it possible to add a css animation with React Native Web styles?

[RichardLindhout]

I'm rewriting this partly to support multiple modals on top of each other while keeping focus at the current modal :)

[necolas]

There's already another PR for modals that you should coordinate efforts with. I'd rather not use class components or Animated in the implementation. But that PR is more comprehensive. #1646 @imnotjames

[imnotjames]

👋 Hi there! Do check out the PR I'd opened a while back. It might be able to handle many of the use cases a modal should, along with a number of accessibility efforts baked in.

@necolas Oh, wonderful. You've moved away from using class components. At the time when I originally wrote the PR everything was using class components - so I kept it uniform with all the rest. I'll quickly update my PR to be uniform with the rest of the project!

[RichardLindhout]

Ah that looks more complete indeed. I will post my final code here anyway since maybe there are things we could pick from this PR (when I update the code)

The animations would be nice to be done in CSS instead of Animated since Animated can be quite laggy with animating modals.

E.g.

 fadeIn: {
    animationKeyframes: [{ '0%': { opacity: 0 }, '100%': { opacity: 1 } }],
    animationDelay: 0,
    animationDuration: `${animationDurationMs}ms`,
    animationTimingFunction: 'linear',
  },
  slideIn: {
    animationKeyframes: [
      {
        '0%': {
          transform: [
            {
              translateY: '100%' as any,
            },
          ],
        },
        '100%': {
          transform: [
            {
              translateY: 0,
            },
          ],
        },
      },
    ],
    animationDelay: 0,
    animationDuration: `${animationDurationMs}ms`,
    animationTimingFunction: 'linear',
  },

[imnotjames]

I think the issue with the CSS animations was that I was having trouble setting up a callback to fire after they'd completed.

Is that possible with CSS animations now?

[RichardLindhout]

I did have the same problem, I just fixed it but it would be even cleaner if we could use the onTransitionEnd provided by React.

I now listen to 'transitionend' events.

[RichardLindhout]

Here is an updated example with the transition end.

I use the animation properties for the start animation and the transition properties for the out animation. I delay the modal closing till the transition out animation has ended.

[RichardLindhout]

When a modal closes it also focused back on the previous modal.

[RichardLindhout]

[ x ] Hides app content from screen-readers when active.
[ x ] Traps focus.
[ x ] Built-in Escape-to-close mechanism.
[ x ] Focused on previous opened modal when modal on top of it closes
[ x ] Hides modals below visible ones for screen-readers

I think the other PR is more completed now (#1646). And is nicely done with animationEnd, looking good @imnotjames 👍

[necolas]

Thanks for putting this together and helping with the other PR @RichardLindhout! Going to close this now and direct any further suggestions to the other PR under review