Can I the View of images be display in React-Native? - react-native

Question

I have just stared react-native.
I got a strange situation.
In simulator's iOS, it's well. (like below)
But, In device's Android, it's not.
I set the margin to minus but it's cut in Android.
And images are just all black.
Entire code.
import React from 'react';
import {
ActivityIndicator,
Platform,
StyleSheet,
Text,
TouchableOpacity,
View,
Dimensions
} from 'react-native';
import Image from 'react-native-scalable-image';
import resolveAssetSource from 'resolveAssetSource';
// import FastImage from 'react-native-fast-image'
import {scale, moderateScale, verticalScale} from '../utils/scaling';
export default class MeuScreen extends React.Component {
static navigationOptions = {
header: null,
title: null
};
render() {
let meuBg = require('../assets/images/meu_home_bg.jpg');
let meuBgSource = resolveAssetSource(meuBg);
const bgImg = <Image width={Dimensions.get('window').width} source={meuBg} style={styles.topBg}/>;
return (
<View style={styles.container}>
{bgImg}
<View style={styles.boxWrap}>
<View style={styles.roundBox}>
<View style={styles.guys}>
<Image resizeMode="cover" style={styles.me} width={60} height={60}
source={{uri: 'https://static.pexels.com/photos/213117/pexels-photo-213117.jpeg'}}/>
<Image resizeMode="cover" style={styles.you} width={60} height={60}
source={{uri: 'https://static.pexels.com/photos/213117/pexels-photo-213117.jpeg'}}/>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgba(239, 244, 255, 0.36)',
position: 'relative',
alignItems: 'center'
},
topBg: {
position: 'absolute', top: 0,
zIndex: 1
},
roundBox: {
width: Dimensions.get('window').width - 60,
minHeight: 300,
borderWidth: 1,
borderColor: '#e5e5e5',
borderRadius: 30,
backgroundColor: '#fff',
marginTop: verticalScale(165),
zIndex: 2
},
guys: {
flex: 1,
marginTop: verticalScale(-25),
flexDirection: 'row',
zIndex: 3
},
me: {
borderWidth: 4,
borderColor: '#fff',
borderRadius: 30,
position: 'absolute',
top: 0, left: scale(46)
},
you: {
borderWidth: 4,
borderColor: '#fff',
borderRadius: 30,
position: 'absolute',
top: 0, right: scale(46)
},
category: {},
location: {},
dates: {}
});
First, I had to think like the web. (position and z-index)
But RN is not supported 'z-index'.
How do I work?
Please help..

Answer 1

please specify Image width and height, inside an Image style.
<Image resizeMode="cover" style={[styles.me,{width:60,height:60}]} source={{uri: 'https://static.pexels.com/photos/213117/pexels-photo-213117.jpeg'}}/>