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

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

export default function NavHeaderBar(props) {
    const theme = useTheme();
    const { registerInfo } = useModel("userModel", true);
    const { backRouter } = useModel("routersModel", true);

    const renderBackAction = () => (
        <TopNavigationAction icon={BackIcon} onPress={backRouter} />
    );
    return (
        <TopNavigation
            alignment='center'
            title={props.title}
            accessoryLeft={props.back != false && renderBackAction}
        />
    );
}

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