Реагировать на проблему с отображением SafeAreaView при загрузке в пользовательский заголовок

Question

Я в процессе возни с React-Native и работаю над приложением просто для удовольствия.

Я использую React Navigation в своем приложении и использую пользовательский компонент для переопределения компонента заголовка по умолчанию. Ничего из этого еще не закончено, я просто испытываю странную проблему рендеринга в середине разработки, из-за которой я задал этот вопрос.

Мой пользовательский компонент заголовка состоит из SafeAreaView, который оборачивает внутренние 3 компонента заголовка:

1. Левая кнопка меню
2. Заголовок
3. Кнопка поиска

Выпуск:

При загрузке приложения заголовок ненадолго отображается неправильно, а затем сам исправляет. Я считаю, что это может быть связано со стилями в моем компоненте, однако я новичок в разработке React Native и не совсем уверен, в чем может быть проблема. Пожалуйста, смотрите ниже изображения

Вот как выглядит заголовок, когда он отображается правильно.

А вот так выглядит заголовок в течение короткого момента, когда он некорректно рендерится после загрузки, прежде чем исправится, чтобы выглядеть как первое изображение.

Вот компонент:

class HeaderBar extends React.Component {

    ...
    ...

    render() {
        let myHeader = (
            <SafeAreaView style={styles.container}>
                <View style={styles.leftButton}>
                    <TouchableOpacity onPress={this.menuPressHandler}>
                        <View>
                            <Icon
                                name={
                                    Platform.OS === "android"
                                        ? "md-menu"
                                        : "ios-menu"
                                }
                                size={30}
                                color={Theme.primary}
                            />
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={styles.header}>
                    <Text>{this.props.title}</Text>
                </View>
                <View style={styles.rightButton}>
                    <TouchableOpacity onPress={this.searchPressHandler}>
                        <View >
                            <Icon
                                name={
                                    Platform.OS === "android"
                                        ? "md-search"
                                        : "ios-search"
                                }
                                size={30}
                                color={Theme.primary}
                            />
                        </View>
                    </TouchableOpacity>
                </View>
            </SafeAreaView>
        );

        let mySearchBar = (
            <SafeAreaView style={styles.container}>
                <SearchBar
                    onCancel={this.searchCancelHandler}
                />
            </SafeAreaView>
        );

        return this.state.isSearching ? mySearchBar : myHeader;
    }
}

А вот стили, используемые в компоненте:

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "row"
    },
    leftButton: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "flex-start",
        margin: 0,
        paddingLeft: 15
    },
    header: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "space-around",
        margin: 0
    },
    rightButton: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "flex-end",
        margin: 0,
        paddingRight: 15
    }
});

Пожалуйста, дайте мне знать, если у вас есть какие-либо указатели в правильном направлении, потому что я действительно не уверен, почему это происходит. Спасибо за ваше время!