# react-native-bd-toast

> React Native module to show toast view.

Latest version **1.0.0** (published 2018-09-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-native-bd-toast
pnpm add react-native-bd-toast
yarn add react-native-bd-toast
bun add react-native-bd-toast
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-09-13 |
| First published | 2018-09-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jason Park |
| Maintainers | binarydiver |
| Keywords | react-native, react-native-toast, toast, toast-view, alert |

## Links

- npm: https://www.npmjs.com/package/react-native-bd-toast
- Repository: https://github.com/binarydiver/react-native-bd-toast
- Homepage: https://github.com/binarydiver/react-native-bd-toast/blob/master/README.md
- Issues: https://github.com/binarydiver/react-native-bd-toast/issues
- npm.io page: https://npm.io/package/react-native-bd-toast

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-09-13

## README

# react-native-bd-toast

A react native module to show toast view regardless of platform.

## Features

- Automatically fit view regard to text size.
- Can set value delay to stay view and duration to fade animation.
- Support override text, board style.
- Support to receive callback at complete animation.
- Prevent click event to interrupt animation.
- Parallel animation for different opacity each text(max alpha 1.0), board(max alpha 0.8). 

## Demo
![Demo](https://raw.githubusercontent.com/binarydiver/react-native-bd-toast/master/example/demo.gif)

## Install

`npm install --save react-native-bd-toast`

OR

`yarn add react-native-bd-toast`

## Example 1 (use default setting)
```javascript
// ...
import BDToast from 'react-native-bd-toast';

class App extends Component {
  constructor(props) {
    super(props);
    this.toastView = undefined;
  }
  
  _onPressBtnShowToast = () => {
    this.toastView.show('Toast View');
  };
  
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <TouchableOpacity 
          style={{height: 40, justifyContent: 'center', alignItems: 'center'}} 
          onPress={this._onPressBtnShowToast}
        >
          <Text>
            Show Toast!
          </Text>
        </TouchableOpacity>
    
        <BDToast ref={(self) => this.toastView = self} />
      </View>
    );
  }
}
```

## Example 2 (use custom setting)
```javascript
// ...
import BDToast from 'react-native-bd-toast';

class App extends Component {
  constructor(props) {
    super(props);
    this.toastView = undefined;
  }
  
  _onPressBtnShowToast = () => {
    // set delay to stay and duration to fade.
    this.toastView.show('Toast View', 2000, 1000);
  };
  
  // Callback function when toast is disappear.
  _onDisappear = (id) => {
    Alert.alert("Toast", `ID: ${id}`);
  };
  
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <TouchableOpacity 
          style={{height: 40, justifyContent: 'center', alignItems: 'center'}} 
          onPress={this._onPressBtnShowToast}
        >
          <Text>
            Show Toast!
          </Text>
        </TouchableOpacity>
        
        <BDToast 
          id={1}
          ref={(self) => this.toastView = self}
          styleBoard={{backgroundColor: 'deepskyblue', borderRadius: 10}}
          styleText={{fontFamily: (Platform.android ? 'Roboto': 'Apple SD Gothic Neo'), fontSize: 16, color: 'lightcyan'}}
          positionFromTop={0.1}
          onDisappear={this._onDisappear}
        />
      </View>
    );
  }
}
```

---
_Source: https://npm.io/package/react-native-bd-toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._