![](/style/images/good.png)
![](/style/images/bad.png)
React native parallax scroll view
source link: https://reactnativeexample.com/react-native-parallax-scroll-view/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Rodrigocs – Animated Driver
This component now uses Native Driver by default.
Remember to pass a Animated component to renderScrollComponent
, by default it has Animated.ScrollView
Example
import ParallaxScrollView from 'react-native-parallax-scroll-view';
import CustomScrollView from 'custom-scroll-view'
const AnimatedCustomScrollView = Animated.createAnimatedComponent(CustomScrollView)
render() {
return (
<ParallaxScrollView
backgroundColor="blue"
contentBackgroundColor="pink"
parallaxHeaderHeight={300}
// renderScrollComponent={() => <Animated.View />}
renderScrollComponent={() => <AnimatedCustomScrollView />}
renderForeground={() => (
<View style={{ height: 300, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Hello World!</Text>
</View>
)}>
<View style={{ height: 500 }}>
<Text>Scroll me</Text>
</View>
</ParallaxScrollView>
);
}
react-native-parallax-scroll-view
A ScrollView
-like component that:
- Has a parallax header
- Has an optional sticky header
- Is composable with any component that expects a
ScrollView
(e.g.ListView
orInfiniteScrollView
) - Can be nested within other views
- Works on iOS and Android
Installation
$ npm install react-native-parallax-scroll-view --save
Note: For React Native 0.19.0 and earlier, you’ll want to use [email protected]
. Version 0.18.0
changes the scrolling API to be compatible with React Native 0.20.0.
iOS | Android |
---|---|
Basic Usage
import ParallaxScrollView from 'react-native-parallax-scroll-view';
// Inside of a component's render() method:
render() {
return (
<ParallaxScrollView
backgroundColor="blue"
contentBackgroundColor="pink"
parallaxHeaderHeight={300}
renderForeground={() => (
<View style={{ height: 300, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Hello World!</Text>
</View>
)}>
<View style={{ height: 500 }}>
<Text>Scroll me</Text>
</View>
</ParallaxScrollView>
);
}
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK