React Native Elements: How do I display header component in navigation bar?

I'm trying to display the header component in the navigation header but it's being displayed outside of it. The bar in blue is supposed to replace the white rectangular space at the top.

 render() {
    return (
      <View>
        <View
          style={{
            paddingTop: Constants.statusBarHeight
          }}
        >
          <Header leftComponent={{ text: "Delete Account" }} />
        </View>
        <ScrollView
          style={{ marginTop: 20 }}
          keyboardShouldPersistTaps="always"
        >
          <View
            style={{
              flex: 1,
              alignItems: "center",
              justifyContent: "center"
            }}
          >
          ...
          </View>
        </ScrollView>
      </View>
    );
  }

You are adding marginTop to the view that contains the header, which moves the header 50 margins down, remov marginTop from the view

<View>
  <Header leftComponent={{ text: 'Delete Account' }} />
</View>

You also need to use centerComponent with placement property to move the title to the left, and hide header in your stackNavigator

class AccountScreen extends React.Component {
  render() {
    return (
      <View style={{ marginTop: Constants.statusBarHeight }}>
        <Header placement="left" centerComponent={{ text: 'Delete Account' }} />
        <Text>Account Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Account: {
      screen: AccountScreen,
      navigationOptions: {
        header: null,
      },
    },
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Account',
  }
);

DEMO