nuclearpasta / react-native-drax

A drag-and-drop system for React Native
MIT License
554 stars 68 forks source link

DraxScrollView scrollTo function is undefined. #53

Open anupkmaharjan opened 4 years ago

anupkmaharjan commented 4 years ago

I am trying to make the card center of the DraxScrollView which will have the dynamic width based upon the number of the cards DraxScrollView is acquiring.

I have used ` <DraxScrollView contentContainerStyle={[styles.receivedZone,]} alwaysBounceVertical={true} maximumZoomScale={10} minimumZoomScale={-2} directionalLockEnabled={false} horizontal={true} ref={(ref) => this.draxScrollViewRef = ref.getNodes()}

<View onLayout={event => this.layout = event.nativeEvent.layout} style={{ position: 'relative', width: 105, height: 105, overflow: 'visible' }} >

Cards content

`

The reference is then used on ` componentDidMount = async () => {

    setTimeout(() => {
        this.draxScrollViewRef.getNodes().scrollTo({
            y: this.layout.y,
            x: this.layout.x - GlobalItem.deviceWidth / 2 + 55,
            animated: false
        })
    }, 100);

}`

But the end result is TypeError: _this.draxScrollViewRef.getNodes is not a function. (In '_this.draxScrollViewRef.getNodes()', '_this.draxScrollViewRef.getNodes' is undefined)

What can be done?

lafiosca commented 4 years ago

I believe the current implementation of DraxScrollView does not provide a way to access the internal ScrollView ref. I think it needs to be enhanced to support the functionality you're requesting.

dipeshkarmacharyaa commented 4 years ago

I have found the solution to access ScrollView ref by exporting onScrollRefNew on line number 30.

Previous Code // Set the ScrollView and node handle refs.

 const setScrollViewRefs = react_1.useCallback((ref) => {
        scrollRef.current = ref;
        nodeHandleRef.current = ref && react_native_1.findNodeHandle(ref);
    }, []);

New Code // Set the ScrollView and node handle refs.

    const setScrollViewRefs = react_1.useCallback((ref) => {
        scrollRef.current = ref;
        nodeHandleRef.current = ref && react_native_1.findNodeHandle(ref);
        return onScrollRefNew?.(ref);
    }, [onScrollRefNew]);
lafiosca commented 4 years ago

I will take a look at this when I am able. Thank you.

orierel commented 3 years ago

Any progress on this?

lafiosca commented 3 years ago

PR #107 is in progress and should provide this functionality