Comments (11)
I tried to work on that issue today, but with no success. I guess I need help to find a solution.
The following schemas represent the current implementation of the module after a small scroll.
With overflow | Without overflow |
---|---|
![]() |
![]() |
The legend :
- Red : The header container. It has absolute position on top and fixed height. Above it, the image and the overlay
- Blue: The fixed foreground. It stay on top too but it is above the overlay
- Black: The scrollView container
- Green: The scrollView. The scroll view is above the header. It go down a bit when you scroll to let some space to the navbar.
- Pink: The scrollView content. I added a
transformY
to be able to see the image behind. - Orange: The Touchable fixed foreground. Same implementation than the old header
- Yellow: The foreground. It scroll top with the scrollView
As you see, the scrollVIew is above the header and the fixed foreground. That's why we can't press on it. The scrollView take the event from the Responder system.
If you want to see the code with the color : #21
In the previous implementation, the header was above the scrollView (same legend)
With overflow | Without overflow |
---|---|
![]() |
![]() |
I reduce the height of the header container (in red) on scroll. The header container have an overflow: hidden
. The image and the fixed foreground are placed with absolute positioning inside and are cropped when the container height reduce (like you suggested @tychota)
The code is here : #20 (with the colors: #19)
Everything stay touchable but it is very laggy. I guess it is related to the image rerendering or too much time between the ScrollView event.
@tychota @Almouro @yleflour @4ian Anyone of you have an Idea on what I can do ?
from react-native-image-header-scroll-view.
Unfortunately no. Still have no solution for this :/
from react-native-image-header-scroll-view.
Hello,
Thanks for reporting me your issue.
Unfortunately, I don't know how to fix your problem.
To fix performance issues on Android, I put the ScrollView above the fixedForeground. So, when you try to tap your button, your are touching the ScollView instead.
I haven't any idea of implementation which is good on android and allow you to set Touchable in the fixedForeground.
Nevertheless, I changed the foreground to be rendered above the scrollView in the 0.5.0 version. So, if it's possible for you, you can add your button in the renderForeground
method.
from react-native-image-header-scroll-view.
+1
from react-native-image-header-scroll-view.
+1
It will be a perfect component if we can fix the issue. After all, we need render some touchable button or something like that to interact with user. Absolutely that will be cool.
from react-native-image-header-scroll-view.
I added a method renderTouchableFixedForeground
which use the old implementation in the v0.6.0
So you can use it to render a FixedForeground which accept Touchable.
But like I said, there is very bad perf on Android.
Every ideas to improve that are welcome.
from react-native-image-header-scroll-view.
But after I upgrade to V0.6.0 and use the renderTouchableFixedForeground
, it works for fixed foreground, but the renderForeground
can NOT be touchable any more!
Did I miss something?
from react-native-image-header-scroll-view.
The Basic usage example still works for me. Can I see your code ?
from react-native-image-header-scroll-view.
Cc @brentvatne, do you have any idea? We spoke about those kind of animation a while ago and you told me of a bug in RN and a way to bypass it.
from react-native-image-header-scroll-view.
I maybe gonna try a new implementation with https://github.com/cesardeazevedo/react-native-nested-scroll-view but i will add a native dependency
from react-native-image-header-scroll-view.
@Nhacsam any news about this issue? thanks!
from react-native-image-header-scroll-view.
Related Issues (20)
- Updating documentation & examples in v1.0.0
- 'onScroll' not usable when 'useNativeDriver' is 'true'.
- Optional props are required
- React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. HOT 2
- render Fixed Foreground problem
- MALWARE: infected all of my projects with countless vulnerabilities which cannot be resolved. HOT 1
- renderForeground (in version 1.0) does not display content when using react navigation 6
- Make renderForeground scrollable HOT 3
- Scroll Indicator is buggy. HOT 1
- how to show back button ? HOT 6
- Rendering overflowing Items does not work on Android HOT 5
- onScroll with useNativeDriver
- ListView is deprecated HOT 1
- TriggeringView doesn't trigger callback function while scrolling HOT 18
- can't use version 1.0 HOT 1
- scroll to top
- ScrollToTop HOT 1
- Typing ImageHeaderScrollView && TriggeringView HOT 1
- Cannot run example
- onPress within renderFixedForeground() not working for me HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-image-header-scroll-view.