Can I put renderScrollComponent as options

[harrymelka]

Hi, I am trying to implement this project on another project. I added this project with the refresh option but when I try to refresh, it is not working. If I do some modification to it the listview refresher activate itself and doesn't stop when hot reload is activated.

On the link on top you can find a sample of the project with a listview and they use the renderScrollComponent argument to add the project. So what I am asking is can I use the "options" option from the timeline-listview and use it at renderScrollComponent ? ( I already tried but no results)

Thank you

[harrymelka]

This was the test with the renderScrollComponent method

renderParallaxScrollView(props) {
        return (
            <ParallaxScrollView
                stickyHeaderHeight={ STICKY_HEADER_HEIGHT }
                parallaxHeaderHeight={ parallaxHeight }
                backgroundSpeed={10}

                renderBackground={() => (
                    <View key="background">
                        <Image
                            source={{uri: 'https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/11703082_10155826687875565_6900322515805023661_n.jpg?oh=eaef4fae86c2e04fc77db21ce078271d&oe=5A00BB2F'}}
                            resizeMode={'cover'}
                            style={{height: parallaxHeight, width: window.width}}
                        />
                        <View
                            style={{position: 'absolute',
                                top: 0,
                                width: window.width,
                                backgroundColor: 'rgba(0,0,0,.4)',
                                height: parallaxHeight
                            }}
                        />
                    </View>
                )}

                renderForeground={() => (
                    <BannerCard key="parallax-header" data={this.state.list[0]} />
                )}

                renderStickyHeader={() => (
                    <BannerCard key="fixed-header" data={this.state.list[0]} fixed />
                )}
            />
        )
    }

  render() {
    return (
      <View style={styles.container}>

        <Timeline
          style={styles.list}
          data={this.state.data}
          circleSize={20}
          circleColor='rgb(45,156,219)'
          lineColor='rgb(45,156,219)'
          timeContainerStyle={{minWidth:52, marginTop: -5}}
          timeStyle={{textAlign: 'center', backgroundColor:'#1abc9c', color:'white', padding:5, borderRadius:13}}
          descriptionStyle={{color:'gray'}}
          options={{
            style:{paddingTop:0},
            refreshControl: (
              <RefreshControl
                refreshing={this.state.isRefreshing}
                onRefresh={this.onRefresh}
              />
            ),
            renderFooter: this.renderFooter,
            onEndReached: this.onEndReached,
            renderDetail: this.renderDetail,
            //renderScrollComponent={this.renderParallaxScrollView.bind(this)}
            renderParallaxScrollView: this.renderParallaxScrollView
          }}

          renderDetail={this.renderDetail}
          renderParallaxScrollView={this.renderParallaxScrollView}

          innerCircle={'dot'}
        />
      </View>
    );
  }

[thegamenicorus]

Hi @harrymelka

Yes, you can use renderScrollComponent in options. I try it and it's work with ParallaxScrollView. my code::

renderParallaxScrollView(props){
    return (
    <ParallaxScrollView
      backgroundColor="blue"
      contentBackgroundColor="pink"
      parallaxHeaderHeight={300}
      renderForeground={() => (
       <View style={{ height: 300, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Hello World!</Text>
        </View>
      )}>
      <View style={{ height: 500 }}>
        <Text>Scroll me</Text>
      </View>
    </ParallaxScrollView>
    )
  }

  render() {
    return(
      <Timeline 
          data={this.data}
          innerCircle={'dot'}
          options={{
            renderScrollComponent: this.renderParallaxScrollView,            
          }}
        />
    )

ps. refreshControl option might not work with ParallaxScrollView.

[harrymelka]

Thank you ! I will try it and tell you if I could add the refreshControl