Looking for a solution to make my image fit the entire screen on the iPhone X simulator. I've tried adjusting the imageContainer width to "100%" and the container that encompasses everything, but haven't had any luck. Would appreciate any suggestions.
Here is an image showing the problem: Click here for image
Component:
import React, { Component } from 'react'
import { View, Text, ImageBackground, Image } from 'react-native'
import { Avatar, Icon, Button, Tile } from 'react-native-elements'
import { Actions } from 'react-native-router-flux'
import styles from './ProfileInListModal.style'
class ProfileInListModal extends Component {
render (user) {
return (
<View style={styles.container}>
<View style={styles.Imagecontainer}>
<Image
style={{height: '100%'}}
source={{uri: this.props.user.data.profile_picture}} />
</View>
<View style={styles.profileContent}>
<Text style={styles.nameTextStyle}>{this.props.user.data.name} {this.props.user.data.age}</Text>
</View>
<View style={styles.locationContainer}>
<Icon name='place' type='place' color='#FFF' size={15} />
<Text style={styles.locationText}> {this.props.user.data.position} </Text>
</View>
<View style={styles.descriptionTextContainer}>
<Text style={styles.descriptionTextStyle}> {this.props.user.data.descriptionText} </Text>
</View>
<View style={styles.socialIconContainer}>
<Icon
name='snapchat-ghost'
type='font-awesome'
color='white'
onPress={() => console.log('hello')}
iconStyle={styles.socialIcons}
/>
<Icon
name='facebook'
type='font-awesome'
color='white'
onPress={() => console.log('hello')}
iconStyle={styles.socialIcons}
/>
<Icon
name='instagram'
type='font-awesome'
color='white'
onPress={() => console.log('hello')}
iconStyle={styles.socialIcons}
/>
</View>
<View style={styles.buttonContainer}>
<Button
icon={<Icon name='message-plus' type='material-community' size={20} color='white' />}
title='Send a message'
titleStyle={{ fontFamily: 'GeosansLight' }}
onPress={this.startchat.bind(this)}
buttonStyle={styles.buttonStyle} />
</View>
</View>
)
}
}
export default ProfileInListModal
Style :
const styles = {
container: {
height: '100%',
marginBottom: 38,
},
Imagecontainer: {
height: 370
},
profileContent: {
flexDirection: 'column',
width: '35%',
marginTop: 30
},
nameTextStyle: {
color: 'white',
fontSize: 25,
fontFamily: 'GeosansLight'
},
locationContainer: {
flexDirection: 'row',
marginTop: 10
},
locationText: {
color: 'white',
fontSize: 15,
fontFamily: 'GeosansLight'
},
descriptionTextContainer: {
justifyContent: 'center',
alignItems: 'center',
padding: 30
},
descriptionTextStyle: {
color: 'white',
fontSize: 20,
fontFamily: 'GeosansLight',
textAlign: 'center'
},
socialIconContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 10,
marginBottom: 25
},
socialIcons: {
padding: 8
},
buttonContainer: {
justifyContent: 'center',
alignItems: 'center'
},
buttonStyle: {
backgroundColor: '#D1AF46',
width: 300,
height: 45,
borderColor: 'transparent',
borderWidth: 0,
borderRadius: 5
}
}
export default styles