Toast

Similar to https://reactnative.dev/docs/toastandroid.

show a Toast on iOS and Android.

Demo:

Demo Source Code

---

Installation

https://github.com/caoyongfeng0214/rn-overlay#installation

Usage

import React from 'react';
import { View, Button, Overlay, Easing } from 'react-native';

// Toast class
const Toast = Overlay.Toast;


class App extends React.Component {
    constructor(props) {
        super(props);
    }

    onToastShowClick = () => {
        Toast.show('Hello Toast');
    }


    render() {
        return <View style={{paddingTop: 200}}>
            <Button title="Show a Toast" onPress={this.onToastShowClick}/>
        </View>;
    }
}

export default App;

---

Enums

Position

values:

• Center (default value)
• Left
• Right
• Top
• Bottom
• LeftTop
• LeftBottom
• RightTop
• RightBottom

---

Static Methods

show(msg, [duration, [options]])

show a Toast.

params

  msg: String. a string with the text to toast.

  duration: Number. the duration of the toast. millisecond. default value: 680 .

  options: object

    textStyle: Object. style of text. same as Text Component .

    animateEasing: easing of animate. default value: Easing.elastic(3). reference: https://reactnative.dev/docs/easing

    easingDuration: Number. the duration of the animate easing. millisecond. default value: 680 .

    position: Toast.Position Enums. the position of the toast. default value: Toast.Position.Center.

    onShow: Function. callback function when the Toast shown.

    onClose: Function. callback function when the Toast closed.