Skip to content
An animating banner fully based on Javascript
TypeScript Objective-C Ruby Java JavaScript Makefile Other
Branch: master
Clone or download
Latest commit bbf88c2 Jan 22, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows
.vscode set eslint with prettier (#11) Dec 28, 2019
docs v0.5.0 Dec 24, 2019
example
src support Expo as just work Jan 11, 2020
.eslintrc.js fix lint Jan 11, 2020
.gitignore
.prettierrc configure prettier Dec 25, 2019
Makefile
README.md Update README.md Jan 21, 2020
flow.sh Include flow.sh script Dec 25, 2019
index.ts
package.json v0.8.0 Jan 11, 2020
tsconfig.json
yarn.lock set eslint with prettier (#11) Dec 28, 2019

README.md

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' /* optional */,
      duration: 2000 /* optional */,
      transitions: [Transition.Move, Transition.MoveLinear, Transition.FadeInOut] /* optional */,
      onPress: () => {
        console.log('banner pressed');
        hideBanner();
      } /* optional. If you don't add 'onPress', the banner hides automatically on press. */,
    });
  };
  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
You can’t perform that action at this time.