底部toast 是看不见的

Hey, such great component, thank you.

By the way, I need to fully control displaying toast, so I made little changes, just added showPermanent method. This could be a cool feature in your package.

Best regards, john

可以在每次show之前做一下判断，在上次duration未结束前close掉，然后再打开新的toast

Awesome project! But the toast last on the screen for around 6 seconds with all kinds of durations.
I've tried 100, 500, length_short, length_long. any idea?

I'm using expo to use this component and i keep getting this error:

Can you please let me know what am i doing wrong ?

import React, {Component} from 'react';
import {
TouchableHighlight,
StyleSheet,
Text,
View,
} from 'react-native';

import Toast, {DURATION} from 'react-native-easy-toast'

export default class examples extends Component {
constructor(props) {
super(props);
this.state = {
position: 'bottom',
style:{},
}
}

onClick(text, position, duration,withStyle) {
    this.setState({
        position: position,
    })
    if(withStyle){
        this.refs.toastWithStyle.show(text, duration);
    }else {
        this.refs.toast.show(text, duration);
    }
}

getButton(text, position, duration,withStyle) {
    return(
        <TouchableHighlight
            style={{padding: 10}}
            onPress={()=>this.onClick(text, position, duration,withStyle)}>
            <Text>{text}</Text>
        </TouchableHighlight>
    )
}
render() {
    return (
        <View style={styles.container}>
            <Toast ref="toast" position={this.state.position}/>
            <Toast ref="toastWithStyle" style={{backgroundColor:'red'}} position={this.state.position}/>
        </View>
    );
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});

Hey guys,
i stumbled on this problem even after confirming the import of the module in my project,
Any way forward please?

It does not show on first event but shows when I trigger it twice or more times

hey I have this issue here and still no idea how to fix it

https://stackoverflow.com/questions/47502189/react-native-toaster-react-native-easy-toast-only-displays-once

When using the React Navigation TabNavigator on iOS (https://reactnavigation.org/docs/navigators/tab) the tabs appear at the bottom of the screen. When the Toast appears in the default position of "bottom" the Toast appears behind the tabs.

Changing the zIndex of the Toast style doesn't seem to make any difference.

The only way I've been able to manage this for now is using the positionValue to raise the position of the Toast above the tabs.

with the example from the readme:

I get this:

ExceptionsManager.js:71 Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Toast (at ConfirmScene.js:102)
    in RCTView (at View.js:60)
    in View (at ConfirmScene.js:55)
    in ConfirmScene (created by Connect(ConfirmScene))
    in Connect(ConfirmScene) (at SceneView.js:17)

RN is version is 0.55.3

how can I fix this ?

Hi, i've seen useNativeDriver is not set for Animated api, why?
Maybe we can add a prop in Toast component for that.

Thanks

我有一个跟页面 里边定义了 Toast 然后使用
this.subscription = DeviceEventEmitter.addListener('toastInfo', (info) => {
this.refs.toast.show(info,10000)
}) 定义监听。
如果在当前页面使用 DeviceEventEmitter.emit('toastInfo','通知来了') Toast 能正常显示
如果在其第n个子页面 使用DeviceEventEmitter.emit('toastInfo','通知来了') Toast就不能正常显示了，
页面跳转使用的是 react-navigation

在Modal组件的页面上，显示Toast的时候，被Modal遮挡

renderErrorToast() {
return (

);
}

非常感谢作者的贡献。我上一条消息发错了。不好意思，请谅解

I want to define the height of the toast?Support this feature?

After upgrading React Native from 0.29 to 0.30, EventEmitter is outdate. Now, I get this error message 'Module does not exist in the module map'

Hi,
Using react-native-easy-toast": "^1.1.0, toast position bottom, the toast message is not appearing in Android devices but works fine in iOS devices.

Does anyone have any workaround to solve this issue? Any suggestion is appreciable.

Thanks

https://github.com/crazycodeboy/react-native-easy-toast/blob/master/index.js#L105

This line means I have no way to control layout of the toast to have a constant positioning of X pixels away from the bottom of screen, as measured from the bottom of the toast. When position='bottom', the style logic should switch to using bottom: {positionValue} instead of top.

Warning: View.propTypes has been deprecated and will be removed in a future version of ReactNative. Use ViewPropTypes instead.

For example, 'position' is not defined as prop.

top
并不是在上面显示的，用的iOS模拟器

Hi, I'm trying to use easy-toast and it works very well. But there is one instance I have of a long flatlist. If the list is rather long, I realized that the toast message appears but it is off the screen and you have to scroll in order to see it. Not sure if I am doing something wrong. Here is the code. I have used this on an Android device.

renderHeaderList() {
return (

  <View style={{ flex: 1 }}>

    <ScrollView
      ref={(c) => { this.scroll = c; }}
    >

      <FlatList
        ref={(ref) => { this.flatListRef = ref; }}
        data={{ g_data }}
        renderItem={this.renderItem}
        keyExtractor={(item) => item.srNo}
      />

  </ScrollView>

  <Toast
    ref="toast"
    position={'top'}
    style={{ backgroundColor: 'red' }}
  />

  </View>
);

}

When keyboard is open the toast is behind the keyboard. it should be over the keyboard

I am getting this issue that toast doesn't shows up but the callback is called. I have added toast in the bottom of the component.

crash reason: undefined is not object

I found the error code
View.propTypes.style
Text.propTypes.style

I comment this line, works fine.

Maybe View.propTypes is not support in lastest React-native version?

I'm trying to add a toast message on successful signup. However, the toast message doesn't stick to the screen for the mentioned amount of time(in my case 2000ms). It is instantaneously going to the next line to navigate to the next page and hence the toast message is only displayed for split second. Any idea, how to tackle this?

this.refs.toast.show('User added successfully', 2000); this.props.navigation.navigate('LoginScreen');

如果 您 不想 在 每次 都在要 显示 toast 的控件 的 render 方法里 画 控件, 可 把 这句 画在 你的 根控件的 render方法里 ,比如

  <View style={styles.container}>
                <StatusBar translucent={false} backgroundColor={Colors.blue}/>
                <Navigator
                    ref={component => this.navigator = component}
                    initialRoute={
                    {
                        component: RootPagesContainer
                    }
                    }
                    configureScene={this.handlerConfigureScene}
                    renderScene={this.renderScene}
                />
                <Toast ref="toastWithStyle" style={{backgroundColor: Colors.appUnifiedBackColor /*, opacity: 0.8*/ }}
                       textStyle={{
                           fontSize: 20,
                           color: Colors.white,fontWeight:'bold'
                       }} position={'center'}/>
            </View>

然后 在这个根控件监听 一个 showToast事件, 如

componentDidMount() {
this.listener = DeviceEventEmitter.addListener('showToast', (text) => {
this.refs.toastWithStyle.show(text, DURATION.LENGTH_LONG);
});
}

componentWillUnmount() {
    if (this.listener) {
        this.listener.remove();
    }
}

这样在任何地方 都可以调 DeviceEventEmitter.emit('showToast', showMsg);发一个 通知,根控件上就会画这个 toast 控件了

Not able to use this toast in functional component as a functional component don't accept reference.

Hey. Is it possible to show same toast, after navigating to another screen? I have problem that my toast is closed after I navigate to different screen.

When calling the show function after the toast has disappeared, the second/3rd/n-th toast is rendered with some unexpected delay

<Button 
  title="Press Me" 
  onPress={()=>{
      console.log("will present toast " + new Date());  
      this.refs.toast.show(""+new Date(),100) 
   }}>
</Button>

<Toast 
   ref="toast"
  position={'top'}
/>

Hi @crazycodeboy,
great package - easy to use

one question, issue, how can I make the toast modal?
I don't want the user will be able to scroll, for example, the screen behind?

thanks

[email protected] requires a peer of react-native@>=0.20.0 but none was installed.

it is rendered inside the bell icon component

Actual behaviour:

If I run the following code...

this._toast.show('Message One', 1000)
// wait 500ms
this._toast.show('Message Two', 5000)

The second message text will replace the first, however the toaster popup will still fade 500ms later (total 1 second, instead of the 5 seconds supplied).

Expected behaviour:

When running the second "show", the message text changes, AND the popup stays open for a further 5 seconds.

Is there a way to cancel or reset the existing timer countdown?
(Preferably other than manually using setTimeout/clearTimeout.)

Usage:

<Toast 
  ref={c => this._toast = c}
  style={{backgroundColor: 'red', width: _windowWidth - 20}}
  position='top'
  positionValue={20}
  fadeInDuration={1000}
  fadeOutDuration={1000}
  opacity={1}
  textStyle={{color: 'white'}}
/>

当页面上使用到了react-navigation的TabNavigator时，弹出的框会被底部所遮挡

The toast will not work with the new version of React Native, who is working with Hooks, the ref of the toast does not you can add the useRef.

can you please check it out?

there is a error in your doc
The import is
import Toast, {DURATION} from 'react-native-easy-toast'
instead of
import Toast, {DURATION} from 'react-native-toast-easy'

Position remains fixed when the content is scrolled.

useed in android,when toast.close there exits a line at the bottom of the Toast,just like a border。

device: xiaomi 红米

提示文字较多时，很明显

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the Toast component.