Skip to content
This repository has been archived by the owner. It is now read-only.

How to implement a blocking modal? #122

Open
yaronlevi opened this issue Sep 27, 2016 · 6 comments
Open

How to implement a blocking modal? #122

yaronlevi opened this issue Sep 27, 2016 · 6 comments

Comments

@yaronlevi
Copy link

@yaronlevi yaronlevi commented Sep 27, 2016

Is there a built in way to show a transparent modal that blocks the whole screen and sits on top of it?

@samuelkraft
Copy link
Contributor

@samuelkraft samuelkraft commented Sep 28, 2016

Loading

@adbl
Copy link
Contributor

@adbl adbl commented Oct 11, 2016

I'm also trying to accomplish this with no success so far.

@samuelkraft how would one go about to override ExNavigationStackItem or its style?

I tried the following:

  static route = {
    navigationBar: {
      visible: false
    },
    styles: {
      ...NavigationStyles.Fade,
      sceneAnimations: (props) => ({
        ...NavigationStyles.Fade.sceneAnimations(props),
        backgroundColor: 'transparent'
      })
    }
  };

which, if I read the code correctly should override the style. the View does seem to get color: transparent according to inspector, but the background is rendered as black. I'm expecting to see the route below to show through.

Loading

@adbl
Copy link
Contributor

@adbl adbl commented Oct 12, 2016

Ok cool. The problem was that the Fade styles fade out the previous routes, hence black background I was seeing. I changed that in the sceneAnimation function below:

  static route = {
    navigationBar: {
      visible: false
    },
    styles: {
      ...NavigationStyles.Fade,
      sceneAnimations: (props) => {
        const {
          position,
          scene,
        } = props;

        const index = scene.index;
        const inputRange = [index - 1, index, index + 1];

        const opacity = position.interpolate({
          inputRange,
          outputRange: [0, 1, 1],
        });

        return {
          opacity,
          transform: [
            { translateX: 0 },
            { translateY: 0 },
            { scale: 1 },
          ],
          backgroundColor: 'transparent',
          shadowOpacity: 0
        };
      }
    }
  };

Nice! Still this doesn't seem to be the right place to "override" backgroundColor as it has nothing to do with animations...?

Loading

@janicduplessis
Copy link
Contributor

@janicduplessis janicduplessis commented Oct 14, 2016

Ended up doing something similar in my app too, maybe having a preset Modal Navigation style would be a good solution.

Loading

@sibelius
Copy link
Contributor

@sibelius sibelius commented Oct 24, 2016

a preset Modal Navigation style would be awesome

Loading

@pawlowskim
Copy link

@pawlowskim pawlowskim commented Feb 20, 2017

There is a way to do this. I have tried just put react Modal view as a single route and try to push it as normal view. Yes, it adds to current stack (for tabs for example) but since it's blocking modal you must close it via this.props.navigator.pop() to go back. Only animation could be problematically in this solution

Loading

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants