SectionList渲染标题，无法隐藏/删除

Question

I have created a sectioned list, but I cannot hide the header, or whatever it is; as shown in the image. Under my actual header (with 'Search' back button) is another section that doesnt make sense; here is my code:

Note I am using React Navigation for the navigation. I guess it might be trying to render a header box that I have to hide my nav box but that is alot of work and doesnt make sense to me

import React from 'react';
import GlobalStyle from "../../assets/styles";
import { View, SectionList, Text, StyleSheet, Platform } from 'react-native';
import {createStackNavigator} from "react-navigation";

class SearchResultScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchString: 'Panadol',
            isLoading: false,
            message: '',
            server: null,
            searchReady: true,
            sections: [],
        };
    }

    componentDidMount() {
        this._prepareSectionList(this.props.navigation.getParam('items', []));
    }

    _prepareSectionList = (array) => {
        let sections = array.reduce((acc, item) => {
            const name = item['ProductGroupName'];
            acc[name] = acc[name] || [];
            acc[name].push(item);
            return acc;
        }, {});
        let sectionArray = [];
        console.log(sections);
        for (var key in sections) {
            let data = [];
            for (var item in sections[key]) {
                data.push(sections[key][item].TradeName)
            }
            sectionArray.push({title:key, data: data});
        }
        this.setState({ sections: sectionArray});
    };


    render() {
        const { navigation } = this.props;
        const items = navigation.getParam('items', []);
        return (
            <View style={{ marginTop : (Platform.OS) == 'ios' ? 20 : 0 }}>
                <SectionList
                    sections={
                        //[{title: 'D', data: ['xd','xdzz']},{title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},]
                        this.state.sections
                    }
                    renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
                    renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
                    keyExtractor={(item, index) => index}
                    ListHeaderComponent={null}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
});

export default createStackNavigator({
    Screen: SearchResultScreen,
});

Answer 1

By removing below line you can remove/hide the header.

style={{ marginTop : (Platform.OS) == 'ios' ? 20 : 0 }}

Answer 2

Turns out I was creating a 'Stack Navigator' instead of just exporting normally and using the Component I created, thus creating a new empty header bar.

When I removed the exporting with createStackNav... and replaced it with export default SearchResultScreen it works!