pogdark-app/components/BottomNav.tsx

import {Appbar, Button, Text, useTheme} from "react-native-paper";
import {View} from "react-native";
import styles from "@/assets/styles";
import React from "react";

const BottomNav = () => {
    const theme = useTheme();
    return (
        <View style={{ backgroundColor: theme.colors.background }}>
            <Appbar.Header style={{ backgroundColor: theme.colors.primaryContainer, height: 38 }}>
                <View style={{ alignItems: "center", flexDirection: "row", justifyContent: "space-between", padding: 10, flex: 1, paddingHorizontal: 15 }}>
                    <Text style={{ color: theme.colors.primary, fontFamily: "Light" }}>Daisy Knight Dog Park</Text>
                    <Button
                        mode="text"
                        onPress={() => null}
                        style={{ backgroundColor: theme.colors.primary, height: 38/2, justifyContent: "center"}}
                        labelStyle={{ color: theme.colors.onPrimary, fontFamily: "Light"}}>
                        Change
                    </Button>
                </View>
            </Appbar.Header>
        </View>
    )
}

export default BottomNav;