How to use flex in react-native correctly? - react-native

Question

Problem:
I have created a react application. In there I have created a page header in my app which is common to all my components and the title of the Header will be change accordingly.
This image shows what my code does.
What I want to achieve is this.
This is my code of that Page header.
/* eslint-disable react-native/no-inline-styles */
import React, {Component} from 'react';
import {StyleSheet, View, Text, Image} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
class PageHeader extends Component {
render() {
return (
<View style={{zIndex: 0}}>
<LinearGradient
colors={['#fdc830', '#ff9a00']}
style={{alignItems: 'center', borderBottomLeftRadius: 80}}>
<View
// eslint-disable-next-line react-native/no-inline-styles
style={{
flexDirection: 'row',
marginTop: '10%',
marginBottom: '5%',
paddingTop: '5%',
}}>
<Text
style={{
fontSize: 18,
fontWeight: 'bold',
fontStyle: 'normal',
fontFamily: 'sans-serif',
letterSpacing: 0.81,
color: '#000104',
marginTop: '2%',
marginLeft: this.props.marginLeft,
marginRight: '2%',
}}>
{this.props.title}
</Text>
<Image
style={{
width: 20,
height: 10,
marginTop: this.props.marginTop,
}}
source={this.props.image}
/>
</View>
</LinearGradient>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
top: 0,
flex: 3,
},
homeHeader: {
flexDirection: 'column',
flex: 1,
},
homeHeaderImage: {
flexDirection: 'row',
},
headerText: {
fontSize: 18,
fontWeight: 'bold',
fontStyle: 'normal',
fontFamily: 'sans-serif',
letterSpacing: 0.81,
color: '#000104',
marginTop: '2%',
marginLeft: '30%',
marginRight: '3%',
},
hederContentContainer: {
flexDirection: 'row',
marginTop: '30%',
marginBottom: '10%',
},
qrCodeGeneraterContainer: {
alignItems: 'center',
justifyContent: 'center',
},
viewDetails: {
color: '#ff9a00',
fontSize: 12,
marginLeft: '75%',
fontWeight: 'bold',
marginTop: '2%',
marginBottom: '1%',
},
});
export default PageHeader;
This is how I am using this component in my home component.
<PageHeader
title="Settings"
image={require('../../../assets/settings.png')}
width={DEVICE_WIDTH / 14}
height={DEVICE_HEIGHT / 24}
marginTop="2%"
marginLeft="40%"
/>
What wrong with my code is it not showing the image fully. I tried so many ways to get the image full but I was unable to do so. And It shows different difference sizes on different device sizes as I have given the width based on the device with. Can someone help me to solve these two issues? Thank you.

Answer 1

Try this in your image component :
<Image
style={{
width: 20,
height: 20,
marginTop: this.props.marginTop,
resizeMode="contain"
}}
source={this.props.image}
/>
Hope it helps. feel free for doubts