Miss any of our Open RFC calls?Watch the recordings here! »

react-native-toast-banner

1.0.0 • Public • Published

react-native-toast-banner

npm npm code style: prettier ci: github runs with expo

An animating banner fully based on Javascript

Try out on Expo Snack

Usage

import {
  ToastBannerProvider,
  ToastBannerPresenter,
  useToastBannerToggler /* or withToastBannerToggler */,
  Transition,
} from 'react-native-toast-banner';
 
const MyScreen = () => {
  /* If you don't want hooks, there is also HOC 'withToastBannerToggler' */
  const { showBanner, hideBanner } = useToastBannerToggler();
 
  const onPress = () => {
    showBanner({
      contentView: <Text>Hello the regular banner!</Text>,
      backgroundColor: 'red' /* default: undefined */,
      duration: 2000 /* default: 3000 */,
      transitions: [
        Transition.Move,
        Transition.MoveLinear,
        Transition.FadeInOut,
      ] /* default: [Transition.Move] */,
      onPress: () => {
        console.log('banner pressed');
        // hideBanner(); // when specifying 'disableHideOnPress: true'
      } /* default: undefined */,
      disableHideOnPress: true /* default: undefined */,
    });
  };
  return <Text onPress={onPress}>Show Banner</Text>;
};
 
const App = () => (
  <SafeAreaProvider>
    <ToastBannerProvider>
      <MyScreen />
      <ToastBannerPresenter />
    </ToastBannerProvider>
  </SafeAreaProvider>
);

See /example/App.tsx and /example/src/my-banners.tsx

Install

# install peer dependencies 
yarn add react-native-safe-area-context react-native-safe-area-view
# install module 
yarn add react-native-toast-banner

Contribution

PR is welcome!

Testing your library code with the example

/example imports the library directly from the root folder, configured with babel-plugin-module-resolver. So, just turn the watch option on at the root folder while you're making changes on the library, and check them on the example.

yarn tsc -w

Install

npm i react-native-toast-banner

DownloadsWeekly Downloads

6

Version

1.0.0

License

ISC

Unpacked Size

18.6 kB

Total Files

17

Last publish

Collaborators

  • avatar