calintamas / react-native-toast-message Goto Github PK

View Code? Open in Web Editor NEW

1.5K 5.0 247.0 1.42 MB

Animated toast message component for React Native

License: MIT License

JavaScript 1.11% TypeScript 97.73% Shell 1.16%

react-native toast

react-native-toast-message's People

Contributors

Stargazers

Watchers

Forkers

alexandrumic ioanabudai kornerzdev eta-development-team nghiatn1998 sardok wyndrick pmtc hoanglong85 trendingtechnology gharivand kyledmellander nextappsdeveloperteam luck2805 juliancwirko ko100v hoangdaicntt nguyenductoan1995 derekfei lokeshwrn jongirard akshitrcrm 1hvm feliper-botelho estuardoeg erssebaggala jamesperlman kmp52k troyvnit sathishkrishnan20 timorss stratuscode yurui-viatick akmjenkins spidi123q rangercorp6 logan-lim tgreco dankentfield madebydavid jaxoncreed leoarapp carlosalw sapieneptus verifynder gcangussu guakamoli kennethsoftware raymelon iwater redjanvier styreportalen-as nidoe allmacamo smebrahimi hanzoow saeedboroo yashiroiori viniciusraja mdyu1000 zog vignesarul nguyenduclong-ict edivenh timqha tientran0019 gabek0 leonardomartelotte vicky-silversky dhaveed phamhuuan mdgolam-kibria imjaadh mortocks r1skz3ro miralsuthar seanmclem wanderwalls andrijas37n hunterlige amitkumarnagar cabelin sandeepkharbanda taitran2512 sanengineer gratian-dicu-hillrom sectiontn naveenchvsnuvolo hithaprani-pop rafauke nta2005 hamishhossack daminirajput09 niya-baku stevehanson 101digital kingkongqn4444 remcorakers jstheoriginal nomanoff

react-native-toast-message's Issues

Implement with KeyboardAvoidingView?

I wanted to try and use this where the error would show above the on-screen keyboard if a user was entering text? But then appear at the bottom again if the keyboard is dismissed.

I've tried adding Toast.show etc. within a KeyboardAvoidingView but that doesn't seem to work.

Any thoughts?

TypeError: null is not an object (evaluating 'Toast._ref.show')

I am getting this error when I am trying to prompt a message. I am using expo version 39.0.2 with the following packages.
react: 16.13.1
react-native: 0.63
react-native-toast-message: 1.3.6

I am also using ui-kitten and redux. The component is placed inside the inner layer (redux).

My app root looks like this:

function App() {
  return (
    <RootLayout>
      <Provider store={store}>
        <AppNavigator />
        <Toast ref={(ref) => Toast.setRef(ref)} />
      </Provider>
    </RootLayout>
  );
}

export default () => {
  return (
    <>
      <IconRegistry icons={EvaIconsPack} />
      <ApplicationProvider
        {...eva}
        theme={{ ...eva.light, ...theme, ...themeExtra }}
      >
        <App />
      </ApplicationProvider>
    </>
  );
};

Show Toast above Modals

Great library. A feature I require, and I think many will too, is that the Toast can show above RN modals.

The use case is to have a single instance of the Toast component in the app, that is then shown via the Toast.show command. If I open a modal and while that modal is still open I show a toast, it currently opens behind the modal mask. Playing around with zIndex and similar hacks doesn't change much as RN Modal is a native component and opens above the rest of the app.

Adding the Toast to the content of the modal allowed the toast to be in the forefront, i.e. it is not hidden behind the modal, however, it cannot go outside of the bounds of the modal content. Playing around with negative margin or absolute/relative positioning did not help as the toast then doesn't display at all when in the mask area of the modal.

You can find a minimal demo here

Toast.Hide() not working as expected

I have created a custom config as follows:
toast_vizualiare_grafic: (internalState) => ( <View style={styles.toast_vizualizare}> <View style = {{height: '100%', flexDirection: 'row'}} > <View style={styles.margine_toast}></View> <View style = {{justifyContent:'center', alignItems: 'center', margin:5}}> <Ionicons name="ios-information-circle-outline" size={40} color={albastru_deschis} > </Ionicons> </View> <View style={{width:'55%', alignItems: 'flex-start', justifyContent: 'center'}}> <Text style={styles.text1_toast}>{internalState.text1}</Text> <Text style={styles.text2_toast}>{internalState.text2}</Text> </View> <View style = {{justifyContent:'center', alignItems: 'center', margin:5}} > <TouchableOpacity onPress = {() => Toast.hide()} > <FontAwesomeIcon icon={faAngleDoubleUp} size={32} color={albastru_deschis} > </FontAwesomeIcon> </TouchableOpacity> </View> </View> </View> )

I was expecting that on the TouchableOpacity click, the toast to hide as per ”Toast.hide()”, but nothing happens. Probably I am not doing something right, maybe someone can guide me? Thanks in advance!

How can I use it in react native app.

I am new user for react native. Can you please tell the steps.

Cannot read property show of undefined

Hi,

I'm trying to show the toast but the show function keeps telling me that the Toast is undefined, I'm including the toast inside my App.js and then calling it with
Toast.show({ text1: "hello", });

Bring on top of modal

Hi, thanks for this nice library.

In our app we use modals to show bottom sheets which cover about 80% of the screen. If we show the Toast while one of these modals is open, then the Toast is shown behind the modal. Is there a way to bring the Toast on top of every other modal?

Thanks in advance.

Bug: Can't set custom font when modifying BaseToast

Custom fontFamily values passes to the style props of BaseToast are ignored.

Example:

      <BaseToast
        {...rest}
        style={{ borderLeftColor: Constants.ACCENT }}
        leadingIcon={require('../../assets/icons/info.png') }
        text1={text1}
        text1Style={{
          fontFamily: 'mort-regular',
          color: 'black',
          fontSize: scale(14),
        }}
      />

Other style properties such as color and fontSize are respected.

Is it possible to change the animation of Toast message?

Toast message is coming like sliding from top or sliding from bottom. I want fade In and Fade Out animation. Is it possible?

TypeScript support

Hi,

is there the possibility to add TypeScript support to this module?

Hi, I'm trying to show the toast but the show error ref.show cant be undefidend,

can you kindly help me how i can add ref in root in expo . i create this Root component and also try expo api to register it root named registerRootComponent bur same error kindly can you help me?

null is not an object (evaluating 'this._ref.show')

After npm installing this library, the given code doesn't work.

<Toast ref={Toast.setRef} />

and after initialisation calling Toast.show({ text1: "Hello" }) // error thrown.

I also added a log into setRef to see if it gets the reference, it does, but calling getRef() after it returns null.
There was a suggested solution of using yarn instead of npm, but that is not an option since npm is way more popular (#82).

Unable to resolve module ./src on IOS when using Typescript

Add an `onPress` to BaseToast

As far as I can tell, there isn't a way to keep the default toast formatting and also add an onPress to the toast while still keeping the ability to dismiss it.

My use case is for duplicating the behavior of notifications that deep link within the app when clicked. When the app is active I'm using toasts to show the notifications and want the user to be able to either navigate to that part of the app by clicking the toast, or dismiss it as normal and stay where they are.

icon not show on IOS

Trouble with import on typescript project

Hi everyone,
Thanks for your work, i was exactly looking for it 👍
It works really great if i use a "normal" use case, but as soon as i want to custom it using the config prop i have some troubles (i'm using typescript) :

Actually, if i try to access to the config prop on the Toast JSX component i have the following error :

Type '{ config: any; ref: (ref: any) => any; }' is not assignable to type 'IntrinsicAttributes & { ref: (ref: any) => any; } & { children?: ReactNode; }'.Property 'config' does not exist on type 'IntrinsicAttributes & { ref: (ref: any) => any; } & { children?: ReactNode; }'

When i try to import BaseToast i have the following error : Module '"react-native-toast-message"' has no exported member 'BaseToast'. Did you mean to use 'import BaseToast from "react-native-toast-message"' instead?

My code is the following :

import Toast, { BaseToast } from 'react-native-toast-message';
const toastConfig = {
  success: ({ text1, text2, ...rest }: any) => (
    <BaseToast
      {...rest}
      style={{ borderLeftColor: 'pink', backgroundColor: 'pink' }}
      text1Style={{
        fontSize: 15,
        fontWeight: 'semibold'
      }}
      text1={text1}
      text2={text2}
    />
  )
};
{...}
<Toast config={toastConfig} ref={(ref) => Toast.setRef(ref)}  />
{...}

For some reasons, it looks like the index.d.ts is not exporting the same things that index.js.
I'm using the 1.4.0 lib version.

Someone else have those errors too ?
Thanks for your help

custom icon and color

Hi. I am using this lib for my 2 projects and i love how it works but it would be awesome if i can change icon and color. I know i can give custom configs but its not i said. for example

Toast.show({
      text1: "helloooo",
      icon: "car",
iconFamily: "feather",
      color: "pink" //hex code
      position: 'bottom',
    });

How to dismiss custom toast message?

When creating custom toast components, how can they be dismissed?

onHide in Toast.hide({ onHide }) is never called

The TypeScript definition for the .hide function suggests there is an onHide callback function available, but if you try to use it, it is never called.

static hide(options?: {
  onHide?: () => void
}): void;

Is there any to update showing toast message, info type to success type Toast?

Warning using toastConfig

Get warning using toastConfig ....

    22:13:12.872	MyApp		Warning: Failed prop type: Invalid props.text1Style key `fontSize` supplied to `BaseToast`.
    Bad object: {
      "fontSize": 15,
      "fontWeight": "300"
    }
    Valid keys: [
      "display",
      "width",
      "height",
      "start",
      "end",
      "top",
      "left",
      "right",
      "bottom",
      "minWidth",
      "maxWidth",
      "minHeight",
      "maxHeight",
      "margin",
      "marginVertical",
      "marginHorizontal",
      "marginTop",
      "marginBottom",
      "marginLeft",
      "marginRight",
      "marginStart",
      "marginEnd",
      "padding",
      "paddingVertical",
      "paddingHorizontal",
      "paddingTop",
      "paddingBottom",
      "paddingLeft",
      "paddingRight",
      "paddingStart",
      "paddingEnd",
      "borderWidth",
      "borderTopWidth",
      "borderStartWidth",
      "borderEndWidth",
      "borderRightWidth",
      "borderBottomWidth",
      "borderLeftWidth",
      "position",
      "flexDirection",
      "flexWrap",
      "justifyContent",
      "alignItems",
      "alignSelf",
      "alignContent",
      "overflow",
      "flex",
      "flexGrow",
      "flexShrink",
      "flexBasis",
      "aspectRatio",
      "zIndex",
      "direction",
      "shadowC<…>

I think it's need to change ViewPropTypes.style to Text.propTypes.style

  BaseToast.propTypes = {
    ...
    text1Style: ViewPropTypes.style,
    text2Style: ViewPropTypes.style,
    ...
  }

Could you add text styling , background and color modify for toast

[Unhandled promise rejection: Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.]

Hey, y'all! I'm trying to find out what's throwing this exception:

[Unhandled promise rejection: Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.]
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:9105:17 in throwOnInvalidObjectType
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:10238:30 in reconcileChildFibers
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:12970:43 in reconcileChildren
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:13770:19 in updateHostComponent
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:286:4 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:497:2 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:22028:27 in beginWork$$1
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20871:23 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20848:38 in workLoopSync
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20456:22 in performSyncWorkOnRoot
* [native code]:null in performSyncWorkOnRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5703:31 in runWithPriority$argument_1
- node_modules/scheduler/cjs/scheduler.development.js:818:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5698:21 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5686:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19845:30 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:7861:16 in classComponentUpdater.enqueueSetState
- node_modules/react/cjs/react.development.js:325:2 in Component.prototype.setState
- node_modules/react-native-toast-message/src/index.js:110:59 in setState$argument_1
- node_modules/promise/setimmediate/core.js:45:6 in tryCallTwo
- node_modules/promise/setimmediate/core.js:200:22 in doResolve
- node_modules/promise/setimmediate/core.js:66:11 in Promise
- node_modules/react-native-toast-message/src/index.js:110:41 in Promise$argument_0
* [native code]:null in _setState
- node_modules/react-native-toast-message/src/index.js:162:25 in _setState$argument_0
- node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
- node_modules/regenerator-runtime/runtime.js:293:29 in invoke
- node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
- node_modules/regenerator-runtime/runtime.js:154:27 in invoke
- node_modules/regenerator-runtime/runtime.js:189:16 in PromiseImpl$argument_0
- node_modules/promise/setimmediate/core.js:45:6 in tryCallTwo
- node_modules/promise/setimmediate/core.js:200:22 in doResolve
- node_modules/promise/setimmediate/core.js:66:11 in Promise
- node_modules/regenerator-runtime/runtime.js:188:15 in callInvokeWithMethodAndArg
- node_modules/regenerator-runtime/runtime.js:211:38 in enqueue
- node_modules/regenerator-runtime/runtime.js:238:8 in exports.async
* http://192.168.1.9:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:183909:41 in show
* [native code]:null in show
- node_modules/react-native-toast-message/src/index.js:72:3 in Toast
* http://192.168.1.9:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:134200:45 in configToastRenderer
* App.js:134:7 in api.interceptors.response.use$argument_1
- node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:135:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:183:16 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:446:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:396:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:144:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:373:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

I don't know why, but it's pointing App.js:91:

<Toast ref={(ref) => Toast.setRef(ref)} />

But I don't know if this is a problem with react-native-toast-message... May you help me? 🥺

This is my App.js:

import React, { useState } from 'react';
import { StatusBar } from 'expo-status-bar';

import Home from './src/pages/Home';
import api from './src/services/api';

import Spinner from 'react-native-loading-spinner-overlay';
import Toast from 'react-native-toast-message'

function App() {
  const [loadingRequest, setLoadingRequest] = useState(false);

  api.interceptors.request.use(function (config) {
    if (config.method === 'get') {
      if (config.url.indexOf('page') !== -1) {
        if (config.url.indexOf('page=1') !== -1) {
          setLoadingRequest(true);
        }
      } else {
        setLoadingRequest(true);
      }
    }
    return config;
  }, function (error) {
    console.log('request error: ', error);
    if(loadingRequest) setLoadingRequest(false);
    return Promise.reject(error);
  });

  const configToastRenderer = ({ message, status }) => {
    if(message) {
      const typeRequest = {
        200: {typeToast: 'success', title: 'Operação realizada'},
        404: {typeToast: 'error', title: 'Falha na operação'},
        401: {typeToast: 'error', title: 'Falha na operação'},
        500: {typeToast: 'info', title: 'Atenção'},
        503: {typeToast: 'error', title: 'Erro'}
      }

      if(typeRequest[status] === undefined)
        status = 404;

      Toast.show({
        type: typeRequest[status].typeToast,
        text1: typeRequest[status].title,
        text2: message,
        position: 'bottom',
        topOffset: 100,
        visibilityTime: 1200,
      })
    }
  }

  api.interceptors.response.use(function (response) {
    if(loadingRequest) setLoadingRequest(false);

    let newResponse = response
    try{
      configToastRenderer({
        message: response.data.message, 
        status: response.status
      })

    } catch(e) {}
    
    return newResponse;
  }, function (error) {
    console.log('response error: ', error.response)
    if(loadingRequest) setLoadingRequest(false);
    try{
      configToastRenderer({
        message: error.response.status !== 503 ? error.response.data : "Erro ao tentar se comunicar com servidor.", 
        status: error.response.status
      })
    }catch(e) {}

    return Promise.reject(error);
  });

  return (
    <>
      {loadingRequest &&
        <Spinner
          visible={true}
          textContent={'Loading...'} />}

      <StatusBar style="light" backgroundColor="#595959" />
      
      <Home />
      
      <Toast ref={(ref) => Toast.setRef(ref)} />
    </>
  );
}

export default App;

I've changed a lil' bit to fit in this issue.

With react-native-screens

I can't display this using react-native-screens. But if I simply add a zIndex to your base styles it works just super.

Before I create a PR, I feel like I must be missing something. Is there a way to alter the base style right now?

Change default toast settings

In the topOffset parameter I needed to add getStatusBarHeight() + value to all my Toast.show to work on other devices correctly.

Adding this type of configuration to your instance would be nice.

<Toast ref={(ref) => Toast.setRef(ref)} /> on here.

From what I read the config does not satisfy this request, just to create new toasts.

Setting position: 'bottom' animates from top the first time the toast appears

I'm rendering this in my appNavigation with:

<Toast
    config={toastConfig}
    ref={(ref) => Toast.setRef(ref)}
    bottomOffset={80}
/>

and then calling with:
Toast.show({`` text1, position: 'bottom', type: 'success' });

Any ideas?

Unable to close Toast using the cross icon

Change toast width?

Thanks for this project!

Is there a way to modify the toast to take up the full width of the screen and not just the content?

Old state value with callback function given to toast

I wanted to pass a callback function to my toast message but it seems that the state bind to my callback function is an old version of the state that is not updating when I make changes to it. I couldn't tell if this is related to react native or the library. Is there any workaround or am I just making a mistake ?

Toast config (I'm using cancel_delete)

      const toastConfig = {
        success: (internalState) => (
          <View style={{ flexDirection: "row", alignSelf: "center", padding: 8, height: 40, backgroundColor: Theme.colors.primary, borderRadius: 8, justifyContent: "center" }}>
            <Text style={{alignSelf:"center", color: "white"}}>{internalState.text1}</Text>
          </View>
        ),
        error: () => {},
        info: () => {},
        cancel_delete: (internalState) => {
          return (
          <View style={{ width:"80%", flexDirection: "row", alignSelf: "center", height: 40, backgroundColor: Theme.colors.primary, borderRadius: 8 }}>
            <Text style={{alignSelf:"center", color: "white", marginLeft: 5}}>{internalState.text1}</Text>
            <View style={{ justifyContent:"center", alignItems:"flex-end", flex: 1}}>
              <Button labelStyle={{fontSize: 11}} color={"white"} onPress={() => internalState.props.onPress()}>Annuler</Button> <------- here
            </View>
          </View>)}       
      };

Toast show

The value between the 2 console log is not the same.

            console.log(lastDeletedItems) <------ lastDeletedItems is my state value
            Toast.show({
              text1: 'Suppression de ' + lastDeletedItems.length + ' produit(s)', 
              position: "bottom",
              visibilityTime: 3000,
              type: "cancel_delete",
              props: {
                  onPress: () => {
                    console.log(lastDeletedItems) <-------- not the same value as above
                    Toast.hide();
                    cancelDelete();
                    setChange(value => !value);                   
                  } 
              }
            });            
          }

Damping value must be grater than 0

Sometime when I draged toast message to hide pretty quick, it show error message 'Damping value must be greater than 0'.

I can't install library.

Hi guys, I can't install library on my Expo project because I show message on my code that say: Could not find a declaration file for module 'react-native-toast-message'. .../node_modules/react-native-toast-message/index.js' implicitly has an 'any' type. Try npm install @types/react-native-toast-message if it exists or add a new declaration (.d.ts) file containing declare module 'react-native-toast-message';
Any suggestion? My app is JS not TS.

How can we use multiple Toast at the same time

if I have 2 Toasts , I receive only the Last Toast

PropTypes Warnings on expo-web

When you run this library in Expo Web, you get warnings for every time ViewPropTypes.style is used. For example:

Warning: Failed prop type: Toast: prop type `style` is invalid; it must be a function, usually from the `prop-types` package, but received `object`.
    in Toast (at App.tsx:40)
    in App (created by ExpoRootComponent)
    in ExpoRootComponent (created by RootComponent)
    in RootComponent
    in div (created by View)
    in View (created by AppContainer)
    in div (created by View)
    in View (created by AppContainer)
    in AppContainer

Happens because of the PropTypes here https://github.com/calintamas/react-native-toast-message/blob/master/src/index.js#L383

This is probably because prop-types has been depricated on React-Native-Web, but not React-Native. necolas/react-native-web#1537 (comment)

Can you add the styles change for the fontsize of text1 and text2

Doesn't show at all

Hey @calintamas . I have a problem with this package. After installing I have tried to call the show function in different modules in my react-native app. But the toast doesn't show up at all, nowhere. I guess that is because of react-navigation and the usage of stack-navigator, and the message shows up under the screens. Is this problem a common one? And is there a solution? I can find nothing, but I really like this package and would like to use it. Thanks in advance.

Is there a way to make this animate from beneath a react-navigation tab bar?

Is there a way that I can get this to animate from beneath the react-navigation tab bar instead of animate in over the top of it? I can get it to render from behind by passing it in on individual screens rather than up at my AppNavigator, but then I lose the ability to call it from different stacks within the TabNavigator.

How can I change style of Toast?

Feature request - Stackable Toast messages

Hi!

First of all, thank you for making this component. It's very convenient.
I just installed it and it works great out of the box.

What I noticed is that whenever I fire a second toast message, it reuses the original toast message. Is this correct?
Can this perhaps made to be so that multiple messages can be shown?
For example, like in this codepen: https://codepen.io/osublake/pen/YyLZKV

Thank you!

Toast Message does not hide completely if dynamic height is greater then 60

Each time you call Toast.show() the value of height in the internal state is set to 60 (src/index.js line 164 with line 38).

There is the function onLayout which sets the value of state.height to the real height of the component, but this function is only called when the real height of the component changed! So if we call Toast.show() with a real height of 80, the value of state.height is set from it initial value of 60 to 80.
But if we call Toast.show() again, with the same text and so with the same real height of 80, the value of state.height is set back to 60 and remains 60, because onLayout is not called since the real height of the notification remains the same.
The result of the wrong height is, that the animation does not hide the message completely.

My solution:
Add the following line height: this.state.height, directly after src/index.js line 164 to restore the old height from the last call.
If the real height differ from the first and the second call to Toast.show() then onLayout get called and the height will be adjusted.

Text strings must be rendered within a <Text> component

Hi,

Whenever I use the Toast component I get a huge Error: Text strings must be rendered within a <Text> component. error.

I used it in my App.js file as recommended :

import React from 'react';
import * as eva from '@eva-design/eva';
import { ApplicationProvider, IconRegistry } from '@ui-kitten/components';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import Toast from 'react-native-toast-message';
import Root from './Root';

// Themes
import { default as theme} from './Themes/main-theme.json';

export default function App() {
  return (
    <SafeAreaProvider>
      <Toast ref={(ref) => Toast.setRef(ref)} />;
      <IconRegistry icons={EvaIconsPack} />
      <ApplicationProvider {...eva} theme={{...eva.light, ...theme}}>
        <Root />
      </ApplicationProvider>
    </SafeAreaProvider>
  );
}

If I erase the Toast line my app works perfectly.

If anyone has an idea hit me up 😄

No toast is shown in the app

Hello, hope you all doing well and safe.
I installed the library, added the Toast component, and set the ref but when I call the show method nothing is shown on the screen.
I can reach the ref and see all the methods I call on it so I definitely have the reference to the Toast object. Any clues on what might be the problem?
I have the latest version installed: 1.3.7

Cannot access props for custom toast

Hello, internalState.props is undefined. When i'm logging internalState I do not see my props even though I filled the props attribute in options array. I wanted to pass a callback function but I can't make it work with a string. Am I doing something wrong ?

Toast.show()

Toast.show({
text1: 'text1', 
position: "bottom",
visibilityTime: 1200,
type: "cancel_delete",
props: {
    guid: "pl"
}
});

Toast config

const toastConfig = {
        success: (internalState) => (
             <View style={{ flexDirection: "row", alignSelf: "center", padding: 8, height: 40, backgroundColor: Theme.colors.primary, borderRadius: 8, justifyContent: "center" }}>
            <Text style={{alignSelf:"center", color: "white"}}>{internalState.text1}</Text>
          </View>
        ),
        error: () => {},
        info: () => {},
        cancel_delete: (internalState) => {
          return (
          <View style={{ width:"80%", flexDirection: "row", alignSelf: "center", height: 40, backgroundColor: Theme.colors.primary, borderRadius: 8 }}>
            <Text style={{alignSelf:"center", color: "white", marginLeft: 5}}>{internalState.text1}</Text>
            <View style={{ justifyContent:"center", alignItems:"flex-end", flex: 1}}>
              <Button labelStyle={{fontSize: 11}} color={"white"} onPress={() => console.log(internalState)}>Annuler</Button>
            </View>
          </View>)}       
      };

Console.log(internalState)

{"hide": [Function bound hide], "inProgress": false, "isVisible": true, "position": "bottom", "show": [Function bound show], "text1": "text1", "text2": undefined, "type": "cancel_delete"}

Version: "react-native-toast-message": "^1.3.4"

not working auto detect text direction

In the new version, a code has been added that causes the not working auto detect text direction.

src/components/base/styles.js
line 30

or provide a way for us to add just style to text1 and text2

tank you

onPress events don't work with custom toast components

whether using BaseToast or my own component with TouchableOpacity, the onPress events are not firing. I think this is probably to do with the PanResponder in the root component. can anyone help?

No icons for error and info

Hello.
Thanks for good work!
I have one problem. When I not specify the type of toast or set it to "success" I got a success icon on the left side of my message, but if I change the type to error/info I get an empty white area on the left side of the message text.
Version 1.3.1 React-native version 0.62.2

missing automated test props in base toast components

Can we add testId props to the base toast UI Components?

Shadows not visible on Android

in v1.3.2
Missed elevation property in styles. They show in iOS.
In src/components/base/styles.js
In base object, if I provide elevation, it works.

Allow arbitrary data to be passed into Toasts

This would be super useful for custom UI's that need more than 2 text fields to configure (like an onPress handler, for example).

Proposal:

A custom toast component:

const MyInfoToast = (props) => (
  <TouchableOpacity onPress={props.onPress}>
    <Text>{'I am a Touchable Toast!'}</Text>
  </TouchableOpacity>
);

Toast declaration with config:

<Toast
  ref={(ref) => Toast.setRef(ref)}
  config={{
    info: ({ props }) => <MyInfoToast {...props} />,
  }}
/>

Showing Toast with props:

Toast.show({ type: 'info', props: { onPress: () => console.log('i got pressed!') } });

This could be easily achieved by just adding the value 'props' to the keys array starting at line 263 of src/index.js

Curious to know what you think of this!

Thanks for making this repo by the way, it's really great :)

null is not an object (evaluating 'this._ref.show')

Here's my code in app.js

`const App = createAppContainer(switchNavigator);

export default () => {
return (

<Toast ref={(ref) => Toast.setRef(ref)} />
<App
ref={(navigator) => {
setNavigator(navigator);
}}
/>

);
};`

Here's my code on my login.js that uses notification.

const LoginScreen = ({ navigation }) => { // initialized Auth Context Toast.show({ text1: "Hello", text2: "This is some something 👋", });

....

Android status bar has bottom shadow

When status bar is white, there's a bottom shadow.

To fix this, set elevation: 0 when toast message is hidden.