Dingdong_app/components/NavHeaderBar.js

import React from "react";
import {
    Button,
    Layout,
    useTheme,
    Text,
    TopNavigation,
    TopNavigationAction,
    Icon,
} from "@ui-kitten/components";
import { useModel } from "flooks";
import { Image, StyleSheet } from "react-native";
import * as RootNavigation from "../navigation/RootNavigation.js";

const BackIcon = props => <Icon {...props} fill='#fff' name='arrow-back' />;

export default function NavHeaderBar(props) {
    const theme = useTheme();
    const renderBackAction = () => (
        <TopNavigationAction
            icon={BackIcon}
            onPress={() => RootNavigation.goBack()}
        />
    );
    const { accessoryRight } = props;
    return (
        <TopNavigation
            alignment='center'
            title={props.title}
            accessoryLeft={props.back != false && renderBackAction}
            accessoryRight={accessoryRight}
        />
    );
}

const styles = StyleSheet.create({
    container: {
        height: 45,
    },
});