pogdark-app/components/Broken.tsx

import {Dialog, useTheme} from "react-native-paper";
import { Image } from "react-native";
import React from "react";

const theme = useTheme();

const Broken = () => {
    return (
        <Dialog.Content>
            <Dialog.Title style={{color: theme.colors.onBackground, fontSize: 16, textAlign: 'center', fontFamily: "Light"}}>The Internet is a Series of Tubes</Dialog.Title>
            <Image
                source={require("../assets/images/broken.png")}
                style={{ alignSelf: 'center', width: "90%" }}
            />
            <Dialog.Title style={{color: theme.colors.onBackground, fontSize: 16, textAlign: 'center', fontFamily: "Light"}}>And these aren't connected. {"\n"} (We're still working on this part.)</Dialog.Title>
        </Dialog.Content>
    );
};

export default Broken;