Setup with react-native-navigation

[calumgould]

Hi,

I'm looking for a way to render the toast over the top of the navigation elements with react-native-navigation, similar to how its described for react-navigation https://github.com/calintamas/react-native-toast-message#how-to-render-the-toast-when-using-react-navigation

Is it possible to achieve this same behaviour for react-native-navigation? Couldn't find any issues/instructions for this.

Thanks

[german970814]

+1

[rahmatkruniawan]

+1

[luanccp]

+1

[rezn5447]

export function registerScreen<P>(
  name: string,
  Component: React.ComponentType<P>,
) {
  Navigation.registerComponent(
    name,
    () => props => {
      // Not rendering on topNav Buttons
      if(name === ROUTES.LOGIN_BUTTON) {
        return <Component {...props} />
      } else {
          return (
            <>
              <Component {...props} />
              <Toast ref={(ref) => Toast.setRef(ref)} />
            </>
          );
        }
      },
    () => Component
  );
}
`
worked for me

[rezn5447]

From RNN: https://wix.github.io/react-native-navigation/api/component#registering-a-component-wrapped-with-providers

[calumgould]

@rezn5447 is there any extra magic here to make this work?

I tried much the same at the time, but the toast message was still appearing from behind the topBar.

My application is wrapped with quite a few providers which I feel might be causing these issues:

    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <ReduxNetworkProvider>
          <Suspense fallback={<LoadingView />}>
            <I18nextProvider i18n={i18n}>
              <>
                <C {...props} />
                <Toast ref={(ref) => Toast.setRef(ref)} />
              </>
            </I18nextProvider>
          </Suspense>
        </ReduxNetworkProvider>
      </PersistGate>
    </Provider>

[kozillla]

Any update on this ? Toast comes from behind TopBar when using react-native-navigation.

[loh-aivy]

      <AppStack.Screen
          name='NavigateToScreen'
          children={({ navigation, route }) => (
            <>
              <NavigateToScreen navigation={navigation} route={route} />
              <Toast />
            </>
          )}
        />

worked for me

[AhmedHF]

not working on all screens? why

[AhmedHF]

import React from 'react';
import Toast from 'react-native-toast-message';
import { AppView } from '../common';

const AppToast = () => {
  const ref = React.useRef();
  return (
    <AppView flex stretch>
      <Toast ref={ref} />
    </AppView>
  );
};

export default AppToast;

I create a component and call it at the end of the screen to show toast
this worked for me