React Native Image with Flex doesn't work

[flixyudh]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
Memory: 1.28 GB / 7.88 GB
Binaries:
Yarn: 1.10.0 - C:\Users\nawadata\AppData\Roaming\npm\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5056338

Description

reference of this issue
React native Image with flex doesn't show the image, just adding some space

react-native-cli: 2.0.1
react-native: 0.57.7

Reproducible Demo

import React, {Component} from 'react';
import RN, {View, StyleSheet, TouchableNativeFeedback, Dimensions} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Color from '../../Component/Color';
import CustomText from '../../Component/CustomText';

const {height, width} = Dimensions.get('window');

export default class App extends Component {

  render(){
    return(
      <View style={styles.container}>
        <View style={{flex:1, backgroundColor:Color.cadetblue, justifyContent:'center', alignItems:'center', flexDirection:'row'}}>
          <View style={{flex:1, marginHorizontal:width*0.05}}>
            {this.state.profile.map((item,ind)=>{
              return(
                <View key={ind} style={{flexDirection:'row', justifyContent:'space-between', borderBottomWidth:1, borderBottomColor:'black'}}>
                  <CustomText style={{fontSize:20, color:'white'}}>{item.label}</CustomText>
                  <CustomText style={{fontSize:20, color:'white', fontWeight:'500'}}>{item.value}</CustomText>
                </View>
              )
            })}
          </View>
          <RN.Image
            source={{uri: 'https://bootdey.com/img/Content/avatar/avatar1.png'}}
            style={{width:null, height:null, flex:1, margin:width*0.05, borderRadius:width*0.3/2, borderColor:'black'}}
            resizeMode='cover'
          />
        </View>
        <View style={{flex:3}}>
          //another content
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:{flex:1}
})

[simform-solutions]

<View
style={{
flex: 1,
backgroundColor: "blue",
justifyContent: "center",
// alignItems: "center",
flexDirection: "row"
}}
>
just comment alignItems

[CatapultJesse]

try with width: null, height: '100% and resizeMode: 'contain'
Snack: https://snack.expo.io/@jkcooper/rn22831-image-w-flex

[dulmandakh]

You must specify width and height for network images, please see https://facebook.github.io/react-native/docs/images