arnnis/react-native-toast-notifications

Toast component for React Native, supports Android, iOS and Web

Hi there 👋

react-native-toast-notifications's Issues

Use React context to share ref

Hey, I like the library, thanks for open sourcing. Have you considered using createContext with a provider to put the ref at the root of the app, and then a useToast hook? I think it would be better than using global.toast, since it stays more in the react world.

Toast left aligned

I'm facing a tiny problem. The toasts are left aligned and not centered in the screen as you can see.

I think by default they should be centered right ?

Horizontal align for React Native Web

Is there a way to change the horizontal align from "center" to "right" or "left" ?

Placement doesn't seem to work

Current behaviour

When using {placement:'top'} the animation of the toast changes to the top animation however the toast remains on the bottom of the page.

Expected behaviour

Toast should be on the top of the page when placement is set to top

Code sample

For Syntax Highlighting check this [link](https://help.github.com/en/articles/creating-and-highlighting-code-blocks)

Screenshots (if applicable)

What have you tried

Your Environment

software	version
ios or android
react-native	0.63.4
react-native-fast-toast	2.2.0
node
npm or yarn

Do we have center placement?

hi, love your works, do we have center placement for toast?

Swipe to close support

Hey.

Do you have any plans for supporting swipe to close?

Is there is a way to close a toast when clicked ?

Great job, smooth and easy to implement.

I couldn't find a way to close a toast when clicked. Any suggestion ?

toast-notifications inside modal.

Current behaviour

toastWarnings doesnt work inside Modal

Expected behaviour

expected to work inside modal, not in parent component

Code sample

running app via USB

Is there way to disable animation?

Is there way to disable animation?

Toast container has wrong width for top and bottom placement

Current behaviour

Toast container is not 100% width, this is a new issue caused by this commit.
Because width in container style was deleted and it value is replaced with width from Dimensions. But only center toast use width prop, top and bottom lack this prop. I think width is required by all of those three placements of toast container.

Expected behaviour

Code sample

For Syntax Highlighting check this link

Screenshots (if applicable)

What have you tried

Fix this issue is easy, just and width in two methods renderBottomToasts and renderTopToasts in toast-container.tsx

Your Environment

software	version
ios or android
react-native
react-native-toast-notifications
node
npm or yarn

add normalColor prop

Hi,
I wanted to change the color for the "normal" type and added style={{ backgroundColor: 'gray' }} to it.
But now if using other types ("danger" for example) the background is still gray - at least when using it on the react native web platform.

Could you please add a "normalColor" prop?
Or is there any other way around this?

Thanks! And great lib, btw!

Solution for close onPress

Motivation

I saw multiple people were searching for a way to close the toast on press, and I found a simple way to make it work closeOnPress, so I just wanted to share if it could help others.

Working solution

useToast.ts

import ToastContainer, {
  useToast as useToastModule,
} from "react-native-fast-toast";
import { ToastOptions } from "react-native-fast-toast/lib/typescript/toast";

/**
 * Toast hook extending the useToast with specific toast variants
 */
export const useToast = (
  globalOptions: { duration: number; closeOnPress?: boolean } = {
    duration: 5000,
    closeOnPress: true,
  }
) => {
  const toast = useToastModule();

  const success = (
    message: string | JSX.Element,
    options?: ToastOptions & {
      onPress?: (id: string) => void;
      closeOnPress?: boolean;
    }
  ) => {
    toast?.show(message, {
      type: "success",
      duration: globalOptions?.duration,
      onPress: () => {
        if (options.closeOnPress || globalOptions?.closeOnPress) toast.hide(id);
        options?.onPress?.(id);
      },
      ...options,
    });
  };

  return { success };
};

Can we get an option to disable swipe for Android? On Press hardly gets called

Hi, first of all thanks for this amazing library!

I had troubles trying to make onPress work with android. Instead of calling onPress it tries to swipe left or right.

Can't customize toast when calling toast outside react component

I am using the example for the FAQ https://github.com/arnnis/react-native-toast-notifications#--how-to-call-toast-outside-react-components

And a provider with customization like for example successColor: 'orange'

Calling toast.show('test',{type:'success'}) works but does not take the customizations into account and I couldn't find another way to add these customizations.

Toast Container's width set to screen width makes it not possible for element to the side to be pressed

Current behaviour

Toast Container's width set to screen width makes it not possible for element to the side to be pressed

Expected behaviour

Components next to the toast, but not underneath should be pressable

Code sample

Here is a repro https://github.com/itsramiel/toast-bug-repro

Screenshots (if applicable)

Screenrecorder-2022-07-20-14-24-38-242.mp4

What have you tried

This bug was introduced by #140 #135
remove setting the width propery. I will submit a pr to fix this

is accessibilityLabel supported(e2e test with appium)

Hello, dear component author,

We are testing our app with appium, we can set a accessiblityLabel for any element and use it in our test script. However, I found that even if I set it for this custom toast component, it's not able to be located.

Any idea? I'd just like to verify the toast message in my test script.

Test script:

  it('should display error message given wrong credentials', async () => {
    await $('~username').setValue('hello');
    await $('~password').setValue('world');
    await $('~btnLogin').click();

    // https://stackoverflow.com/questions/30458931/how-to-test-android-toast-messages-in-appium-selenium-java
    // const message = await $('//android.widget.Toast[1]').getText();
    const message = await $('~toastMessage').getText();
    expect(message).toBe('Wrong ID or Password');
  });

Component code:

 <ToastProvider
        duration={600000}
        renderType={{
          custom_type: toast => (
            <View
              accessibilityLabel="toastView"
              style={{
                backgroundColor: 'rgba(255,27,31,0.60)',
               ...
                top: 334,
              }}>
              <Text
                accessibilityLabel="toastMessage"
                style={{ fontSize: 20, color: '#ffffff' }}>{`${toast.message}`}</Text>
            </View>
          ),

different sort index android and ios

on android new item add to last item position in array but ios added to first position

If this message I use a custom component. can I hide the toast when clicking a button in my custom component?

Use the hook, If this message I use a custom component. can I hide the toast when clicking a button in my custom component? I cannot get this id.

Any help will be greatly appreciated.

How we can use react-native-toast-notifications in class component ?

UseNavigation and useRoute are not working

I have added the ToastProvider as mentioned, Even-though I am getting below issue.

Shaked on mobile web

Current behaviour

RPReplay_Final1658120534.MP4

Expected behaviour

Be smooth line on desktop, ios

Code sample

I'm use default ToastProvider without any props and default toast.show() without any options

Screenshots (if applicable)

attached video

What have you tried

upgrade to latest version 3.3.0

Your Environment

software	version
ios or android	mobile web (safari)
react-native	0.68.2
react-native-toast-notifications	3.3.0
node	16.14.1
npm or yarn	1.22.18

Unexpected token when bundling

After installing, when I run react-native run-android I get the following error:

error: bundling failed: SyntaxError: /Users/nickwoods/Documents/GitHub/client-app/node_modules/react-native-toast-notifications/src/index.ts: Unexpected token (4:12)

  2 | export { default as ToastProvider } from "./hook/provider";
  3 | export { default as useToast } from "./hook/useToast";
> 4 | export type {ToastType} from './hook/context'
    |             ^

Rendering multiple toast

Great job with this library, I really like it. I am struggling to make the toasts build as you have in the gif example so that you can have multiple toasts showing at one time. i.e. the onPress button is clicked multiple times and each click creates a new toast, for each new toast it is rendered above the old one (or the old one is pushed up to make space for the new one).

When I try to render more than one toast, I get a red error:

"Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state."

How did you do it on the gif in the readme? e.g. you click on "normal" toast several times and several toasts are shown at once.

`placement` not working when using the hook

The placement property doesn't seem to be working properly in the context of toast.show(). The toast message just shows up on the bottom as usual.

The ToastOptions interface doesn't include it, and while both ToastProps do, it seems that placement is not intended to be a property of the show method, i.e.:

toast.show('text', {placement: 'top'})

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

I've tried to add a Toast as both global and in one screen and get the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

My project is running in Expo on iOS simulator. Code is copied directly from readme.

Question: Using toast inside and outside react Component

If I want to use the toast inside react components and also in a redux store should I wrap my app in ToastProvider or can I just use:

import Toast from "react-native-toast-notifications";

export default function App() {
  return (
    <>
      <RestOfYourApp />
      <Toast ref={(ref) => global['toast'] = ref} />
    </>
  );

If I can use the above one in anywhere why should I wrap my app in ToastProvider? Are there any benefits

Simple single notification

Hiya,

I was wondering what the best method is for only allowing a single notification on the screen.

I have called toast.hideAll() before calling toast.show(...) but it results in some animation bugs.

Any idea?

cheers

edit:

This seems to work as a patch.

  const run = async () => {
    toast.hideAll()
    await new Promise<void>((resolve) => setTimeout(() => resolve(), 500))
    toast.show(text, { type: variant })
  }
  void run()

Property 'toast' does not exist on type 'Global & typeof globalThis'.

Nice work,

I use React-Native with TypeScript and I define the toast globally on App.tsx like this:

<Provider store={store}>
  <NavigationContainer>
    <Stack.Navigator>
           //....
    </Stack.Navigator>
  </NavigationContainer>
  <Toast ref={(ref) => global["toast"] = ref} placement={"top"} />
</Provider>

And I get the Warning:

TS7053: Element implicitly has an 'any' type because expression of type '"toast"' can't be used to index type 'Global & typeof globalThis'.   Property 'toast' does not exist on type 'Global & typeof globalThis'.

How can I fix this?
Thanks in advance.

Unable to click underlying components

Toast is modal

Unable to click anything else underneath

a parameter that can override this toast modality

Toast with placement "Top" does not take the StatusBar height

Current behaviour

If the StatusBar has a background color, the Toast with placement "Top" is partially hidden by the StatusBar

Expected behaviour

Toast calculate the margin with reference to the StatusBar size

Code sample

toast.show(message, {
      type: 'danger',
      placement: 'top',
      duration: 4000,
      animationType: 'slide-in',
});

Screenshots (if applicable)

What have you tried

toast.show(message, {
      type: 'danger',
      placement: 'top',
      duration: 4000,
      style: { marginTop: StatusBar.currentHeight }, // <- This solve the problem!
      animationType: 'slide-in',
});

Your Environment

software	version
ios or android	9
react-native	0.64.3
react-native-toast-notifications	3.2.3
node	16.13.0
npm or yarn	Yarn 1.23.0-20210726.1745

offset is not provided as prop in toast.show(str, {offset: 30})

Current behaviour

I can't access offset prop in toast.show method.

Expected behaviour

We should be able to access offset (ideally also bottomOffset and topOffset, but that is not mentioned in documentation, so let's focus just on offset).

Documentation example states this:

toast.show("Task finished successfully", {
  type: "normal | success | warning | danger | custom",
  placement: "top | bottom",
  duration: 4000,
  offset: 30  <========== I can't access this.
  animationType: "slide-in | zoom-in",
});

Code sample

Snack example:
https://snack.expo.dev/iidWBs8MB

Screenshots (if applicable)

//

What have you tried

When i set offset (also top and bottom) in provider, it works. But that is global setting i would like to override.

Your Environment

software	version
ios or android	android
react-native	0.64.2
react-native-toast-notifications	3.2.2
node
npm or yarn	yarn

Toast content is not updating

let id = toast.show("Loading...");
toast.update(id, "Loading completed", {type: "success"});

toast.update function is not working.

is it possible to make the messages Queue instead of stacking?

Is there any way to make toast messages in to queue (latest messages in front and old messages in back) instead of showing like a stack?

Swipe up

Hello !

Can I make possible the swipe up with your config options please ?

Thanks

Is there anyway to disable multiple toasts appearing one after the other?

I have used the toast to display when the authToken gets expire. But when multiple apis are called, it shows multiple times. Is there any way to make sure that only one toast appears at a time?

Showing toast on modal

I am using react native modal. But in modal screen I am not able to show toast. Any solution.

EventEmitter.removeListener('change', ...) Method has been deprecated

"react-native": "0.65.1",
"react-native-toast-notifications": "^3.2.2",

I'm getting this warning on IOS (didn't test on android) after notifications dismissed

Infinite duration until closed? (feature request)

Could it be possible to set an option to keep a toast open until closed manually?
It would be useful for toasts that are very important.

toast was show underneath of Modal

Current behaviour

If I have a modal the toast will be blocked by Modal in react-native-web.
I find out the z-index of toast was set to 999, and the default z-index for Modal was 9999.

Expected behaviour

If there is a props allows customizing the z-index level that will be great.

Code sample

For Syntax Highlighting check this link

Screenshots (if applicable)

Toast z-index

Modal z-index = 9999

What have you tried

Was thinking to overwrite the z-index with css, but since css class name is randomize so i couldn't target it.

Your Environment

software	version
chrome	92.0.4515.131
react	17
react-native-toast-notifications	3.1.0
node	14.16.1
npm	6.14.12

improve useToast.d.ts

const toast = useToast() should export only 3 methods: show, update, hide

import * as React from 'react'
import ToastContainer from '../toast-container'

export default function useToast(): Pick<ToastContainer, 'show'| 'update'| 'hide'>

Look better

Export ToastOptions type for composing

Current behaviour

The ToastOptions type is not exported and so consumers can not use it to compose custom types for their use cases.

Ex:

import { ToastOptions } from 'react-native-toast-notifications';

type MyToastOptions = ToastOptions & {
  msg: string;
  icon: React.ReactNode;
};

Expected behaviour

The ToastOptions type is exported

What have you tried

I created a patch for now

diff --git a/node_modules/react-native-toast-notifications/lib/typescript/index.d.ts b/node_modules/react-native-toast-notifications/lib/typescript/index.d.ts
index 01bde8b..9005af6 100644
--- a/node_modules/react-native-toast-notifications/lib/typescript/index.d.ts
+++ b/node_modules/react-native-toast-notifications/lib/typescript/index.d.ts
@@ -2,3 +2,4 @@ export { default } from "./toast-container";
 export { default as ToastProvider } from "./hook/provider";
 export { default as useToast } from "./hook/useToast";
 export type { ToastType } from './hook/context';
+export type { ToastOptions } from './toast';
\ No newline at end of file

Your Environment

software	version
ios or android
react-native
react-native-toast-notifications	3.2.3
node
npm or yarn

Placement "top" has no effect on ToastProvider

Current behaviour

When using the placement="top" param on the ToastProvider, toast messages still default to bottom placement.

Expected behaviour

When using the placement="top" param on the ToastProvider, toast messages should default to top placement.

Code sample

For Syntax Highlighting check this link

const App = () =>
  <ToastProvider placement="top">
      <MyComponent />
  </ToastProvider>

const MyComponent = () => {
  const toast = useToast();

  useEffect(() => {
    toast.show("Hello from top");
  }, []);
  
  return <Text>Hello World</Text>;
}

Screenshots (if applicable)

What have you tried

Your Environment

software	version
ios	iOS 14
react-native	0.64.2
react-native-fast-toast	^3.0.0
node
npm

typescript: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & Props'.

Current behaviour

Getting type error while wrapping provider

Expected behaviour

No TS error

Your Environment

software	version
ios or android	both
react-native	0.65.2
react-native-toast-notifications	3.2.3
node	16
npm or yarn	yarn

toast.show is not a function

Guys thank you so much for the great library! Please can you help me with this error))

Current behaviour

The app crashes with error:

toast.show is not a function. (In 'toast.show('Hello World')', 'toast.show' is undefined

After the app launching get render error.

Expected behaviour

Expect app is not crashing and notification is appearing.

Code sample

I use the same code from your example:

import { useToast } from "react-native-toast-notifications";

const Component = () => {
  const toast = useToast();

  useEffect(() => {
    toast.show("Hello World");
  }, []);
};

and before it I wrapped my app.tsx to provider:

  <ToastProvider>
     <RestOfYourApp />
  <ToastProvider/>

Screenshots (if applicable)

What have you tried

Your Environment

software	version
ios or android	both platform
react-native	0.64
react-native-toast-notifications	3.2.3
node	14.18.3
yarn	1.22.17

Export

Current behaviour

Expected behaviour

Code sample

For Syntax Highlighting check this link

Screenshots (if applicable)

What have you tried

Your Environment

software	version
ios or android
react-native
react-native-toast-notifications
node
npm or yarn

toast.hide('id') doesn't work. Only hides toast when touching screen after calling the toast.hide('id') function

I am using a button to show and then hide a toast with the same ID.
Somehow I can't manually get the toast to hide. I am making sure to use a unique ID, used only for this one toast.
I can update some things like "message" or "type", which are reflected immediately, but even if I update duration to be only 1 second, it still wont go away, until I interact with the screen.
toast.hideAll() also doesnt work until the screen has been touched,

I am providing Toast using the alternative way, as shown here:
https://github.com/arnnis/react-native-toast-notifications#--how-to-call-toast-outside-react-components

This is all happening with a button press inside a component.

Any help please?

Feat req: alert style

Similar to https://github.com/seniv/react-native-notifier

In Android 12 the onPress is not working

Current behaviour:-

Hi team in Android 12 the OnPress is not working, on Android 10 it is working fine

Expected behaviour:-

the onPress should work in android 12

Code sample:-

const chattoast = useToast();
chattoast.show(toastMessage, {
type: "success",
onClose: () => {
console.log("CLOSE HANDLER")
},
onPress: () => {
chattoast.hideAll()
console.log("Navigation HANDLER")
chatNavigationHandler()
},
style: {
marginBottom: 100
},
duration: 5000,
})

Environment

software	version
android	12
react-native	0.66.3
react-native-toast-notifications	3.2.3
node	v14.17.5
npm or yarn	yarn

Toast renders under keyboard

Current behaviour

I'm showing an error toast while the keyboard is open, and it renders below the keyboard.
This is on iOS, and I haven't tested Android (yet, I will).

Expected behaviour

The toast's bottom offset should adjust to the keyboard height so it is visible when shown.

Code sample

If necessary I will make one, I am just busy for the rest of today.

Screenshots (if applicable)

https://streamable.com/0yge8f

What have you tried

I have not tried any manual workarounds yet, but my initial thought would be to use react-native-keyboard-height, and pass the keyboard height to the bottom offset at the callsite. However, if the keyboard was to close while the toast is showing, it would not move, so it's not an ideal solution.

Your Environment

software	version
ios or android	ios12
react-native	0.63.3
react-native-fast-toast	1.1.0
node	10
npm or yarn	1.22.5

---

If a code sample is necessary I will provide one as soon as I get the chance, I'm just busy for the rest of today. I will edit this as and when I do that.
I could also probably make a PR to fix this myself.

not centering on landscape mode

Current behaviour

• when the device is rotated to landscape mode, the toast doesnt seem to center when shown.

• it render in the left side of the screen either top or bottom left.

Expected behaviour

• should center in any orientation

• should center in any orientation