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 issueI 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โฆ
Issue Analytics
- State:
- Created 6 years ago
- Comments:14 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@kkotkkio, @brh55 here what I have done, just downloaded the source code and use it instead of package. and in Masonry.js
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.
react-native-masonry using resizeMethod: โautoโ in Brick.js, you can try to change this property to resizeMethod: โresizeโ