z-index of navigation bar in react-native

Question

I have tinder like cards that can be swiped left and right out of screen, but they render below the navigation bar, is there anyway to re-order the index here? My code is setup quite standard, so by logic the bar would always be on top - i think? cant think of anyway around it

renderScene(route, nav) {
    const {globalNav} = nav.props;
    switch (route.name) {
        case 'settings' :
            return <Settings />;

        case 'feed' :
            return <Feed />;

        case 'matches' :
            return <Matches />;
    }
}

render() {
    const {globalNav} = this.props;
    return (
        <Navigator
            renderScene={this.renderScene}
            navigationBar={ <Navigator.NavigationBar routeMapper={NavigationBar} />}
        />
    );
}

see screen shot

Answer 1

The zIndex layout property worked for me!

From Layout Props Description

zIndex controls which components display on top of others. Normally, you don't use zIndex. Components render according to their order in the document tree, so later components draw over earlier ones. zIndex may be useful if you have animations or custom modal interfaces where you don't want this behavior.

It works like the CSS z-index property - components with a larger zIndex will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details.