i6mi6 / react-native-parallax-scroll-view Goto Github PK
View Code? Open in Web Editor NEWA ScrollView-like component with parallax and sticky header support.
License: ISC License
A ScrollView-like component with parallax and sticky header support.
License: ISC License
Hey,
I'm using a ParallaxScrollView inside the renderScrollComponent of the ListView on ReactNative-Android . I've implemented onEndReached on the ListView to make sure more items are fetched as soon as the item list is about to end. But as soon as I add ParallaxScrollView in the renderScrollComponent, it renders only the first fold of items and never queries for more items. Can somebody help on this? I'm currently using React Native 0.30.0.
@jaysoo
I'm using the example code available on the README.md
file and obtaining the error provided above, here's the stack-trace.
This points to the block of code in index.js
translateY: interpolate(scrollY, {
inputRange: [0, p],
outputRange: [0, -(p / backgroundScrollSpeed)],
extrapolateRight: 'extend',
extrapolateLeft: 'clamp'
})
I'm running the latest version of react and react-native and running iOS 9.3 on a simulator.
Just in the event I may have made a mistake and missed it, here's the render code I'm using
render() {
return <ParallaxScrollView>
backgroundColor="blue"
contentBackgroundColor="pink"
parallaxHeaderHeight={410}
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>
}
Hey, first of all, thanks for an awesome component!
I have a problem regarding using it with a ListView: even when I specify a flex:1 on my ListView, the height doesn't stretch to the bottom of the page :
In red here: my ListView, that I wish would take the full available height below.
Is there a way to do so?
Cheers!
If we'd like to use the parallax scroll view as a grid, a basic example can be seen at this SO question, the style is not applied.
I believe the flex style applied to ListView
somehow gets overwritten by the parallax view. This is a simplified setup:
<ListView
ref="ListView"
contentContainerStyle={styles.list}
dataSource={this.state.dataSource}
renderRow={this.renderCategories}
renderScrollComponent={props => (
<ParallaxScrollView
...
On the stylesheet:
list: {
flexDirection: 'row',
flexWrap: 'wrap'
},
item: {
fontSize: 18,
margin: 5,
width: 100
}
Is this a bug? How could we get a flex grid working within the render row of the parallax view?
Thank you.
Hi,
Really like the component! I'm trying to implement a sticky header that simply contains the navigation bar, which works fine. However, the scrollable content contains ScrollableTabView (react-native-scrollable-tab-view. I have two problems that perhaps you may have a suggestion for:
Any suggestions?
Coll project.
Tried to use it with ListView. removeClippedSubviews={true} has no effect. Important setting for performance improvement.
The README defines the prop as "backgroundSpeed", but looking in the source code the prop is defined as "backgroundScrollSpeed"
Hello and many thanks for the great plugin. The scrollview I have it implemented it for, has a transparent background making it so that when you scroll up the background is still visible behind the list items. I was wondering if you could add the ability to fadeout the background (same as you have for foreground).
Thanks.
I would so much appreciate, if somebody can explain on fingers:
How to manipulate the background so that when you pull the view down, it doesnt resize the image but instead lets you bounce with the image itself, instead of sticking to the content.
How to manipulate the foreground so that when you scroll up the content goes on top of the foreground content(foreground gets behind the content), instead of the content going with the foreground image to top.
If possible to explain how to do it, with refs, or props or which practise is the best? Maybe great tutorial (apart from the facebook react-native resource pages), or could you please give simple working example, manipulating with scroll view, passing props to it, accessing children, doing animation on scroll.
I would really appreciate it, thank a lot in advance.
Even if I don't have anything inside the parallaxscrollview, there is still a lot of white space that's scrollable, how can i change the height size of the overall parallaxscrollview?
Updated PARALLAX_HEADER_HEIGHT in the example to 200, and when scrolling down, there's an increasing gap between the list items and parallax image. Anything above 350 seems fine.
I have one common case that I would like to do. When the the header is invisible I would still like to show just the left arrow (back button) similar to the twitter client. The common case is if you arrived at this view and you can still go back to the previous view on the nav stack.
Hey!
Thanks for this great react native component!
I have tested it on a simple news reader app that shows an article heading, title and HTML body. The parallax effect works fine but upon loading the background image does not fill the complete height of the header. I did not find this in the issues yet. And I wonder if there is a workaround for it. I have tried with different heights of the image and header.. no luck.
This also happens with the nested example.
Here is a GIF of my test, where you see it happen two times.
http://gfycat.com/FirstMeatyBunny
And the code for the render function (contains the HTMLView component)
render () {
return (
<ParallaxScrollView
parallaxHeaderHeight={300}
renderBackground={() => <Image source={{ uri: this.props.post.thumbnail_images.medium_large.url, width: window.width, height: 300 }}/>}
>
<View style={styles.header}>
<Text style={styles.headerText}>
{this.props.post.title}
</Text>
</View>
<View style={styles.loremBody}>
<HTMLView
value={this.props.post.content}
onLinkPress={(url) => console.log('navigating to: ', url)}
stylesheet={styles}/>
<TouchableOpacity onPress={ () => {this._scrollView.scrollTo(0, 0);}}>
<Text style={{color: '#00A7FF'}}>
Scroll to top
</Text>
</TouchableOpacity>
</View>
</ParallaxScrollView>
);
}
Are you guys open to adding this. I love this parallax so much but I don't like how it upsets the expected tactile feedback of dragging.
I could attempt to add it, if you guys are open to it.
I was wondering that it will be great to have an option to fade in the sticky header. Or maybe do a totally abstract way for the animations.
In my use case I'm having a background which is full height and I'd like it to decrease the height as I scroll up and become a sticky header which will be for example only 200px high. Currently it looks a bit weird because I fade out my background and the sticky header has the opacity of 1 all the time, so the animation doesn't feel smooth.
Hi,
I'm trying to nest the following component inside the ParallaxScrollView:
<ListView
ref="listview"
key={"postList"}
dataSource={this.state.dataSource}
renderSectionHeader={this.renderSectionHeader}
renderRow={this.renderArticle}
renderFooter={(this.state.connError === false) ? this.renderFooter : this.renderErrorView}
scrollEnabled={this.state.scrollEnabled}
onScroll={this.onScroll}
onEndReached={this.onEndReached}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this.onRefresh}
colors={['#f7913d', '#f7913d', '#f7913d']}
progressBackgroundColor={'#fff'}
/>}
/>
OnScroll, onEndReached and RefreshControl are not working.
I Also noticed that scroll properties are not changing by setting the OnScroll function on the ParallaxScrollView:
onScroll = () => {
console.log(this.refs.listview.scrollProperties);
if (this.refs.listview.scrollProperties.offset + this.refs.listview.scrollProperties.visibleLength >= this.refs.listview.scrollProperties.contentLength){
// this.onEndReached();
}
};
I also noticed the this.refs.ParallaxView.state is not updated at the OnScroll event, so I have no idea what is the new offset and what is the new scrollY values of the state.
Any ideas?
Not sure if this is due to React Native 0.24 or not, but in the ListView example https://github.com/jaysoo/react-native-parallax-scroll-view/blob/master/examples/ListView/Talks.js#L55
This line should be onScroll={props.OnScroll}
otherwise the underlying ListView will not receive proper scroll events and will not be able to update or render new rows when scrolling big lists down.
I'm getting the following warning with I run:
npm install react-native-parallax-scroll-view --save
Warning:
npm WARN EPEERINVALID [email protected] requires a peer of react-dom@^0.14.2 but none was installed.
npm WARN EPEERINVALID [email protected] requires a peer of react@>=0.14 but none was installed.
Hey
I've noticed when scrolling down, a gap appears between the header background and the content. I've made a gif to demonstrate.
Code is pretty much the non-list example code, with a backgroundColor on content to make the gap more obvious. It was recorded on the simulator, on device (iPhone 6) the issue is still there but not as pronounced.
Maybe this is just a limitation of the animated view trying to keep up with the scrolling - I couldn't figure out how to fix it.
Same issue as #20.
My problem is the following, I have my parallax view, and inside it I have a Tab Bar, this Tab Bar is composed by 4 tabs, each scenes of each tabs contains a ListView with an InfiniteScrollView
, the problem is when I reach the end the onLoadMoreAsync
function isn't called, I try to pass the onScoll function thought all child, but I stil have the problem.
I also try to run the RefreshControl of my ListView, but it also not working.
Because of the position of my TabBar and it's content I can't put my ParallaxView as a ScrollComponent.
Any idea ? :)
Any option to do that?
renderFixedHeader={() => (
<View key="fixed-header" style={styles.fixedSection}>
<Text style={[styles.fixedSectionText,{borderColor: '#ccc',borderBottomWidth: 5}]}
onPress={() => this.addToZig()}>
{this.state.follow ? 'ADD TO ZIGLIST' : 'REMOVE FROM ZIGLIST'}
</Text>
</View>
)}
Changing this.state.follow take more than 3,4 seconds to appear change
Hello @jaysoo!
I'm trying to use your component for a RN project. I was going crazy with everything working BUT the renderForeground method, so I simply tried copy/pasting your example with listView, and this is what I've got :
I haven't changed anything in your code. My best guess is that it's related to 0.18.1
, since the code is unaltered.
Could you please enlighten me on this issue?
Have a great day
I'm attempting to use the Background component to render a Slidebox containing multiple images. The reason that I'm using the Background is because it resizes with the Parallax bounce.
Touch events are not passed to the Background component however.
Is there a way to use this with a navbar, or to relay events somehow?
My navbar is react-native-router-flux's and I'd like this effect to update the navbar's title, but those are separate components, if you're not familiar the tree would look like:
<App>
<Navbar/>
<Scene>
... here's where i can use this component ...
</Scene>
</App>
How to auto resize background view/image on width change (when changing between landscape/portrait mode)?
Steps to reproduce (tested only on android):
I have this code:
<ParallaxScrollView
parallaxHeaderHeight={359}
stickyHeaderHeight={60}
renderForeground={this.renderForeground}
renderBackground={this.renderBackground}
renderFixedHeader={this.renderFixedHeader}>
and the fixed header rendered as expected.
But when i add this line:
renderStickyHeader={this.renderStickyHeader}
the sticky header rendered but fixed header disappear.
Is there a way to change the background color of the sticky and fixed headers? Was going through the props, but didn't really see an option for it.
First,thanks for react-native-parallax-scroll-view. It really helps me a lot.
I found that renderSectionHeader is not working. I want a fixed header in the listview. Can you give me some suggestion?
<ListView
ref="ListView"
style={styles.container}
dataSource={ this.state.dataSource }
renderRow={(rowData) => (
<View key={rowData} style={ styles.row }>
<Text style={ styles.rowText }>
{ rowData }
)}
renderSectionHeader={this.renderHeader}
enableEmptySections={true}
renderScrollComponent={props => (
<ParallaxScrollView
onScroll={onScroll}
headerBackgroundColor="#FFFFFF"
stickyHeaderHeight={ STICKY_HEADER_HEIGHT }
parallaxHeaderHeight={ PARALLAX_HEADER_HEIGHT }
backgroundSpeed={10}
backgroundColor="white"
.....
The examples imply react-native
in ./node_modules
:
The properties of React.xcodeproj
show the path:
But package.json
is missing and entry for react-native
Add this declaration to package.json
:
"devDependencies": {
"react-native": "0.21.0"
}
I recommend "nailing" the version, here: use 0.21.0
instead of ^0.21.0
. You never know whether 0.22.0
will break your project, or not.
When the ParallaxScrollView is used as the ScrollComponent inside a ListView the content height (scrollable area) doesn't seem to grow beyond 1525 pixels, regardless of the size of the datasource.
Debugging the code it appears that the passed in children, wrapped in _wrapChildren
is limited to 50 items (as an array of [undefined,[50],undefined]). The limit of the children seems to be related to the pageSize
of the parent ListView.
I tested your ListView exmple.
and I added data more than 40.
like this...
but only 21 rows showed up.
Could you give me some comments.
class Talks extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
}).cloneWithRows([
'Simplicity Matters1',
'Hammock Driven Development2',
'Value of Values3',
'Are We There Yet?4',
'The Language of the System5',
'Design, Composition, and Performance6',
'Clojure core.async7',
'The Functional Database8',
'Deconstructing the Database9',
'Hammock Driven Development10',
'Simplicity Matters11',
'Hammock Driven Development12',
'Value of Values13',
'Are We There Yet?14',
'The Language of the System15',
'Design, Composition, and Performance16',
'Clojure core.async17',
'The Functional Database18',
'Deconstructing the Database19',
'Hammock Driven Development20',
'Simplicity Matters21',
'Hammock Driven Development22',
'Value of Values23',
'Are We There Yet?24',
'The Language of the System25',
'Design, Composition, and Performance26',
'Clojure core.async27',
'The Functional Database28',
'Deconstructing the Database29',
'Hammock Driven Development30',
'Simplicity Matters31',
'Hammock Driven Development32',
'Value of Values33',
'Are We There Yet?34',
'The Language of the System35',
'Design, Composition, and Performance36',
'Clojure core.async37',
'The Functional Database38',
'Deconstructing the Database39',
'Hammock Driven Development40',
'Simplicity Matters41',
'Hammock Driven Development42',
'Value of Values43',
'Are We There Yet?44',
'The Language of the System45',
'Design, Composition, and Performance46',
'Clojure core.async47',
'The Functional Database48',
'Deconstructing the Database49',
'Hammock Driven Development50',
])
};
}
the listView functions initialListSize and pageSize doesn't work, any idea please ?
Really like your component. I use it with ToolbarAndroid component. I've change animating opacity to transparent of background color to get my toolbar actually visible (title, buttons etc), but still have 3 questions:
I would like to trigger an event when the ScrollView was pulled downward by X amount.
Is this possible now via some undocumented feature?
Views return by method ‘renderFixedHeader’ can't be seen ,I can't find the reason..
This is an observation that I came across while testing on the phone.
When I scroll up till the end(when I reach the bottom of list view), all components of the app flicker or drag.
Recorded a video for more clarity.
Hello,
i have a problem with sticky section headers of my ListView. When used in combination with ParallaxScrollView they don't stick to the top (e.g. under the fixed header), but scroll away with the ScrollView. Does anyone have encountered the same problem? Any solution?
Thanks ;-)
If I used a listview, can i make the header of the listview also stick after the parallax sticky header?
Hi,
I tried the list view example listed in the examples folder. Here is the code I have tried.
I am getting the following warning. Please help resolve this.
What am I doing wrong? It's the exact same code I am using in my project.
When I click on the image in the parallaxview nothing is detected, why ?
We can not use https://github.com/oblador/react-native-lightbox with parallax and its really bad.. :(
In ListView Talk.js
wrap foreground's Image
in a TouchableOpacity
like this:
renderForeground={() => (
<View key="parallax-header" style={ styles.parallaxHeader }>
<TouchableOpacity onPress={() => { AlertIOS.alert('Foreground Clicked!') }}>
<Image style={ styles.avatar } source={{
uri: 'https://pbs.twimg.com/profile_images/2694242404/5b0619220a92d391534b0cd89bf5adc1_400x400.jpeg',
width: AVATAR_SIZE,
height: AVATAR_SIZE
}}/>
</TouchableOpacity>
...
Build and run the modified code, then click on the foreground image, that is, the head in the bubble.
The result is: "Foreground Clicked"
So far, so good.
Now increase STICKY_HEADER_HEIGHT
from 70 to 270:
const STICKY_HEADER_HEIGHT = 270;
(By increasing STICKY_HEADER_HEIGHT
from 70 to 270 the sticky header are will overlap with the foreground are that renders the TouchableOpacity
area.)
Build and run the modified code, then click on the foreground image, that is, the head in the bubble - as before.
Alert popping up saying "Foreground Clicked!"
No alert.
If you have an absolutely positioned FAB Button in my ListView content that overlays the parallax foreground using negative absolute positioning. This works fine. However, when I add a sticky header, the FAB Button gets clipped by the sticky header. This suggests to me that it is rendered after the ListView content.
I'm not sure if this is required for the working of the parallax effect, but if it is not, I would recommend rendering it before the ListView content so this edge case doesn't occur.
Hello, Great Component!,
I was wondering if it is possible to get this animation of material design with this component:
Just an idea I had -- Lets say you had a square image in renderBackground
, and the phone is 300
wide. Then let's say you set parallaxHeaderHeight
to height * 0.8
(so that it doesnt take up so much room).
It would be cool if, as you scroll down, the parallax would uncover the remaining 0.2
left of the image before 'widening' or becoming elastic. It would allow taller images to be used, so that the user can still see all the content if they want to, but it doesnt take up so much space on the initial page render.
Any idea how I might achieve this? 🍻
In ListView Talk.js
wrap background's Image
in a TouchableOpacity
like this:
renderBackground={() => (
<View key="background">
<TouchableOpacity onPress={() => { AlertIOS.alert('Clicked!') }}>
<Image source={{uri: 'https://i.ytimg.com/vi/P-NZei5ANaQ/maxresdefault.jpg',
width: window.width,
height: PARALLAX_HEADER_HEIGHT}}/>
</TouchableOpacity>
...
Build and run the modified code, then click on the background image.
Alert popping up saying "Clicked!"
No alert.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.