Почему нет заполнения, хотя я установил его при использовании flexbox с `space -ween` в реагировать на натив?

Question

Проблема:

Я создал простой компонент заголовка, который использует этот стиль (styled-components):

const HeaderContainer = styled.SafeAreaView`
  padding: 25px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
`;

Но когда я ставлю 2 детейвнутри него они имеют 0 отступов.

Итак, вы можете спросить, почему бы вам просто не использовать margin вместо padding?

На одном экране я должен поместить текстовое поле точно посередине экрана (с margin: auto)

Но когда я делаю это, оно не точно посередине:

Вот полный соответствующий код для этой проблемы:

Контейнер Header:

const HeaderContainer = styled.SafeAreaView`
  margin-left: 25px;
  margin-right: 25px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
`;

const Header = ({children}) => <HeaderContainer>{children}</HeaderContainer>;

И здесьсоответствующая часть, где текст не центрирован:

const LabelText = styled.Text`
  font-family: 'Ubuntu';
  font-size: 30px;
  font-weight: 500;
  color: white;
  margin: auto;
`;

const NewgameScreen = ({navigation}) => (
  <Container>
    <Header>
      <TouchableOpacity onPress={() => navigation.navigate('Home')}>
        <FontAwesomeIcon icon={faHome} size={35} color={'white'} />
      </TouchableOpacity>
      <LabelText>Neues Spiel</LabelText>
    </Header>
  </Container>
);

Последнее, но не менее важное.Пример кодов и коробки с реакцией (без встроенной, но с той же проблемой): https://codesandbox.io/s/lucid-mestorf-f9495?fontsize=14

Так как лучше всего справиться с этим сценарием?