octopitus / rn-sliding-up-panel

Draggable sliding up panel implemented in React Native https://octopitus.github.io/rn-sliding-up-panel/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

scrollView inside slider

Drzaln opened this issue · comments

Issue Description

Hi, i've tried to correct this issue for almost two weeks, and i still not get the expected result.
I want the scrollView not scroll if not reach top area and vice versa.

Steps to Reproduce / Code Snippets / Screenshots

This is some snippet from the code.

Screen Shot 2020-01-23 at 5 45 52 PM

This is screen record

@Drzaln Try it
NOTE: Only work on iOS
https://streamable.com/4s2ny

import React from "react";
import {
  Platform,
  ScrollView,
} from "react-native";

export class ScrollViewHandler extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isScrollToTop: true,
    };
  }

  onScroll = ({ contentOffset }) => {
    const isTop = contentOffset.y === 0;

    if (this.state.isScrollToTop === isTop) {
      return;
    }

    this.setState({
      isScrollToTop: isTop,
    });
  };

  render() {
    let dragHandler = {};
    if (this.state.isScrollToTop && Platform.OS === "ios") {
      dragHandler = this.props.dragHandler;
    }
    return (
      <ScrollView
        {...this.props}
        {...dragHandler}
        disableScrollViewPanResponder={this.state.isScrollToTop}
        bounces={false}
        scrollEventThrottle={16}
        onScroll={e => this.onScroll(e.nativeEvent)}
        showsVerticalScrollIndicator={false}
      >
        {this.props.children}
      </ScrollView>
    );
  }
}