reactnative コンポーネントが崩れる

コンポーネントを呼び出したら崩れました。
どうしてなのかがわからず解決法がわかりません、、助けてください！！

js
1/* ----- 外部インポート ----- */
2import React from 'react';
3import {
4  Text,
5  View,
6  TouchableOpacity,
7} from 'react-native';
8import SvgUri from 'react-native-svg-uri';
9import { Aps } from '***/App/Themes';
10
11/* ----- 内部インポート ----- */
12import styles from './Home.styles';
13import HeaderPrimary from './HeaderPrimary';
14import HomeItemHeading from './HomeItemHeading';
15import HomeMenuItem from './HomeMenuItem';
16import MenuItem from './MenuItem';
17import FooterMenuBarBasic from './FooterMenuBarBasic';
18
19/* ----- 本体の定義 ----- */
20type Props = {
21  title: String,
22};
23
24const Home = (props: Props) => (
25  <View>
26    <HeaderPrimary />
27    <View style={styles.homeSection}>
28      <HomeItemHeading />
29      <HomeMenuItem />
30      <View style={styles.homeMenuBorder}></View>
31      <HomeMenuItem />
32    </View>
33    <View style={styles.homeSection}>
34      <HomeItemHeading />
35      <MenuItem />
36      <MenuItem />
37      <MenuItem />
38      <MenuItem />
39      <MenuItem />
40      <MenuItem />
41      <MenuItem />
42    </View>
43    <FooterMenuBarBasic/>
44  </View>
45);
46export default Home;

↑**<HeaderPrimary />** と <FooterMenuBarBasic/> が崩れちゃいます、、
↓長くなりそうなので <HeaderPrimary /> の中身のみ記載します。

js
1/* ----- 外部インポート ----- */
2import React from 'react';
3import { Text, View, TouchableOpacity } from 'react-native';
4import { Icon } from 'react-native-elements';
5
6
7/* ----- 内部インポート ----- */
8import { navigate } from '***/App/Modules/Navigation/NavigationService';
9
10import styles from './HeaderPrimary.styles';
11
12
13/* ----- 本体の定義 ----- */
14type Props = {
15  title: String,
16};
17
18const HeaderPrimary = (props: Props) => (
19  <View style={styles.header}>
20    <Text style={styles.title}>
21      {props.title}
22    </Text>
23    <TouchableOpacity
24      style={styles.menu}
25      onPress={() => { navigate('Auth'); }}
26    >
27      <Icon name="menu" type="simple-line-icon" size={23} />
28    </TouchableOpacity>
29    <TouchableOpacity
30      style={styles.notification}
31      onPress={() => {}}
32    >
33      <Icon name="bell" type="simple-line-icon" size={23} />
34    </TouchableOpacity>
35  </View>
36);
37export default HeaderPrimary;

js
1import { StyleSheet } from 'react-native';
2
3export default StyleSheet.create({
4  header: {
5    flexDirection: 'row',
6    flex: 1,
7    paddingTop: 23,
8    paddingLeft: 6,
9    paddingBottom: 7,
10    borderBottomWidth: 1,
11    borderBottomColor: '#B3B3B3',
12    backgroundColor: '#FAFAFA',
13  },
14
15  centerd: {
16    flex: 1,
17    justifyContent: 'center',
18  },
19
20  title: {
21    flex: 9,
22    justifyContent: 'center',
23    marginTop: -5,
24  },
25
26  isGapRight40: {
27    paddingRight: 40,
28  },
29
30  titleText: {
31    fontSize: 18,
32    fontWeight: 'bold',
33    textAlign: 'center',
34  },
35
36  badgeWrap: {
37    position: 'absolute',
38    right: 12,
39  },
40
41  badge: {
42    backgroundColor: '#F2340C',
43    width: 5,
44    height: 5,
45    borderRadius: 100,
46  },
47  relative: {
48    position: 'relative',
49  },
50});

コンポーネント単体としてコーディングしている時点だと期待通りに表示されるのですが、いざコンポーネントとして呼び出すと天地が短いというか、、コンポーネント自体がキュッ縮んでしまい、しかし文字サイズはそのままなので上半分しか読めないようになってしまいます。
まるで絶対値指定が影響を受けているような、、？
足りない情報があれば言ってくださいm(_ _)m