Home

Awesome

<p> <img alt="react-native-styled-toast" src="https://i.imgur.com/w42dDGJ.png" width="208"> </p>

react-native-styled-toast

<p> Themeable react-native toast component built using styled-components & styled-system. </p> <br /> <p> <img alt="react-native-styled-toast gif" src="https://i.imgur.com/CYiuYPD.gif" width="350"> </p>

Features

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:

import { ThemeProvider } from 'styled-components'
import { ToastProvider } from 'react-native-styled-toast'

return (
  <ThemeProvider theme={theme}>
    <ToastProvider>
      <App />
    </ToastProvider>
  </ThemeProvider>
)

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:

import { useToast } from 'react-native-styled-toast'

const { toast } = useToast()

return <Button onPress={() => 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.

import { ToastContext } from 'react-native-styled-toast'

return (
  <ToastContext.Consumer>
    {({ toast }) => {
      return (
        <Button
          onPress={() =>
            toast({
              message: 'Woo! This is a success toast.'
            })
          }
          title="Show Success Toast"
        />
      )
    }}
  </ToastContext.Consumer>
)

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. Your theme object should contain at least a spacing scale with some default colors, it should looks something like this:

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:

const { toast } = useToast()

<Button onPress={() => 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:

<br />
toast({
  message: 'My First Toast!',
  toastStyles: {
    bg: 'lightblue',
    borderRadius: 16
  },
  color: 'white',
  iconColor: 'white',
  iconFamily: 'Entypo',
  iconName: 'info',
  closeButtonStyles: {
    px: 4,
    bg: 'darkgrey',
    borderRadius: 16
  },
  closeIconColor: 'white',
  hideAccent: true
})

Above is an example of a fully customized toast which renders the following: <br />

<p> <img alt="react-native-styled-toast gif" src="https://i.imgur.com/aQvzU2F.png" width="350"> </p>

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:

<ToastProvider maxToasts={2} offset={16} position="BOTTOM">
  <Container />
</ToastProvider>
<p> <img alt="react-native-styled-toast gif" src="https://i.imgur.com/4LCdpjP.gif" width="350"> </p> <br />

Dark Mode Compatible 🌗

Because of the theming capability of react-native-styled-toast, it has out of the box support for dark mode. All you need to do is ensure the color keys you're using for your different modes are the same

<br />

Props

ToastProvider

PropTypeRequiredDescriptionDefault
maxToastsnumbernoSets max number of toasts to showConstants.statusBarHeight
offsetnumbernoIncreases default offset from the top / bottomConstants.statusBarHeight
positionenumnoSets the position of the toastsTOP

ToastConfig

PropTypeRequiredDescriptionDefault
accentColorstringnoSets the background color of the accent on the leftundefined
animationTypestringnoSets the type of animation for toast entering, possible options are "slide", "fade" or "scale"slide
closeButtonStylesobjectnoAllows custom styling of the close button, values pull from themeN/A
closeIconColorstringnoSets the color of the close icontext
closeIconFamilystringnoSets the family of the close iconFeather
closeIconNamestringnoSets the name of the close icon'x'
closeIconSizestringnoSets the size of the close icon20
hideCloseIconbooleannoShows / hides of the close iconfalse
colorstringnoSets the text color of the toasttext
durationnumbernoms duration of toast before auto closing. 0 = infinite.3000
hideAccentbooleannoShows / hides accentundefined
hideIconbooleannoToggles whether to show / hide iconfalse
iconColorstringnoCustomize icon color using key from themeundefined
iconFamilystringnoAllow referencing of custom icon family from react-native-vector-iconsFeather
iconNamestringnoAllow referencing of custom icon name from specified icon familyundefined
iconSizestringnoSets the size of the icon20
intentenumnoUpdates icon and accent color based on intent.SUCCESS
messagestringyesText message that gets renderedToast Message!
onPressfuncnoFunction that gets exectuted onPress of toast() => false
shouldVibratebooleannoToggles whether phone vibrates on notificationfalse
subMessagestringnoSub message that gets rendered below messageundefined
toastStylesobjectnoAllows custom styling of the Toast component. Values pull from themeundefined
messagePropsTextPropsnoAllows custom styling message{}
subMessagePropsTextPropsnoAllows custom styling subMessage{}
allowFontScalingbooleannoAllows font scalingtrue
<br /> <div>Toast icon by <a href="https://www.flaticon.com/authors/ultimatearm" title="ultimatearm">ultimatearm</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>