React Navigation SafeAreaView Render Issue on Load in Custom Header

Question

I am in the process of messing around with React-Native and am working on an app just for fun.

I am using React Navigation in my app, and am using a custom component to override their default header component. None of this is finished yet, I am just experiencing a strange render issue in the middle of development which has led me to asking this question.

My custom header component consists of a SafeAreaView which wraps the inner 3 components of the header:

1. The left menu button
2. The title
3. The search button

The issue:

When loading the app, the header briefly renders incorrectly then "Fixes" itself. I believe this may have to do with the styles on my component, however I am new to React Native development and am not quite sure what the issue could be. Please see the below images

Here is what the header looks like when it is rendered correctly.

And this is what the header looks like for the brief moment where it incorrectly renders after loading, before it corrects itself to look like the first image.

Here is the component:

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;
    }
}

And here are the styles used in the component so far:

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
    }
});

Please let me know if you have any pointers in the right direction because I am truly unsure of why this is happening. Thank you for your time!