2 grids overlap and pile up

[emclab]

Love the simplicity of the module. A few lines of code to get things done! Thank you.

The problem I have most likely is not a bug but just how to. My RN 0.62.2 app displays image in grid (android emulator) and when I drag and drop an image, the 2 images are overlapped and I have to move them apart manually. what the setting is missing here? Here is code:

 import FastImage from 'react-native-fast-image';
 const renderItem = (item) => {
    return (        
                <FastImage
                    source={{uri:item.path}} 
                    resizeMode={FastImage.resizeMode.cover} 
                    key={item.key}
                    style={{
                        width:childrenWidth-1, //<<<==childrenWidth is 1/3 of the screen width
                        height:childrenWidth-1, 
                        position:"absolute",
                    }}
                    />

    )
}

return (
    <GridView
        data={pics}  //<<==pics is the array holding images uploaded
        numColumns={3}
        renderItem={renderItem}
        onReleaseCell={(items) => updateImages(items)}  //<<==method to update image data in parent component
    />
);

};

Here is the screen shot of initial screen after 4 images uploaded:

Here is the screen shot after one image was dragged and dropped:

The 2 images are overlapped with each other.

[emclab]

Also I would like to implement Modal to zoom in image with a click. Tried onPressCell and it didn't work with a click over the image. Here is the code:

import Modal from 'react-native-modal';
import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';
 const onPressCell = (item, index) => {
    return (
        <Modal isVisible={modalDialog===index} style={styles.modal} onBackdropPress={()=>setModalDialog(null)} >
        <TouchableOpacity style={styles.modalOpacity} onPress={()=>{setModalDialog(null)}}>
            <ReactNativeZoomableView
                maxZoom={3}
                minZoom={1}
                zoomStep={0.5}
                initialZoom={1}
                bindToBorders={true}
                captureEvent={true}
            >
                <FastImage 
                    source={{uri:item.path}} 
                    resizeMode={FastImage.resizeMode.cover} 
                    style={{
                        width:screen_width-10, 
                        height:screen_ht-10, 
                        verticalAlign:0,
                        paddingTop:0,
                    }}
                />
            </ReactNativeZoomableView>
        </TouchableOpacity>
    </Modal>   
    )
};

[5up-okamura]

@emclab Thank you for reporting. I just published the new version. Give it a try.

The second post is something wrong. Don't return an element directly on onPressCell. You should write a Modal element like below.

return (
    <View style={{ flex: 1 }}>
      <GridView {...} />
      <Modal>{...}</Modal>
    </View>
)

[emclab]

5up-okamura, Thank you and will update. Yes, I realized that I needed only reset modalDiag in onPressCell and moved the <Modal> out of it.

[emclab]

still not fully functioning. I Remove and re-install the module. ./gradlew clean and launch the app. When I pull to move the 2nd image to 1st grid, the 1st image moves to 2nd grid. But as soon as I release and drop the 2nd image, then the 1st image which has moved to 2nd grid jumps back to 1st grid and overlap. Here is the screen shot:

[emclab]

Also is there a javascript version of the demo for the module? Thanks.

[5up-okamura]

@emclab Try to this repo. Could be fine. https://github.com/5up-okamura/react-native-draggable-gridview/issues/1#issuecomment-666298517

No javascript version of the demo at the moment. I usually don't use javascript.

[emclab]

Uploading image crash the app after cloning joonhocho's fork:

AppContainer@http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:69184:22 [Fri Jul 31 2020 23:04:23.856] LOG 获取照片出错 [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.] [Fri Jul 31 2020 23:04:23.859] LOG more images to add : []

[5up-okamura]

I don't know joonhocho's fork specific. This is a simple demo. You could figure out what's different between yours and my code. https://snack.expo.io/@okamura/react-native-draggable-gridview

[emclab]

I was not able to pin point the problem. Is it the problem specific with Android? The draggable grid is inside a accordion component wrapped with <Animated.View> and <View>. But I don't see those 2 to be problem. The issue probably is with how renderItem is implmented (In my case packed with displaying, modal for zoom in and icon for delete image). I implemented a react-native-draggable-flatlist list inside the accordion and it works fine. I want to implement one view for both image display and image dragging instead having 2 views one for display and another for dragging.

[emclab]

I rolled back to version 1.03 and found the problem. It is the

  <GridView
        data={pics}
        numColumns={3}
        renderItem={renderItem}
        onPressCell={onPressCell}
        onReleaseCell={(items) => console.log("Hi ", items)}  //<<==drag works fine with this.  But no update to items
        onReleaseCell={items => updateImages(items)}  //<<==drag doesn't work.  `updateImages`  is a function passed in from parent to update image data in parent component. The `updateImages`will re-render parent component (including gridview) with reorder.
    />

Is there fix for this? What is the locked and renderLockedItem used for? When adding more images to grid for display, then it is like editing in the Demo.

[5up-okamura]

Did you try and read my demo on Snack?

Basically the library no responsibility for changing data. So you should update the data in onReleaseCell like this.

import _ from 'lodash'

const [data, setData] = useSstate(['A', 'B', 'C'])

const onReleaseCell = useCallback((items) => {
    if (!_.isEqual(data, items)) setData(items)
    }, [data]
)

The demo has a '+' cell for adding a new item at the first position. It needs to be locked in the position. The library needs to know which item can be dragged or not from locked.

[emclab]

Thanks for the info. It would be more clear if there are a few words for some of the property specific to your design. I read the DEMO code a few times and can only guess as good as I can.

[5up-okamura]

Yes, I designed it for an app named chappie. I ported the app from Objective-C to React Native. https://apps.apple.com/app/chappie/id996919169

I am planning to change the name of the props of this library. I know it's hard to understand what it says.

[emclab]

Has the code been updated last 2 days? I am getting this error after uploading the images. My code hasn't been changed. Deleted node_modules and re-install didn't make difference.

[5up-okamura]

You should install the specific version of the library.

see the history https://github.com/5up-okamura/react-native-draggable-gridview/commits/master

[InCodeDiver]

@emclab did you find out what is the issue for overlapping images?

[samuelcelko]

Im having a similar issue, the grid works perfectly when the data is simple like an array of numbers. When I try using say an array of objects with multiple properties, I experience a similar issue where the tiles get put on top of each other. Any ideas how to fix this?

[projjwalg]

@samuelcelko Hi, How did you solve your issue? I am having the same problem. Pleas suggest.

Thanks

[SunsetUzuki]

@projjwalg You need to use keyExtractor prop <GridView data={data} numColumns={2} renderItem={renderItem} keyExtractor={(item) => item.Id} <----With this one objects will not put on top of each other onPressCell={(item) => onPhotoPress(item.Id)} onReleaseCell={(items) => { setData(items); }} />