React inline sensitive header height
I am trying to set the height of the header so that it is responsive on tablets and smartphones. I tried using flex column:
const headerStyle = {
paddingHorizontal: theme.metrics.mainPadding,
paddingTop: 0,
paddingBottom: 0,
backgroundColor: theme.colors.blue,
flex: 0.5,
flexDirection: 'column',
};
However, the title looks fine on a tablet, but is too tall on a smartphone.
What's the best way to set up measurements for different devices?
EDIT:
I have this function:
export function em(value: number) {
return unit * value;
}
And now I am using it in my stylesheet:
headerHeight: em(6),
headerImageWidth: em(3),
headerImageHeight: em(3),
headerLogoHeight: em(6),
headerLogoWidth: em(20),
The image looks fine on a tablet, but now it is too small on a smartphone. If I understand correctly, do I need to use dimension.width to set the appropriate unit value in my function?
Smartphone 
Tablet 
source to share
I can think of two ways
Using flex
<View style={{flex:1}}>
<View style={{flex:0.2}}>
<Text>Header</Text>
</View>
<View style={{flex:0.8}} />
</View>
You mentioned using flex but didn't work. I'm not sure exactly how you are using it, as above, the size should be relative to the screen size.
Using measurements
How about using a module Dimensions
. It can be used to get width
and height
window and you can set the height based on that
import {
Dimensions
} from 'react-native
const winWidth = Dimensions.get('window').width;
const winHeight = Dimensions.get('window').height;
header = {
height: winHeight * 0.2 // 20%
}
Then use width and height to set the height of the header (e.g. based on percentages)
source to share