question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. Itย collects links to all the places you might be looking at while hunting down a tough bug.

And, if youโ€™re still stuck at the end, weโ€™re happy to hop on a call to see how we can help out.

Some images are not showing in Android.

See original GitHub issue

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

2018-01-05 1 56 05

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

kakaotalk_2018-01-05-14-00-45_photo_5

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โ€ฆ

Issue Analytics

  • State:open
  • Created 6 years ago
  • Comments:14 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
alpamys-qanybetcommented, Feb 16, 2018

@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.

2reactions
hiwijayacommented, Mar 28, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why Can't I See My Pictures in My Gallery? [Causes & Fixes]
Part 2: What If Android Gallery Doesn't Show Pictures? (11 Tricks) ยท Trick 1: Ensure you didn't close the camera immediately after snapping...
Read more >
Pictures in the My Files app are missing from the Gallery app
If your photos are visible in My Files but are not in the Gallery app, these files may be set as hidden. This...
Read more >
How To Fix Google Photos Not Showing All Photos On Android
How To Fix Google Photos Not Showing All Photos On Android ; Fire up the Settings app on your phone. Tap Apps &...
Read more >
Android image not showing in imageview - xml - Stack Overflow
I am having problems with my xml file. I want to show a picture but the picture is not showing.
Read more >
How to fix Pictures Not Showing in Gallery - A Savvy Web
To fix pictures not showing in gallery or showing blank you need to clear cache and clear data of gallery app on your...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found