lelandrichardson / react-native-parallax-view Goto Github PK
View Code? Open in Web Editor NEWParallax view for vertical scrollview/listviews with a header image and header content
License: MIT License
Parallax view for vertical scrollview/listviews with a header image and header content
License: MIT License
When I put content inside a "view" it will display, but not when my content is in a "ListView". Are there any plans to support the same style control but with a ListView for the body? @lelandrichardson
I followed the steps here to install React Native 0.8.0-rc.
When I do cd react-native-parallax-view; npm install
I get the error:
npm WARN peerDependencies The peer dependency react-native included from react-native-parallax-view will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency react-native@>= 0.4 || 0.5.0-rc1 || 0.6.0-rc included from react-native-blur will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Darwin 14.3.0
npm ERR! argv "/usr/local/Cellar/iojs/2.3.1/bin/iojs" "/usr/local/bin/npm" "install"
npm ERR! node v2.3.1
npm ERR! npm v2.7.6
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package react-native does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react-native@>= 0.4 || 0.5.0-rc1 || 0.6.0-rc
npm ERR! Please include the following file with any support request:
npm ERR! ~/Development/foreign/react-native-parallax-view/npm-debug.log
i.e. react-native-blur-view
doesn't depend on 0.8-rc.
The workaround is to remove the dependency on react-native-blur-view
for now.
The readme mentions that this is for listviews as well as scrollviews, I was kinda curious about how this would work. If you nest the listview inside the parallax-view then onEndReached doesn't fire. If you change the scrollview to a listview in the source code then the header no longer shows up properly.
Is there something really obvious I'm missing?
Thanks
I've seen similar issues such as #12 addressing issues with the order of header
prop preventing rendering, but it seems this problem is still relevant.
Regardless of where I place it, InteractionManager.runAfterInteractions
is never called in the parent component, preventing anything from loading.
<Parallax
windowHeight={Dimensions.get('window').width * 9/16}
header={(
<Text>
aaa
</Text>
)}>
...
</Parallax>
Is this resolved? I'm running RN 0.41.2 and iOS.
请问如何才能让标题图片显示在导航条下面,向上滑动时不会把导航条遮挡
sometimes header does not show. is invisible. Do you know this problem?
Hi!
I have an issue on Android - basically i want to archive this (SO):
It is working on iOS, but on Android the absolute positioned view (B) is clipped. Can you provide an example how to solve this on Android?
I already tried combinations of zIndex and elevation, but unfortunately not successful.
Thanks!
rn vesion 0.38
No any error but is not working,This plugin is what need to rely on,No effect is related to animation
when i pulled down background image did not get bigger
Coming from css I'm used to be able to use background-position
to specify an anchorpoint for the cropping that happens when you use resize mode cover
.
In this component the image gets cropped at center center position. Is there a way to change this, for example to left center?
Hi, I would like to programmatically scroll the scrollView to a specific position with scrollTo
. This requires exposing the underlying scrollView. react-native-scrollable-decorator
is probably a good way to do this?
not working in android device (android 6.0).
In order to make my header smaller I found the contentInset.top property. Though it works when first rendered after scrolling it does not work correctly anymore and you see a gap between the header and the content.
Would be useful if the require isn't used until it is needed, so if you decide to enable blur it will require it and throw an error but you can otherwise use it without blur.
You hardcoded the backgroundColor #2e2f31 on the image component. I have a case where the image is being loaded async, which means the backgroundColor sometimes appear before the image is loaded.
Can you supply a style prop for the image component, so one can set custom styles there?
Thanks.
Hello!
I first must say that your parallax view works amazing and we have been using it in our project to great success. Im currently trying to expand the parallax view to also include videos and other components as we are in need of a component that can animate with layoutanimation and then be used as a parallax view. Ive gotten it to work quite well and would gladly share the code if requested. I struggle though with some hickups in performance and had some questions how your parallaxview works so much better.
So my questions is as following:
Animated.View
instead of Animated.Image
. Is this perhaps a bottle neck in performance?Thanks again for the awesome component!
I'm not sure if you get this at all but I get an error when I run npm start
after having done a npm install
:
$ npm start [2.1.5]
> [email protected] start /Users/fushunpoon/Development/foreign/react-native-parallax-view/example
> ./node_modules/react-native/packager/packager.sh
Could not find dependencies.
Ensure dependencies are installed - run 'npm install' from project root.
What could be causing this?
It would be neat to be able to add custom styles to the window. Ie. one might want to remove or alter the bottom shadow.
When using the parallax with a NavigatorIOS
component, the size of the navigation bar is not taken in consideration, producing the following bug:
Here you have a demo project to reproduce the issue. I'm going to send you a PR with a workaround but I'm still not sure that the solution I got is the right one.
RN 0.25 deprecates { Component, PropTypes } from 'react-native' and moves them into 'react'.
RN 0.26 kills it completely. :)
Therefore
var React = require('react-native');
var {
Dimensions,
StyleSheet,
View,
ScrollView,
Animated,
} = React;
should be changed to
var React = require('react');
var ReactNative = require('react-native');
var {
Dimensions,
StyleSheet,
View,
ScrollView,
Animated,
} = ReactNative;
Thanks!
Hey @lelandrichardson. Great project! But the last commit is almost 1.5 years old and some people have tried to submit PRs to get the project moving. Maybe you could add some of these people as contributors so the project can continue to live?
Anyone wants to step in to merge some PRs?
@fatuhoku
@patoroco
@alvaromb
@gabrielbull
@parndt
@florianeckerstorfer
@BigPun86
@dejakob
@LIGNAT
@nbolender
@roscioli
Notice the tiny sliver of image on the right side of this background image. It comes from the "Settings" tab, which has another parallax view in it. It's flowing into my other content (because it's pre-rendered), but I don't want it to.
A simple fix is to apply an overflow: "hidden"
style to the entire parallax view.
Happy to submit a pull request, but I want to make sure you think it's a problem worth fixing in Parallax View and not in my tab presenter. I did try preventing the overflow from my tab presenter, but I was unable to contain the overflow that way.
when the height of ParallaxView's component is too small, some problem occurs.
backgroundSource propTypes should be:
PropTypes.oneOfType([
PropTypes.shape({
uri: PropTypes.string,
}),
// Opaque type returned by require('./image.jpg')
PropTypes.number,
]),
Getting this error when trying to run the app on an Android Virtual Device.
The package.json looks like this:
{ "name": "ZiliunApp", "version": "0.0.1", "private": true, "scripts": { "start": "node_modules/react-native/packager/packager.sh" }, "dependencies": { "react": "^16.0.0", "react-native": "^0.17.0", "react-native-parallax-view": "^2.0.6" } }
The error's coming from ParallaxView.js:25
Error Screen Link
Hello. Is there a way to detect a click on the paralax image ?
How can I use this LinearGradient component on the image?
It would be great to have a Footer prop that allows for a parallax footer, revealed behind the scrollview or listview.
I got a lot of 'Warning: ScrollView doesn't take rejection well - scrolls anyway' in xcode output window.
react 0.5.0
Hi there!
Upgraded to RN0.49.3 and getting node_module bugs.
in file React-native-parallax-view/parallaxView.js
I needed to add const PropTypes = require('prop-types')
const createReactClass = require('create-react-class');
Replace React.PropTypes with PropTypes
replace React.createClass with createReactClass
Appreciate any help on this issue.
Thanks!
If you try passing refreshControl={...} (see https://facebook.github.io/react-native/docs/refreshcontrol.html), the entire scroll view is broken (cannot scroll, nothing is rendered).
in ParallaxView.js
var screen = require('Dimensions').get('window');
should replaced with
var screen = Dimensions.get('window');
and add Dimensions
inside react required objects
react-native version ^0.14.2
I use react-native-parallax-view
inside of a form-sheet presented modal view on iPad. This means that while the viewport area is 540pt wide, the screen actually is much wider.
At present, the image's width is given by width: screen.width
, which is far too wide. this makes the image appear too 'zoomed in' and basically it has the wrong aspect ratio.
<ParallaxView
backgroundSource={null}
windowHeight={43}
header={(
<View style={styles.header}>
<View style={styles.headSearch}>
<TextInput
style={styles.searchTextInput}
placeholder="검색"
placeholderTextColor="#C2C2C2"
underlineColorAndroid='transparent'
/>
<Ionicons style={styles.searchIcon} name="md-search" size={20} color="#C2C2C2"/>
</View>
<View style={styles.headFilter}>
<TouchableOpacity>
<Image style={styles.filterIcon} source={require('../assets/images/ic_filter.png')}/>
</TouchableOpacity>
</View>
</View>
)}
scrollableViewStyle={{ backgroundColor: 'red' }}
>
But I've got error.
What's the matter?
Thing to changing is one it is backgroundSource require('image!backgroundImage') -> null.
I don't need backgroundSource and it's just white.
but before to change is error too.
And I tried to remove backgroundSource, but it's a same error (Cannot read 'number').
A drag and drop Component is nested inside the ParallaxScrollView.
How to ensure that the sliding of ParallaxScrollView is not triggered when dragging internal drag components
I have noticed that the performance is not optimal compared to that of a ScrollView. I know re-rendering a view with React is meant to be inexpensive. I wonder if that is still the case with RN?
I'm running into an error when windowHeight
is declared below header
. React Native throws the following error:
Here's how my code block for rendering looks:
<ParallaxView
backgroundSource={{uri: this.state.collection.background_image_url}}
header={(
<Text>
{this.state.collection.title}
</Text>
)}
windowHeight={200}
>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderPostCell}
style={styles.postsListView} />
</ParallaxView>
If I move windowHeight
above header
, this issue does not come up.
README.md
for this repo currently suggests windowHeight
being placed below header
, which produces this issue for me.
I've made a PR to update README.md
here: #11
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.