Reactive Banner for React Native

Lightweight (apx. 1kb) 🤏

Simple with no dependencies 😎

Runs animations in native thread 🏎

I needed something nicer and catchier than what ads providers show in my app. Voilà!

Installation

yarn add react-native-reactive-banner

Usage

Basics

import ReactiveBanner from 'react-native-reactive-banner'

...

return (
	<ReactiveBanner scrollRef={scrollRef} scrollOffset={scrollOffset}>
		your content here
	</ReactiveBanner>
);

Full

Example below highlights crucial bits for best performance:

• Using Animated component for scroll (Animated.ScrollView in this case);
• passing Animated.Event to onScroll handler;
• linking current scroll offset with scrollOffset animated value;
• setting useNativeDriver to true;
• passing scrollRef and scrollOffset to ReactiveBanner.

import React, { useRef } from 'react'
import { Animated } from 'react-native'
import ReactiveBanner from 'react-native-reactive-banner'

const Example = () => {

	const scrollRef = useRef(null);
	const scrollOffset = new Animated.Value(0);

	return (
		<Animated.ScrollView
			ref={scrollRef}
			onScroll={Animated.event(
				[{ nativeEvent: { contentOffset: { y: scrollOffset } } }],
				{ useNativeDriver: true }
			)}
		>
			<ReactiveBanner scrollRef={scrollRef} scrollOffset={scrollOffset}>
				your content here
			</ReactiveBanner>
		</Animated.ScrollView>
	);
}

export default Example

Params

| Params | Required | Description | Default | | --------------------- |:-------------:| ------------ | ------------ | | scrollRef | true | Reference pointer to parent scroll component. || | scrollOffset | true |Current scroll offset provided as Animated.Value.|| | height | false |Banner height (in px)| Window height divided by 5. |

☕