Сдвижение объектов в ReactNavigator вправо

При запуске сайта через expo, TabBar сдвигается в правую сторону, но по ширине он должен быть по всей максимально допустимой области экрана Код:

import React from 'react';
import { StyleSheet, View, TouchableOpacity, Text, Dimensions } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';

const ProfileScreen = () => <Text>Профиль</Text>;
const PlayScreen = () => <Text>Играть</Text>;
const HomeScreen = () => <Text>Главная</Text>;
const StoreScreen = () => <Text>Магазин</Text>;

const screenWidth = Dimensions.get('window').width;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#040a13',
    position: 'relative',
  },
  content: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  tabBar: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#222',
    padding: 10,
    position: 'absolute',
    bottom: 0,
    left: 0,
    width: screenWidth,
  },
  tabItem: {
    flex: 1,
    alignItems: 'center',
  },
});

const TabNavigator = () => (
  <View style={styles.container}>
    <View style={styles.content}>
      {/* Your main content or navigation screen */}
    </View>
    <TabBar />
  </View>
);

const TabBar = () => {
  return (
    <View style={styles.tabBar}>
      <TouchableOpacity style={styles.tabItem}>
        <Icon name="user" size={30} color="#fff" />
      </TouchableOpacity>
      <TouchableOpacity style={styles.tabItem}>
        <Icon name="gamepad" size={30} color="#fff" />
      </TouchableOpacity>
      <TouchableOpacity style={styles.tabItem}>
        <Icon name="home" size={30} color="#fff" />
      </TouchableOpacity>
      <TouchableOpacity style={styles.tabItem}>
        <Icon name="store" size={30} color="#fff" />
      </TouchableOpacity>
    </View>
  );
};

export default TabNavigator;