React native responsive header height

Question

Im trying to set my header height so its responsive for tablets and smartphones. I've have 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 header looks ok on a tablet but too tall on a smartphone.

What is the best way to set dimensions for different devices?

EDIT:

I have this function:

export function em(value: number) {
  return unit * value;
}

And I am now using it in my stylesheet:

  headerHeight: em(6),
  headerImageWidth: em(3),
  headerImageHeight: em(3),
  headerLogoHeight: em(6),
  headerLogoWidth: em(20),

The image looks ok on tablet, but now on smartphone its too small. If i understand correctly, I need to use dimensions.width to set an appropriate unit value in my function?

Smartphone

Tablet

Answer 1

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 have mentioned using flex, but not working. I am not sure how exactly as if you are using it like above, size should be relative to screen size.

Using Dimensions

How about using the Dimensions module. It can be used to get the width and height of the window and you can set 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 (ex. percentage-based)