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à!
yarn add react-native-reactive-banner
import ReactiveBanner from 'react-native-reactive-banner'
...
return (
<ReactiveBanner scrollRef={scrollRef} scrollOffset={scrollOffset}>
your content here
</ReactiveBanner>
);Example below highlights crucial bits for best performance:
- Using
Animatedcomponent for scroll (Animated.ScrollViewin this case); - passing
Animated.EventtoonScrollhandler; - linking current scroll offset with
scrollOffsetanimated value; - setting
useNativeDrivertotrue; - passing
scrollRefandscrollOffsettoReactiveBanner.
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 | 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. |