Recyclerlistview: externalScrollView usage example

[LukaszK88]

Hi There.
First of all thanks for amazing project.
Is there anyway example how to implement externalScrollView. I have been researching for a while and I was unable to find any examples in the repo.
Thanks!

[Larney11]

@LukaszK88 Hi, I'm having the same problem. Did you find an example?
I am trying to get the RecyclerListView working inside a ScrollView. Is this what the externalScrollView prop is for?

[LukaszK88]

Hi @Larney11.
I have managed to get it work. I can find and paste a snipped for you if you want, but TBH I reverted to RN lists as I have encountered some unpredictable behaviour.

[Larney11]

Please do. Thank you.

[LukaszK88]

I tried to remove not relevant parts let me know if it is any use to you:

import { RecyclerListView, DataProvider, LayoutProvider, BaseScrollView } from 'recyclerlistview';
import * as React from "react";
import {ScrollEvent} from "recyclerlistview/dist/reactnative/core/scrollcomponent/BaseScrollView";
import {View} from "react-native";

class ExtendedScrollView extends BaseScrollView {
  scrollTo(...args) {
    if (this._scrollViewRef) {
      this._scrollViewRef.scrollTo(...args);
    }
  }

  render() {
    return (
      <ScrollView
        {...this.props}
        ref={scrollView => this._scrollViewRef = scrollView}
      >
        <SomeHeader/>
        {this.props.children}
      </ScrollView>
    );
  }
}

export class Gallery extends React.Component<{}> {
  private layoutProvider:LayoutProvider;
  constructor(props) {
    super(props);

    this.layoutProvider = new LayoutProvider(
      (index) => {
        return 1;
      },
      (type, dim) => {
        dim.width = fullWidth;
        dim.height = fullHeight * 0.75;
      },
    );
    this.onScroll = this.onScroll.bind(this);
  }

  onScroll(e: ScrollEvent) {}

  renderItem = (type:any, photo:Photo, index:number) => {
    return (
      <Image photo={photo} />
    );
  }

  render() {

    return (
      <View style={{ flex:1, minHeight: 1, minWidth: 1 }}>
        <RecyclerListView
          rowRenderer={this.renderItem}
          onScroll={this.onScroll}
          externalScrollView={ExtendedScrollView}
          scrollThrottle={20}
          dataProvider={new DataProvider((r1, r2) => {
            return r1.url !== r2.url;
          }).cloneWithRows(this.props.photos)
          }
          layoutProvider={this.layoutProvider}
          isHorizontal
          scrollViewProps={{
            showsHorizontalScrollIndicator: false,
            pagingEnabled: true,
          }}
        />
      </View>
    );
  }
}

[Larney11]

Thanks for the help LukaszK88. Unfortunately, It goes against my current app architecture.

[ardyfeb]

This example broken on typescript