rnheroes / react-native-toastable Goto Github PK

Hey really loved the library and its simplicity. I was just wondering how to autohide the toast after few seconds.


showToastable({
message: 'react-native-heroes',
alwaysVisible: true,
animationInTiming: 1000,
animationOutTiming: 1000,
backgroundColor: 'red',
duration: 2000,
contentStyle: {
marginHorizontal: 20,
},
onPress: () => {
console.log('onPress');
},
status: 'success',
swipeDirection: 'left',
})

        <Toastable
              containerStyle={{ marginHorizontal: 20 }}
              alwaysVisible
              animationInTiming={2000}
              animationOutTiming={2000}
              duration={5000}
              onToastableHide={() => {
                console.log('onToastableHide');
              }}
              statusMap={{
                success: 'green',
                danger: 'red',
                info: 'blue',
                warning: 'yellow',
              }}
              renderContent={(props) => <ToastableBody {...props} />}
              swipeDirection={['left', 'right']}
            />

Hi, basically I would like to show the toasts at the similar places according to phone screen and platform. Since android does not have unusable spaces unlike IOS, placing toast at the center of the container looks different and bad in my opinion. There is so much space between top of the screen and the toast in android. Setting justifyContent to flex-start does not resolve my problem neither. In both cases toasts look like this, (when justifyContent=center)

(when justifyContent=flex-start)

red block is the container of the Toastable component on my app.tsx
I am using the renderContent prop to use custom toast like this,

renderContent={(props) => {
          if (!props.status) return;
          if (toastConfig[props.status]) {
            return (
              toastConfig[props.status](props)
            );
          }
        }}

and my toastConfig object is like this,

export const toastConfig: {[key: string]: (props: ToastableBodyProps) => JSX.Element} = {
  info: (_props) => {
    const {message} = _props;
    return (
      <View style={styles.notificationWrapper}>
        <View style={[styles.notificationContainer, {backgroundColor: '#F0F6FE'}]}>
          <InfoIcon />
          <Text style={[styles.notificationTitle, {color: '#4E80EE'}]}>{message || 'Info'}</Text>
          <NotificationCloseIcon fill="#4E80EE" />
        </View>
      </View>
    );
  },
  ...

In the end, what is the best way to render toasts at similar places and not dependent to screen or platform ?

I have a toast with the property "alwaysVisible" to true and would like to hide it programmaticaly.

I am showing a "Internet lost" error toast when connection is lost and would like to remove the toast when connection is back.

I see in the source code that useNativeDriver is explicitly is disabled. Is it possible to turn this on or expose as an option? I would like to have smooth 60 FPS animations, but it seems like this option affects this so that they are not fully smooth.

Thoughts?

I've already tried involving it in a safeareaprovider, it doesn't work. I made it work without the offset, but when I click on show and hide several times at the same time, toast crashes and stays open forever.

Hi!
In the readme file you have a video with some examples
https://user-images.githubusercontent.com/43743872/230865010-6c1c7890-2eec-47c1-bbe4-44c6c6379037.mp4

But i can't find all of the examples in the example folder
rnheroes/react-native-toastable/example/src/App.tsx

I need to create a custom toast to render using Toastable.
Can you help me please?

Thanks!

After upgrading from Expo SDK 48 to Expo SDK 49, toastable messages don't show up in release builds on android.
When debugging everything seems to work fine. Any idea why is this happening?

"@types/react": "^18.2.15"
"react": "18.2.0"
"react-native": "0.72.3"
"react-native-reanimated": "~3.3.0"

Hey, first of all really nice job on this package.

I encountered it after I saw your comment on react-native-toast-message, and wheres this solves that issue, your package is not showing on the modal view.

You can render a toast on a modal view, but if you do so the queuing loses track and you can't render the global one.

Maybe I am missing something and it can be done, if so could you provide an example.

If not, I would say that is a very important feature to support.

Thanks again and have a nice day!

Description for reproduction:
If you load a toast message from one screen by clicking a button and quickly navigate to another screen before the toast message is rendered, then the toast messages will not pop up if you click that button again when you navigate back. You need to restart the app to fix this behaviour.

Any idea how to avoid this or why is this happening?

Hi!

Is there any way to show multiple instances of Toast?
https://github.com/kubilaysalih/react-native-customizable-toast
Something similar to this package.

The reason it's because i click in one button to show the toast, and after that i click another button before the toast dissapears.
After that, user needs to wait that the first toast dissapears to show the second one.

Another alternative that I have for the project I am working on is that the first toast that I show changes its content depending on the button that the second toast shows.
Let's say that the toast timer is reset when you want to show the second toast, but that 2 queued instances are not created, but only one remains.

Do you think there is a way to do one and/or the other option?

Thank you,
Greetings,