Duplicate images loaded

[vvavepacket]

Version: 0.4.5

Expected Behavior

Images should be unique, no duplicate images should appear

Current Behavior

Currently, my bricks data only contains 2 unique images. I first initialize the bricks data to be an empty array, and then in the componentDidMount, I put 2 elements inside the array

constructor() {
        super();
        this.state = {
            tyu: []
        };
    }

componentDidMount() {
this.setState({
            tyu: [
                {
                    key: Math.floor((Math.random() * 100000000) + 1),
                    id: 0,
                    uri: 'https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA5Ny85NTkvb3JpZ2luYWwvc2h1dHRlcnN0b2NrXzYzOTcxNjY1LmpwZw=='
                },
                {
                    key: Math.floor((Math.random() * 100000000) + 1),
                    id: 1,
                    uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Cat-eating-prey.jpg/220px-Cat-eating-prey.jpg'
                },
            ]
        })
}

Possible Solution

Steps to Reproduce

Sample code

<Masonry
                                            sorted={false} // optional - Default: false
                                            columns={2} // optional - Default: 2
                                            bricks={this.state.tyu}
                                            spacing={1}
                                            imageContainerStyle={{
                                                backgroundColor: '#DCDCDC'
                                            }}
                                        />

Context (Environment)

Detailed Description

Possible Implementation

[justinsayone]

I'm having this issue too.

[brh55]

@vvavepacket Just ran the exact code within the example repo, no issues on duplications. From the looks of the warning notifications it appears the parent component maybe rendering multiple times, which would make me believe there is some configuration issues with the navigators or tabs.

Maybe want to console within the components and react-native-masonry to make sure nothing funky is going on.

[mpyw]

Confirmed on React Native v0.54.

@brh55 Why don't you test on recent versions? v0.46 looks pretty old.

[lc3t35]

Hi, is 0.5.0 branch valid enough for using it / merging soon in master ?

[brh55]

@lc3t35 It is valid enough, I just been a bit busy with a start up to add some additional features I've been wanting to include with the release.

[quasimodo1660]

I'm having this issue too.

[ahmedjamshed]

@brh55 when are you planning to merge version 0.5.0 in master. I am having duplicate images issue, single column render issue when images are cached (only first time works as expected) and sometimes images are left biased. Can you present some solution for now?

[brh55]

Just published current state of v0.5.0 as an alpha prerelease (v0.5.0-alpha.1). I haven't properly tested this, so feel free to test this and report any issues.

An npm install should default to this pre-release.

[ahmedjamshed]

@brh55 Duplicate image issue has been resolved on my side, but other two issues still persist. Although, single column render issue is not consistent on ios but consistent on android. I am attaching an image as a reference. Is there any quick fix for this?

[brh55]

@ahmedjamshed let's move this to a new thread for v0.5.0

[quasimodo1660]

@brh55 I fetch the data from my website api, then display them. My issue is after onPress into a details screen, the duplicate warning will appear. I am attaching some images to show the problem.
at first

Press one negative to another screen

go back to home page

[brh55]

There is a known issue if all bricks haven't resolved completely, and there is a state change, a duplicated request will be made for the bricks that have not been placed. Haven't seemed to find a good way to get around this, while preventing a full reload.