rendering global concerns, such as toasts

[mschipperheyn]

There are some global concerns that apply irrespective of Scene, such as toasts and bottom navigation bars. I would like to be able to render these on each scene of a DrawerNavigator, but it cannot overlay the slide out menu.

How would I go about this? There doesn't seem an obvious and I don't want to modify render functions on each Screen. Ideally, I would want to basically wrap the Scene component, but that doesn't seem to be the idea. Any other ways to achieve this?

[mschipperheyn]

Ok, so the solution I tried is creating a SceneWrapper and applying it like so:

@connect(
    state => ({
        status: state.status,
    }),
    dispatch => ({
        statusActions: bindActionCreators(statusActionCreators, dispatch),
    }),
)
export default class SceneWrapper extends React.Component {
    static propTypes = {
        isHeader: PropTypes.bool,
    };

    static defaultProps = {
        isHeader: true,
    };

    getConnectionToast() {
        const { isHeader } = this.props;

        return <ConnectionToast isHeader={isHeader} />;
    }

    getUnreachableToast() {
        const { isHeader } = this.props;

        return <UnreachableToast isHeader={isHeader} />;
    }

    _onStatusHide() {
        this.props.statusActions.hideStatus();
    }

    getStatusToast() {
        const { status } = this.props;
        return <StatusToast {...status.toJS()} onHide={this._onStatusHide} />;
    }

    render() {
        const { navigation } = this.props;

        const childrenWithProps = React.Children.map(this.props.children, child =>
            React.cloneElement(child, {
                navigation,
            }),
        );

        return [
            childrenWithProps,
            this.getConnectionToast(),
            this.getUnreachableToast(),
            this.getStatusToast(),
        ];
    }
}

import SceneWrapper from 'modules/navigation/components/SceneWrapper';
import { DrawerNavigator, StackNavigator } from 'react-navigation';

const applySceneWrapper = scene => <SceneWrapper>{scene}</SceneWrapper>;

const loginRoutez = {
    Login: {
        path: 'login',
        getScreen: () => applySceneWrapper(require('screens/LoginScreen').default),
    },
    [...]
};

const ScreenStack = StackNavigator(
   loginRoutez,
  {
    initialRouteName: 'Login'
  }
);

const PrimaryNav = DrawerNavigator({
    DrawerStack: {
      screen: ScreenStack
    }
});

But I'm getting The getScreen defined for route 'Login didn't return a valid screen or navigator.

Any suggestions?

[kelset]

Hi @mschipperheyn! It looks like this is a general question about react-navigation: I suggest next time you use Stack Overflow which is better suited for answering these types of questions. I also encourage you to join the Reactiflux community on Discord. There are React Native and React Navigation channels with helpful people who might be able to answer your question. I would also like to mention that there is a collection of helpful links and tutorials for React Navigation here which might be helpful for you.

That said, I also suggest you read the ongoing article series about how to do advanced navigation with a Drawer on Medium, I think it will help you.

If you believe that you are experiencing a bug or have a feature request, please open a new Issue following the dedicated template or submit a PR.

[mschipperheyn]

Sure, but perhaps I should have phrased this as an issue:

The getScreen defined for route 'Login didn't return a valid screen or navigator. occurs because your not allowed to return functions on the getScreen key. That seems rather arbitrary to me.

[alextorn]

@mschipperheyn how did you solve this issue?

[rcorrie]

I am also interested in this. Is there a recommended approach @kelset for rendering global concerns using react-navigation?

Edit: This answered my question #456

[brentvatne]

this is a legitimate weak point in react-navigation at the moment, please discuss in react-navigation/rfcs#15