How to style header and set title of each active tab? - react-native

Question

I am using Below code for creating a bottom Tab in my application which is working fine. Now what I want that as you have seen in below screen shot Header is showing blank. I want to change the background color of Header and also want to show each active tab name. How can I achieve this ?
Home.js
import React from 'react';
import { StyleSheet, Text, View, Button, StatusBar, Image, Alert } from 'react-native';
import BottomNavigation, { FullTab, Badge } from 'react-native-material-bottom-navigation';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import Icon from '#expo/vector-icons/MaterialCommunityIcons';
import Dashboard from './Dashboard';
import Leave from './Leave';
import Hour_Rec from './Hour_Rec';
import Rest_Holiday from './Rest_Holiday';
import Report from './Report';
const Home = createBottomTabNavigator({
Leave: {
screen: Leave,
navigationOptions: {
tabBarLabel: "Leave",
tabBarIcon: ({ tintColor }) => (
<Icon
name="movie"
size={17}
color={tintColor} />
)
}
},
Dashboard: {
screen: Dashboard,
navigationOptions: {
title: "Dashboard",
tabBarIcon: ({ tintColor }) => (
<Icon
name="gamepad-variant"
size={17}
color={tintColor} />
)
}
},
Hour_Rec: {
screen: Hour_Rec,
navigationOptions: {
tabBarLabel: "HR",
tabBarIcon: ({ tintColor }) => (
<Icon
name="music-note"
size={17}
color={tintColor} />
)
}
},
Rest_Holiday: {
screen: Rest_Holiday,
navigationOptions: {
tabBarLabel: "RH",
tabBarIcon: ({ tintColor }) => (
<Icon
name="gamepad-variant"
size={17}
color={tintColor} />
)
}
},
Report: {
screen: Report,
navigationOptions: {
tabBarLabel: "Report",
tabBarIcon: ({ tintColor }) => (
<Icon
name="music-note"
size={17}
color={tintColor} />
)
}
}
});
Dashboard.js
import React, { PureComponent } from 'react';
import { AppRegistry, StyleSheet, TouchableOpacity, View, Text, TextInput, Button, Picker,
ActivityIndicator, CheckBox } from 'react-native';
import styles from './source/component/style';
import { DatePickerDialog } from 'react-native-datepicker-dialog';
import moment from 'moment';
class Dashboard extends PureComponent {
static navigationOptions = ({ navigation }) => ({
title: "CPU",
headerStyle: {
backgroundColor: "#03A9F4"
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold"
}
})
render() {
return (
<View style={styles.container}>
<View style={[styles.box, styles.box1]}>
<Text style={{ fontSize: 40, color:'#fff' }}>Active Leave</Text>
</View>
<View style={[styles.box, styles.box2]}>
<Text style={{ fontSize: 40, color:'#fff' }}>Upcoming Leave</Text>
</View>
<View style={[styles.box, styles.box3]}>
<Text style={{ fontSize: 40, color:'#fff' }}>Absent status</Text>
</View>
</View>
);
}
}