react-native-toast-banner

 
 

An animating banner fully based on Javascript

Try out the demo on Expo Snack

Usage

``js
import { SafeAreaProvider } from 'react-native-safe-area-context';
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: Hello the regular banner!,
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 Show Banner;
};

const App = () => (






);
`

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

Install

`bash
npm install react-native-toast-banner
`

Contribution

PR is welcome!

$3

/example imports the library directly from the root folder, configured with babel-plugin-module-resolver.
So, just build the library with the watch option and run the example.

`bash
npm run build -- -w
cd example && npm run ios
``