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

How to implement a blocking modal? #122

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

Comments

Projects
None yet
6 participants
@yaronlevi
Copy link

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

This comment has been minimized.

Copy link
Contributor

samuelkraft commented Sep 28, 2016

@adbl

This comment has been minimized.

Copy link
Contributor

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.

@adbl

This comment has been minimized.

Copy link
Contributor

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...?

@janicduplessis

This comment has been minimized.

Copy link
Contributor

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.

@sibelius

This comment has been minimized.

Copy link
Contributor

sibelius commented Oct 24, 2016

a preset Modal Navigation style would be awesome

@pawlowskim

This comment has been minimized.

Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment