Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/MAKARD/react-native-toastboard
Toast feedback messages for React Native
https://github.com/MAKARD/react-native-toastboard
notifications react react-native toast toastboard toaster
Last synced: about 2 months ago
JSON representation
Toast feedback messages for React Native
- Host: GitHub
- URL: https://github.com/MAKARD/react-native-toastboard
- Owner: MAKARD
- License: mit
- Created: 2018-12-15T15:28:17.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-04T09:15:30.000Z (11 months ago)
- Last Synced: 2024-04-25T00:50:46.550Z (9 months ago)
- Topics: notifications, react, react-native, toast, toastboard, toaster
- Language: TypeScript
- Homepage: https://snack.expo.io/@makard/react-native-toastboard
- Size: 781 KB
- Stars: 52
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-toastboard - The simplest way to show notification. (Components / UI)
- awesome-react-native - react-native-toastboard - The simplest way to show notification. (Components / UI)
- awesome-react-native - react-native-toastboard - The simplest way to show notification. (Components / UI)
README
[](https://codecov.io/gh/MAKARD/react-native-toastboard)
[](https://dl.circleci.com/status-badge/redirect/gh/MAKARD/react-native-toastboard/tree/master)
[Expo snack](https://snack.expo.io/@makard/react-native-toastboard)
# React-Native-Toastboard
Toast feedback messages for React Native
# Installation
## Via NPM
```bash
npm install react-native-toastboard
```
## Via YARN
```bash
yarn add react-native-toastboard
```
# Example
```jsx
const appearAnimation = new SlideX(Dimensions.get('screen').width, 0);
const holdAnimation = new Zoom(1, .95, { duration: 200, useNativeDriver: true });
const toastMiddleware = ({ type, message }: Item) => {
if (type !== ToastType.ERROR) {
return message;
}
if (typeof message === 'string') {
return message;
}
if (message.response && message.response.data && message.response.data.message) {
return message.response.data.message;
} else {
return 'Some error was happened :(';
}
};
const renderToast = ({ type, message }: Item) => {
switch (type) {
case ToastType.INFO: {
return (
{message}
);
}
case ToastType.ERROR: {
return (
{message}
);
}
case ToastType.SUCCESS: {
return (
{message}
);
}
default: {
throw new Error('Unknown type given');
}
}
};
export const Example = () => {
const onHide = () => {
StatusBar.setHidden(false);
};
const onShow = () => {
StatusBar.setHidden(true);
};
return (
{renderToast}
);
};
```
# Public interface
## < Toaster />
`Toaster` component represents a container that displays messages.
Accepts the following props:
`onHide` - a callback that executes `AFTER` message gets hidden. `Optional`.
Takes native event as the first argument and [message item](#Message-item) as the second argument.
`onShow` - a callback that executes `BEFORE` message gets shown. `Optional`.
Takes native event as the first argument and [message item](#Message-item) as the second argument.
`onPress` - a callback that executes on container press. `Optional`.
Takes native event as the first argument and [message item](#Message-item) as the second argument.
`onHoldStart` - a callback that executes when a user holds their touch on message. `Optional`.
Takes native event as the first argument and [message item](#Message-item) as the second argument.
`onHoldEnd` - a callback that executes when a user releases their touch from message after holding it. `Optional`.
Takes native event as the first argument and [message item](#Message-item) as the second argument.
`duration` - specifies `common` display time in `msec` for messages. `Optional`. Default - `2000`.
`delayBetween` - specifies delay time in `msec` between showing messages. `Optional`. Default - `0`.
`hideOnPress` - specifies that the message should be closed when a user touches it. `Optional`. Default - `false`.
`containerViewProps` - specifies props for the container's element. `Optional`.
`animation` - specifies animation that applies to hide/show the message. `Optional`. Default - [SlideY](./src/animations/SlideY.ts). See more details below.
`middleware` - executes before the message will be added to a queue. Should return `string`. `Optional`.
Takes [message item](#Message-item) as argument.
`Toaster` can take children only as `function`:
```ts
(item: { type: string; message: string }) => React.ReactNode;
```
In this case, the default `Toast` will be replaced with the returned component.
*NOTE: To stop hide-timer, you can tap and hold your touch on the container as long as you want*
##### Message item
Message item represents the following interface:
```ts
item: {
message: string;
type: "INFO" | "ERROR" | "SUCCESS" | "DEBUG";
duration?: number;
}
```
#### Creating a message
`Toaster` is a `singleton`. So make sure that you have only one instance.
`Toaster` has several static methods for messages creation:
```ts
/*
the first argument specifies the message. REQUIRED.
the second argument specifies the duration. OPTIONAL. By default - value from props.
*/
Toaster.info("message", 500);
Toaster.error("message", 500);
Toaster.success("message", 500);
Toaster.debug("message", 500);
```
## Animation
There are several built-in animations:
- [Opacity](./src/animations/Opacity.ts)
- [SlideX](./src/animations/SlideX.ts)
- [SlideY](./src/animations/SlideY.ts)
- [Zoom](./src/animations/Zoom.ts)
```ts
/*
- the first argument specifies start-animation value. REQUIRED.
- the second argument specifies end-animation value. REQUIRED.
- the third argument specifies the animation config. This is the same config as in AnimationTimingConfig. OPTIONAL. (https://facebook.github.io/react-native/docs/animated)
*/
new Opacity(0, 1, {
duration: 250,
useNativeDriver: true
});
```
Each animation extends `BaseAnimation` and implements `ToasterAnimation`. So if you want to create custom animation, make sure you correctly implement it:
```tsx
class MyCustomAnimation extends BaseAnimation implements ToasterAnimation {
/*
1. Animated.timing SHOULD BE WRAPPED INTO PROMISE.
2. styles SHOULD RETURN VALID OBJECT STYLES.
*/
// start animation forward
forward() {
return new Promise((resolve) => {
Animated.timing(this.value, {
toValue: this.from,
...this.config
}).start(resolve);
});
}
// start animation backward
backward() {
return new Promise((resolve) => {
Animated.timing(this.value, {
toValue: this.from,
...this.config
}).start(resolve);
});
}
// applies animation to the container
styles = {
transform: [{ scale: this.value }]
}
}
// ...
const animation = new MyCustomAnimation(-2, 15);
```
*NOTE: Always create animation instances outside from the component body OR use memoisation*