Some images are not showing in Android.

[kkotkkio]

I ran iPhone on simulator, It is well like this.

But when i ran android device, It is not working like this.

My Spec.

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "test": "node ./node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/samples": "2.1.1",
    "expo": "^24.0.0",
    "react": "16.0.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
    "react-native-masonry": "^0.4.4",
    "react-navigation": "^1.0.0-beta.21"
  },
  "devDependencies": {
    "jest-expo": "^24.0.0"
  }
}

Entire code.

import React from 'react';
import {
    ActivityIndicator,
    Image,
    Platform,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    View,
} from 'react-native';
import {Ionicons} from '@expo/vector-icons';
import Masonry from 'react-native-masonry';
import {scale, moderateScale, verticalScale} from '../utils/scaling';

export default class HomeScreen extends React.Component {
    static navigationOptions = {
        header: null
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <View style={styles.headSearch}>
                        <TextInput
                            style={styles.searchTextInput}
                            placeholder="검색"
                            placeholderTextColor="#C2C2C2"
                            underlineColorAndroid='transparent'
                        />
                        <Ionicons style={styles.searchIcon} name="md-search" size={20} color="#C2C2C2"/>
                    </View>
                    <View style={styles.headFilter}>
                        <Image style={styles.filterIcon} source={require('../assets/images/ic_filter.png')}/>
                    </View>
                </View>
                <View style={styles.listWrap}>
                    <Masonry
                        sorted // optional - Default: false
                        columns={2} // optional - Default: 2
                        spacing={2}
                        imageContainerStyle={
                            {borderRadius: 5}
                        }
                        bricks={[
                            {
                                data: {
                                    user: {
                                        name: "mss"
                                    },
                                    content: {
                                        title: '제목제목제목',
                                        subtitle: '서브 타이틀 서브 타이틀틀',
                                        distance: 1
                                    }
                                },
                                uri: 'https://s3.ap-northeast-2.amazonaws.com/contents-images/%EB%B0%A9%EC%BD%95%EC%9D%B5%EC%8A%A4%ED%94%84%EB%A0%88%EC%8A%A4+%EC%8B%A0%EC%B4%8C2%ED%98%B8%EC%A0%90+(2).jpg',
                                renderFooter: (data) => {
                                    return (
                                        <View style={styles.card}>
                                            <View style={styles.cardTextTop}>
                                                <Text style={styles.subject}>
                                                    {data.content.title}
                                                </Text>
                                                <Text style={styles.distance}>
                                                    {data.content.distance}km
                                                </Text>
                                            </View>
                                            <View style={styles.cardTextBottom}>
                                                <Text style={styles.subtitle}>
                                                    {data.content.subtitle}
                                                </Text>
                                            </View>
                                        </View>
                                    );
                                }
                            },
                            {
                                data: {
                                    user: {
                                        name: "mss"
                                    },
                                    content: {
                                        title: '제목제목제목',
                                        subtitle: '서브 타이틀 서브 타이틀틀',
                                        distance: 1
                                    }
                                },
                                uri: 'https://s3.ap-northeast-2.amazonaws.com/contents-images/%EC%8A%A4%ED%83%80%ED%95%84%EB%93%9C+%ED%95%98%EB%82%A8+(1).png',
                                renderFooter: (data) => {
                                    return (
                                        <View style={styles.card}>
                                            <View style={styles.cardTextTop}>
                                                <Text style={styles.subject}>
                                                    {data.content.title}
                                                </Text>
                                                <Text style={styles.distance}>
                                                    {data.content.distance}km
                                                </Text>
                                            </View>
                                            <View style={styles.cardTextBottom}>
                                                <Text style={styles.subtitle}>
                                                    {data.content.subtitle}
                                                </Text>
                                            </View>
                                        </View>
                                    );
                                }
                            },
                            {
                                data: {
                                    user: {
                                        name: "mss"
                                    },
                                    content: {
                                        title: '제목제목제목',
                                        subtitle: '서브 타이틀 서브 타이틀틀',
                                        distance: 1
                                    }
                                },
                                uri: 'http://img.wemep.co.kr/deal/4/261/2102614/dafe87235fb7c30194745e2d70792dae89b24925.jpg',
                                renderFooter: (data) => {
                                    return (
                                        <View style={styles.card}>
                                            <View style={styles.cardTextTop}>
                                                <Text style={styles.subject}>
                                                    {data.content.title}
                                                </Text>
                                                <Text style={styles.distance}>
                                                    {data.content.distance}km
                                                </Text>
                                            </View>
                                            <View style={styles.cardTextBottom}>
                                                <Text style={styles.subtitle}>
                                                    {data.content.subtitle}
                                                </Text>
                                            </View>
                                        </View>
                                    );
                                }
                            },
                            {
                                data: {
                                    user: {
                                        name: "mss"
                                    },
                                    content: {
                                        title: '제목제목제목',
                                        subtitle: '서브 타이틀 서브 타이틀틀',
                                        distance: 1
                                    }
                                },
                                uri: 'http://dimg.donga.com/wps/NEWS/IMAGE/2012/04/16/45563305.4.jpg',
                                renderFooter: (data) => {
                                    return (
                                        <View style={styles.card}>
                                            <View style={styles.cardTextTop}>
                                                <Text style={styles.subject}>
                                                    {data.content.title}
                                                </Text>
                                                <Text style={styles.distance}>
                                                    {data.content.distance}km
                                                </Text>
                                            </View>
                                            <View style={styles.cardTextBottom}>
                                                <Text style={styles.subtitle}>
                                                    {data.content.subtitle}
                                                </Text>
                                            </View>
                                        </View>
                                    );
                                }
                            }
                        ]}
                    />
                </View>
            </View>
        );
    }

    // _handleLearnMorePress = () => {
    //   WebBrowser.openBrowserAsync('https://docs.expo.io/versions/latest/guides/development-mode');
    // };
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    listWrap: {
        flex: 1,
        padding: 10
    },


    header: {
        paddingTop: Platform.OS === 'ios' ? 26 : 5,
        paddingLeft: 10,
        paddingRight: 10,
        flexDirection: 'row'
    },
    headSearch: {
        flex: 1
    },
    searchIcon: {
        position: 'absolute',
        left: 24,
        top: 12,
        backgroundColor: 'transparent'
    },
    searchTextInput: {
        backgroundColor: '#F4F4F4',
        paddingLeft: 44,
        borderRadius: 45,
        height: 43,
        borderWidth: 0,
        borderBottomWidth: 0,
        borderColor: '#F4F4F4',
    },
    headFilter: {
        marginLeft: 10,
        paddingTop: 6,
        height: 43
    },
    filterIcon: {
        width: 30,
        height: 27,
    },


    card: {
        paddingTop: scale(6),
        paddingBottom: scale(15),
        paddingLeft: scale(4),
        paddingRight: scale(4)
    },
    cardImage: {
        borderRadius: 5
    },
    cardTextTop: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignContent: 'center'
    },
    subject: {
        flex: 1, fontSize: moderateScale(12)
    },
    distance: {
        fontSize: moderateScale(10), fontWeight: 'bold', color: '#500606'
    },
    cardTextBottom: {
        marginTop: scale(1)
    },
    subtitle: {
        color: '#616161', fontSize: moderateScale(11), fontWeight: '100'
    }
});

Please help..

[brh55]

@kkotkkio Appreciate the extensive issue with the screenshots!
Do you have any console logs?

Some possibilities are:

• large files (recommend 300kb or less)
• currently a caching issue that I need to fix, if you return to an existing view and your view isn't re-rendered, you'll notice incorrect loading

[brh55]

Pull v0.4.5 to see if this fixes issues tied to the second bullet.

[kkotkkio]

@brh55 Thank you for answer.

I checked the volume of image files that I download.
But all of images 300kb less (50kb, 30kb, 90kb ..)
And I tried to change images on the left to correct image (same image on the right image).
But it's not solved. It's display same before.

And I saw log but no error, no warning.

So, I tried 'npm uninstall' and 'npm reinstall' like below. (I got it 'v0.4.5')
It's displayed [server error] but it's working.

And I tried 'npm ls', like below.

What is "peer dep missing"? I miss something?

[kkotkkio]

Other issues are solved but the left images still be not showing in Android.

[kkotkkio]

And I've another test.

All Images are same below.

But the left images still be not showing... Just left images..

All Images are 100kb, width: 500px.
This component version. ^0.4.5

[alpamys-qanybet]

@kkotkkio, @brh55
here what I have done, just downloaded the source code and use it instead of package.
and in Masonry.js

// containMatchingUris :: ([brick], [brick]) -> Bool
const containMatchingUris = (r1, r2) => false; //isEqual(r1.map(brick => brick.uri), r2.map(brick => brick.uri));

I found out that during initialization it renders in a normal way, but caching makes it not work on Android, so I just tested to disable cache and it works.

[brh55]

@alpamys-qanybet

Can you try the fix-reload branch and see if the fix is related to caching or with clipped view.

If the fix-reload branch is not working, then I can safely assume it's due to the component not reloading within a navigator.

[kevinscience]

On Android, it only shows pics of one side, sometimes left, sometimes right. How do we fix it?

[hiwijaya]

react-native-masonry using resizeMethod: 'auto' in Brick.js, you can try to change this property to resizeMethod: 'resize'

[orestis-z]

I managed to solve it with @alpamys-qanybet solution. But images are not being cached now.

Any plans for a clean fix for android?

[mckmarc]

I'm in the same situation as @zamponotiropita...

Please, any clean fix?

[sis-dk]

This is still an issue. Did anyone find a proper solution?

[borgogelli]

Same problem for me

[borgogelli]

Only if I use "columns={1}" it works as expected