React native, get size of bottom tab and set Fixed position for screen

I am using import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';

export default class TabBar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {        
    return (
      <Tab.Navigator style={styles.tab}>
        <Tab.Screen name="Home" component={HomeScreen} style={styles.window}/>
        <Tab.Screen name="Profile" component={ProfileScreen} style={styles.window}/>
        <Tab.Screen name="Cue" component={NewCueScreen} style={styles.window}/>
      </Tab.Navigator>
    );   
  }
}

I would like to set all the child component size so that it is never greater than width of the screen-tab size so that no component shall appear BEHIND the tab.

Here is a drawing of what I meant.