# react-native-styled-toast
Themeable react-native toast component built using styled-components & styled-system.
## Features
- Pure JS implementation
- Supports multiple toasts
- iOS and Android compatible
- Styled with theme contraints
- Written using React Hooks
- Fully typed with TypeScript
## Installation
`$ yarn add react-native-styled-toast`
## Usage
`react-native-styled-toast` is built to work with both vanilla react-native apps as well as react-native apps bootstrapped with Expo. It utilizes `styled-components` and `styled-system` under the hood to facilitate theming.
Because the toasts rely on theming, you need to ensure that you've wrapped your app in the `ThemeProvider` component from `styled-components` - then use the `ToastProvider` and wrap the rest of your app:
```jsx
import { ThemeProvider } from 'styled-components'
import { ToastProvider } from 'react-native-styled-toast'
return (
)
```
Now that your app has access to the Toast context, you can make use of the provided `useToast` hook to trigger a toast anywhere in your app:
```jsx
import { useToast } from 'react-native-styled-toast'
const { toast } = useToast()
return toast({ message: 'Check me out!', ...config })} />
```
If you aren't able to make use of hooks for whatever reason, you can still use the provided ToastContext.Consumer to fire off a toast.
```jsx
import { ToastContext } from 'react-native-styled-toast'
return (
{({ toast }) => {
return (
toast({
message: 'Woo! This is a success toast.'
})
}
title="Show Success Toast"
/>
)
}}
)
```
**This component relies on `styled-system` to access colors from your theme**. So you need to ensure that your theme object is configured correctly. Please refer to the `styled-system` [docs](https://styled-system.com/getting-started#getting-started). Your theme object should contain at least a spacing scale with some default colors, it should looks something like this:
```javascript
export default {
space: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48],
colors: {
text: '#0A0A0A',
background: '#FFF',
border: '#E2E8F0',
muted: '#F0F1F3',
success: '#7DBE31',
error: '#FC0021',
info: '#00FFFF'
}
}
```
By default, `react-native-styled-toast` references the following theme color keys for their respective properties:
`background` (default toast background) \
`text` (default toast text color) \
`success` (default success accent color) \
`info` (default info accent color color) \
`error` (default error accent color) \
`muted` (default close button bg color)
If your colors object in your theme does not contain these, you can customize these values in the toast configuration object. E.g:
```jsx
const { toast } = useToast()
toast({ bg: 'myBgColor', color: 'myTextColor' })} />
```
## Fully Customizable Styling
You are now able to fully customize both the style of the Toast component itself, as well as the close button - all while respecting your theme contstraints. This can be achieved through the `toastStyles` and `closeButtonStyles` objects respectively. You can also hide the accent view. These options need to be passed to the internal toast config:
## Max Toasts
Along with the new styling updates, you are now also able to limit the number of toasts which a user can see. To do so, simply pass the `maxToasts` prop to the `ToastProvider` component:
```jsx
```
