Closed kenpaxtonlim closed 6 years ago
@kenpaxtonlim Hi! I'll check and fix it. It will be better if you show me an example of code. Thanks
'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!
@kenpaxtonlim I already fixed it in v1.2.0.
Added new props: isForegroundTouchable
, isBackgroundTouchable
, isBackgroundTouchable
, isHeaderTouchable
.
Can you test it?
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.
@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!
Okay thank you so much! Hopefully you can find a solution soon! :)
You are welcome!
@z4o4z @kenpaxtonlim would this help ? https://github.com/rome2rio/react-native-touch-through-view 😸
@rborn Does it work with all scrollable views(ScrollView, ListView, FlatList, SectionList, etc...)?
@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 🤔
+1 I really need TouchableBackground to use LightBox. However nice work 💯
@matteo-pennisi did you try to use foreground for touchable things?
@z4o4z I've tried but it doesn't work with https://github.com/oblador/react-native-lightbox
@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
based on this project it looks impossible without native code:
Hi @asciifaceman. Touches for foreground enabled by default without any native code)
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
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
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!
{
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>;
Hi @monolithed . The background can't be touchable. You can use foreground for touch.
@z4o4z, thanks, I solved the problem using renderHeader
)
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