Cannot tap element on renderFixedForeground #6

DevCappe · 2017-03-17T12:12:27Z

Hi, tanks for this amazing component.
I'm having an issue tapping on a button inside the renderFixedForeground.
When I scroll down and the header collapses, it works perfectly.

In the following example you can see that the button is not tappable until you scroll all the way down.
Thanks in advance.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Button
} from 'react-native';
import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';

export default class imageScroll extends Component {
  render() {
    return (
      <HeaderImageScrollView
        maxHeight={200}
        minHeight={58}
      
        renderFixedForeground={() => {
          return(
          <View style={styles.header}>
            <Button title="TEST" onPress={() => console.log('tap!!')}/>
          </View>)
           
        }}
        renderHeader={() => (
          <Image source={require('./photo.jpg')} style={styles.image} />
        )}
      >
        <View style={{ height: 1000 }}>
          <TriggeringView onHide={() => console.log('text hidden')} >
            <Text>Scroll Me!</Text>
            
          </TriggeringView>
        </View>
      </HeaderImageScrollView>
    );
  }
}

const styles = StyleSheet.create({
  header :{
        flex: 1,
        height: 56,
        padding: 10,
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        justifyContent: 'center',
  }
});

AppRegistry.registerComponent('imageScroll', () => imageScroll);

Nhacsam · 2017-04-02T17:57:57Z

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.

Silvercast · 2017-04-07T11:30:47Z

+1

denghejun · 2017-05-30T14:06:41Z

+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.

Nhacsam · 2017-06-04T13:21:47Z

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.

|

denghejun · 2017-06-05T10:37:54Z

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?

Nhacsam · 2017-06-05T14:46:53Z

The Basic usage example still works for me. Can I see your code ?

Nhacsam · 2017-08-06T16:29:46Z

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.

(This is a 60FPS gif)

@tychota @Almouro @yleflour @4ian Anyone of you have an Idea on what I can do ?

tychota · 2017-08-20T20:02:32Z

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.

Nhacsam · 2018-02-04T12:18:40Z

I maybe gonna try a new implementation with https://github.com/cesardeazevedo/react-native-nested-scroll-view but i will add a native dependency

FilipeAraujo · 2018-11-30T23:48:30Z

@Nhacsam any news about this issue? thanks!

Nhacsam · 2018-12-03T16:45:52Z

Unfortunately no. Still have no solution for this :/

Nhacsam added a commit that referenced this issue Apr 2, 2017

Make foreground tappable #6

7d23b36

Nhacsam mentioned this issue Apr 2, 2017

Make foreground tappable #11

Merged

This was referenced Aug 6, 2017

[DO NOT MERGE] Add color on the old implementation #19

Open

[DO NOT MERGE] Try to Go Back to the first implentation #20

Open

[DO NOT MERGE] Add colors on the new implementation #21

Open

Nhacsam added the help wanted label Feb 4, 2018

Nhacsam mentioned this issue Feb 21, 2019

Can I set a refreshControl on the ScrollView that doesn't render inside the header? #57

Open

This was referenced Mar 12, 2019

Trigger bounce/zoom on drag in header #61

Open

Cannot tap element on renderHeader #60

Closed

This was referenced Sep 27, 2019

Scrolling trigger #71

Open

Touchable renderHeader #67

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot tap element on renderFixedForeground #6

Cannot tap element on renderFixedForeground #6

DevCappe commented Mar 17, 2017 •

edited by Nhacsam

Loading

Nhacsam commented Apr 2, 2017 •

edited

Loading

Silvercast commented Apr 7, 2017

denghejun commented May 30, 2017 •

edited

Loading

Nhacsam commented Jun 4, 2017

denghejun commented Jun 5, 2017

Nhacsam commented Jun 5, 2017

Nhacsam commented Aug 6, 2017

tychota commented Aug 20, 2017

Nhacsam commented Feb 4, 2018

FilipeAraujo commented Nov 30, 2018

Nhacsam commented Dec 3, 2018

Cannot tap element on renderFixedForeground #6

Cannot tap element on renderFixedForeground #6

Comments

DevCappe commented Mar 17, 2017 • edited by Nhacsam Loading

Nhacsam commented Apr 2, 2017 • edited Loading

Silvercast commented Apr 7, 2017

denghejun commented May 30, 2017 • edited Loading

Nhacsam commented Jun 4, 2017

denghejun commented Jun 5, 2017

Nhacsam commented Jun 5, 2017

Nhacsam commented Aug 6, 2017

tychota commented Aug 20, 2017

Nhacsam commented Feb 4, 2018

FilipeAraujo commented Nov 30, 2018

Nhacsam commented Dec 3, 2018

DevCappe commented Mar 17, 2017 •

edited by Nhacsam

Loading

Nhacsam commented Apr 2, 2017 •

edited

Loading

denghejun commented May 30, 2017 •

edited

Loading