React-Navigation (instead of Navigator) Compatibility

I am writing a project that navigates using react-navigation and i want to use lightbox however lightbox requires Navigator to function properly. I was hoping to see if i could write react-navigation support into the component and then allow a PR to happen. The possibility in my mind is using Navigator + react navigation so that i dont have to re-make my navigation because you could have both “this.props.navigator” and “this.props.navigation” but i am not sure how some of the navigation functions work.

I have been looking into lightbox.js at the occurences of Navigator and i am searching through the react-navigation api to see if i can find replacements for the functions used as it only occurs 8 times (2 of which are just checks to see if navigator is present).

lightbox.js - navigator occurences (cant get the formatting right)

’ open: function() { this._root.measure((ox, oy, width, height, px, py) => { this.props.onOpen();

        this.setState({
          isOpen: (this.props.navigator ? true : false),
          isAnimating: true,
          origin: {
            width,
            height,
            x: px,
            y: py,
          },
        }, () => {
          if(this.props.navigator) {`

create a route that will work with navigation (for react-navigation it would be the navigationOptions)

var route = { component: LightboxOverlay, passProps: this.getOverlayProps(), };

fetch the current set of routes

var routes = this.props.navigator.getCurrentRoutes();

push a route onto the stack

routes.push(route);

some sort of reset for the stack that Navigator does (still looking into it, any help knowing what this does would be nice.

this.props.navigator.immediatelyResetRouteStack(routes);

Then the rest of the code for opening the lightbox runs

} else { this.setState({ isOpen: true, }); } this.setTimeout(() => { this.state.layoutOpacity.setValue(0); }); }); }); },

for closing the stack the same lines are called but with .pop() instead of .push()

Anyone with experience of both react-navigation and react-native-lightbox would be a great help.

[acomito]

No @nuttylord I ended up avoiding a lightbox in the app for now.

[acomito]

I was able to get it working with react-navigation by just passing navigator={null}

My only issue was the exit animation was a little weird (images were in a sort of 3 column grid/rows via flexbox). But I think that was just flexbox not your package?

react-navigation was suppose to add “shared element transitions”, but not sure where that’s at. I would think that could be used to build a lightbox pretty easily.

https://github.com/react-community/react-navigation/issues/175