Instawork / hyperview

Server-driven mobile apps with React Native

Home Page:https://hyperview.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Scroll indicator is shown for `<view trigger="refresh" scroll="true" shows-scroll-indicator="false"/>`

Charles-Johnson opened this issue · comments

trigger="refresh" wraps a ScrollView without taking into account the shows-scroll-indicator attribute

I think this code in src/core/hyper-ref/index.tsx needs changing to fix this bug

ScrollableView = ({ children }: { children: JSX.Element }): JSX.Elem
  const behaviors = this.getBehaviorElements(TRIGGERS.REFRESH);
  if (!behaviors.length) {
    return children;
  }
  const refreshHandlers = behaviors.map(behaviorElement =>
    Behaviors.createActionHandler(behaviorElement, this.props.onUpda
  );
  const onRefresh = () => refreshHandlers.forEach(h => h(this.props.
  const refreshControl = React.createElement(RefreshControl, {
    onRefresh,
    refreshing: this.state.refreshing,
  });
  return React.createElement(
    ScrollView,
    { refreshControl, style: this.getStyle() },
    children,
  );
};

I think I can use this.props.element.getAttribute('shows-scroll-indicator') to determine the showsVerticalScrollIndicator prop for the ScrollView

I tested changing the above code to this which fixed the issue:

ScrollableView = ({ children }: { children: JSX.Element }): JSX.Element => {
  const behaviors = this.getBehaviorElements(TRIGGERS.REFRESH);
  if (!behaviors.length) {
    return children;
  }
  const refreshHandlers = behaviors.map(behaviorElement =>
    Behaviors.createActionHandler(behaviorElement, this.props.onUpdate),
  );
  const onRefresh = () => refreshHandlers.forEach(h => h(this.props.element));
  const refreshControl = React.createElement(RefreshControl, {
    onRefresh,
    refreshing: this.state.refreshing,
  });
  return React.createElement(
    ScrollView,
    {
      refreshControl,
      showsVerticalScrollIndicator:
        this.props.element.getAttribute('shows-scroll-indicator') !== 'false',
      style: this.getStyle(),
    },
    children,
  );
};

Good catch @Charles-Johnson ! thanks for spending the time investigating the issue. Could you submit your bug fix in a pull request?

No problem @flochtililoch ! I've submitted the pull request

Resolved by #819