search

monterosalondon / react-native-parallax-scroll

Parallax scroll view for react-native
MIT License
555 stars 62 forks source link

Pull to Refresh not working when using with Flatlist #20

Closed ashokkumar88 closed 6 years ago

ashokkumar88 commented 6 years ago

Issue details

I am using parallax scroll with Flatlist component. But the Pull to Refresh not working.

Steps to reproduce

Enable Pull to refresh in Flatlist and then you pull the list from top.

Please specify which versions of the RN and ParallaxScroll

Affected platforms

Screenshots / Screencast / Code Snippets (Optional)

<ParallaxScroll
      renderHeader={({ animatedValue }) => <Header>
      <Left>
        <Button transparent  onPress={() => this.props.navigation.navigate("DrawerOpen")}>
          <Icon
            active
            name="menu"/>
        </Button>
      </Left>
      <Body>
        <Title>Upcoming Events</Title>
      </Body>
  </Header>}
      headerHeight={MARGIN_TOP}
      isHeaderFixed={false}
      fadeOutParallaxBackground={false}
      fadeOutParallaxForeground={true}
      parallaxHeight={300}

      renderParallaxBackground={({ animatedValue }) => 
      <View style={{marginTop:50}}>
      <Image
source={{uri: 'http://placehold.it/800/300',width:variable.window.width,height:300}}
/>
<View style={globalstyles.overlay}/>
</View>

    }
      renderParallaxForeground={({ animatedValue }) => 
      <View style={{marginTop:MARGIN_TOP, height:300, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <H3 style={[globalstyles.mb10,globalstyles.white,globalstyles.thin]}>SHRIMAD BHAGWAT KATHA</H3>
<Text note  style={globalstyles.white}>Apr 25 - Apr 28</Text>
<View style={{width:MARGIN_TOP, marginTop:5,marginBottom:5,borderBottomColor: '#bbb',borderBottomWidth: StyleSheet.hairlineWidth}} />
<Text note style={globalstyles.white}>7pm-10pm</Text>

<View style={{alignItems:'center',justifyContent:'center'}}>
<Button small light style={[globalstyles.mt20]}>
<Icon name="cog" style={globalstyles.smallText}/>
<Text style={globalstyles.smallText}>ADD TO CALENDAR</Text></Button>

</View>
    </View>
    }
      parallaxBackgroundScrollSpeed={5}
      parallaxForegroundScrollSpeed={1.3}
    >
    <View style={{backgroundColor:'#fff'}}>
    <FlatList
    data={this.props.list}
    keyExtractor={(item,index) => index}
    renderItem={this._renderItem}          
    initialNumToRender={10}
    onRefresh={this.handleRefresh}
    refreshing={this.state.refreshing}

/>
</View>

    </ParallaxScroll>
z4o4z commented 6 years ago

Hi @ashokkumar88. I think you are not using this lib correctly. You can pass FlatList as a scrollableComponent prop to ParallaxScroll:

<ParallaxScroll
  data={this.props.list}
  keyExtractor={(item,index) => index}
  renderItem={this._renderItem}          
  initialNumToRender={10}
  onRefresh={this.handleRefresh}
  refreshing={this.state.refreshing}
  scrollableComponent={FlatList}
  {...parallaxScrollProps}
>
  {...}
</ParallaxScroll>