How to enable touch for foreground/background components?

[kenpaxtonlim]

I am currently having a horizontal scrollview as my foreground in the parallax scroll. However, I am unable to swipe left or right in the horizontal scrollview. Is there anyway to enable touch input to reach the foreground component?

edit: I tried to put a share button in the header but that does not receive input as well

[z4o4z]

@kenpaxtonlim Hi! I'll check and fix it. It will be better if you show me an example of code. Thanks

[kenpaxtonlim]

'use strict'
import React, { Component } from 'react'
import { ScrollView, Image, StyleSheet, Dimensions } from 'react-native'

export default class ParallaxView extends Component{
  render(){
    return(
      <ScrollView
        style={styles.imageScroll}
        horizontal={true}
        pagingEnabled={true}
        >
          {this.props.image.map(image => {
            return(
              <Image
                style={styles.image}
                source={{uri: image}}
                key={image}
              />
            )
          })}
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  imageScroll: {
    height: Dimensions.get('window').height*0.7,
    width: '100%'
  },
  image: {
    width: Dimensions.get('window').width
  }
})

'use strict'

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
import BackButton from '../../Main/BackButton'
import ShareButton from '../../Main/ShareButton'

export default class FocusHeader extends Component{
  render(){
    return(
      <View style={styles.container}>
        <BackButton />
        <ShareButton />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  }
})

'use strict'

import React, { Component } from 'react'
import { View, Text, StyleSheet, Dimensions } from 'react-native'
import ParallaxScroll from '@monterosa/react-native-parallax-scroll'
import { Container, Content, Picker } from 'native-base'
const Item = Picker.Item
import { connect } from 'react-redux'
import ShareButton from '../../Main/ShareButton'
import ParallaxView from '../Component/ParallaxView'
import FocusHeader from '../Component/FocusHeader'

class ItemFocus extends Component{
render(){
    return(
      <ParallaxScroll
        parallaxHeight={Dimensions.get('window').height*0.7}
        parallaxBackgroundScrollSpeed={2}
        renderHeader={() => <FocusHeader />}
        headerFixedBackgroundColor={'transparent'}
        renderParallaxBackground={() => <ParallaxView image={this.item.image}/>}
        contentContainerStyle={styles.content}
        >
        //Some content
       </ParallaxScroll>
)}}

const styles = StyleSheet.create({
  content: {
    height: 1000,
    backgroundColor: 'white'
  },
  name: {
    marginHorizontal: 20,
    marginTop: 20,
    marginBottom: 10,
    fontSize: 20,
    color: 'black'
  },
  hline: {
    height: 1,
    backgroundColor: 'silver',
    width: '90%',
    alignSelf: 'center'
  },
  vline: {
    height: '70%',
    width: 1,
    backgroundColor: 'silver',
    alignSelf: 'center'
  },
  price: {
    marginLeft: 20,
    marginBottom: 20,
    fontSize: 20,
    fontWeight: 'bold',
    color: 'black'
  },
  colorsizeContainer: {
    height: 50,
    flexDirection: 'row'
  }
})

I am unable to scroll left or right, nor press the back and share button. Thanks!

[z4o4z]

@kenpaxtonlim I already fixed it in v1.2.0. Added new props: isForegroundTouchable, isBackgroundTouchable, isBackgroundTouchable, isHeaderTouchable.

Can you test it?

[kenpaxtonlim]

Hey I have tested isBackgroundTouchable, isHeaderTouchable but there seems to be bugs.

After updating to the latest version of your module, I ran my codes without editing anything, and the header can receive inputs (which is weird since the default suppose to be false). Also my background component completely disappears like this:

When I set isBackgroundTouchable to true, the header disappears and the background component can be seen again:

Setting isHeaderTouchable={false} does not disable touch input, i.e. I still can touch on the buttons in the header.

Setting isBackgroundTouchable={true} now screws up the content part, allowing it to go under the parallax view which is not supposed to happen.

[z4o4z]

@kenpaxtonlim Thanks for this feedback! Currently I can't support touches for background, because I don't know how to pass events through ScrollView. But I fix touches for foreground in v1.2.2!

[kenpaxtonlim]

Okay thank you so much! Hopefully you can find a solution soon! :)

[z4o4z]

You are welcome!

[rborn]

@z4o4z @kenpaxtonlim would this help ? https://github.com/rome2rio/react-native-touch-through-view 😸

[z4o4z]

@rborn Does it work with all scrollable views(ScrollView, ListView, FlatList, SectionList, etc...)?

[rborn]

@z4o4z didn't test it to be honest, it says it works with ListViews (old ones) and ScrollViews. But The news Flat/Section lists are scrollviews so it should work 🤔

[matteo-pennisi]

+1 I really need TouchableBackground to use LightBox. However nice work 💯

[z4o4z]

@matteo-pennisi did you try to use foreground for touchable things?

[matteo-pennisi]

@z4o4z I've tried but it doesn't work with https://github.com/oblador/react-native-lightbox

[z4o4z]

@matteo-pennisi @kenpaxtonlim @rborn Hi everybody. I just published a new version with touchable foreground with the same behaviour as background. So if you want to use touches in background you should use foreground instead of background

[asciifaceman]

based on this project it looks impossible without native code:

https://github.com/rome2rio/react-native-touch-through-view

[z4o4z]

Hi @asciifaceman. Touches for foreground enabled by default without any native code)

[asciifaceman]

It does seem so for others, however it hasn't worked for me yet, haha. But impossible I was referring to the background element, this is a problem in all the parallax scrollers that can't use linking because of expo or whatnot (myself included).

Foreground should just be working onPress right? I haven't been able to trigger events in the foreground either

[z4o4z]

Yep, foreground should just be working onPress. Can you provide your code? And you can find examples with touchable foreground in the storybook/stories/index.js file

[asciifaceman]

Oh wait hurr durr I haven't tested your library yet, I was just considering migrating to it from another and I usually troll issues to gain familiarity before doing so haha. I was thinking of the library I'm currently using - so point in your favor!

[monolithed]

{
    isBackgroundScalable: true,
    isBackgroundTouchable: true, 
    isForegroundTouchable: true, 
    isHeaderTouchable: true, 
    isHeaderFixed: true,
    parallaxHeight: 260
}

return <ParallaxScroll renderParallaxBackground={ () => {
    return <View style={ styles.header }>
        <TouchableOpacity onPress={ this.onExit }>
            <Icon name="close" style={ styles.close } onPress={ this.onExit } />
                </TouchableOpacity>
            </View>;
    }}>
</ParallaxScroll>;

I don't understand how to touch on the background block....

My solution is:

return <ParallaxScroll 
    renderHeader={ () => {
        return <TouchableOpacity style={ styles.close } onPress={ this.onExit }>
                <Icon name="close" style={ styles.closeIcon } onPress={ this.onExit } />
            </TouchableOpacity>
    }}

    renderParallaxBackground={ () => {
        return <View style={ styles.header }> </View>;
    }}>
</ParallaxScroll>;

[z4o4z]

Hi @monolithed . The background can't be touchable. You can use foreground for touch.

[monolithed]

@z4o4z, thanks, I solved the problem using renderHeader )