Demo: Toast

Docs: https://github.com/caoyongfeng0214/rn-overlay/wiki/Toast

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


const Toast = Overlay.Toast;


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

        this.state = {
            modalVisible: false
        };
    }

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

    onLeftClick = () => {
        Toast.show('Hello Toast', { position: Toast.Position.Left });
    }

    onBottomClick = () => {
        Toast.show('Hello Toast', { position: Toast.Position.Bottom });
    }

    onRightBottomClick = () => {
        Toast.show('Hello Toast', { position: Toast.Position.RightBottom });
    }

    onCustomTextStyleClick = () => {
        Toast.show('Hello Toast', {
            textStyle: {
                backgroundColor: '#ad0000',
                color: '#ffff59'
            }
        });
    }

    onCustomDurationClick = () => {
        // duration: 2000ms
        Toast.show('Hello Toast', 2000, {
            textStyle: {
                backgroundColor: '#ad0000',
                color: '#ffff59'
            }
        });
    }

    onCustomEasingClick = () => {
        // Easing: https://reactnative.dev/docs/easing
        Toast.show('Hello Toast', {
            easingDuration: 1000,
            animateEasing: Easing.bezier(0, 2, 1, -1)
        });
    }


    render() {
        return <View style={{paddingTop: 200}}>
            <Button title="Show a Toast" onPress={this.onToastShowClick}/>
            <Button title="Left" onPress={this.onLeftClick}/>
            <Button title="Bottom" onPress={this.onBottomClick}/>
            <Button title="RightBottom" onPress={this.onRightBottomClick}/>
            <Button title="Toast in Modal" onPress={() => this.setState({modalVisible: true})}/>
            <Button title="Custom Text Style" onPress={this.onCustomTextStyleClick}/>
            <Button title="Custom Duration" onPress={this.onCustomDurationClick}/>
            <Button title="Custom Animate Easing" onPress={this.onCustomEasingClick}/>

            <Modal visible={this.state.modalVisible} transparent={true}>
                <View style={{paddingTop:88, paddingBottom:288, backgroundColor:"yellow"}}>
                    <Text style={{textAlign:"center"}}>This is a Modal</Text>
                    <Button title="Show a Toast" onPress={this.onToastShowClick}/>
                    <Button title="Close The Modal" onPress={() => this.setState({modalVisible: false})}/>
                </View>
            </Modal>
        </View>;
    }
}

export default App;