public/pogdark-app
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fixed location/bottom nav, label in topnav

Browse Source
This commit is contained in:
whysman 2025-03-25 23:38:19 -04:00
parent ebaef46456
commit 294ee04b34
5 changed files with 48 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/index.tsx
View File

@ -63,7 +63,9 @@ const Index = () => {
setChanged={setUserDataChanged} setChanged={setUserDataChanged}
onClose={() => setProfileActive(false)} onClose={() => setProfileActive(false)}
/> />
<BottomNav toggleLocation={() => setProfileActive(true)}/> <BottomNav
isProfileActive={isProfileActive}
/>
</View> </View>
); );
}; };

54
components/BottomNav.tsx
View File

@ -1,24 +1,44 @@
import {Appbar, Button, Text, useTheme} from "react-native-paper"; import {Appbar, Portal, Button, Dialog, Text, useTheme } from "react-native-paper";
import {View} from "react-native"; import { View } from "react-native";
import styles from "@/assets/styles"; import styles from "@/assets/styles";
import React from "react"; import React, {useState} from "react";
import Location from "@/components/Location";
const BottomNav = ({ toggleLocation }: { toggleLocation: () => void; }) => {
interface BNProps {
isProfileActive: boolean;
}
const BottomNav: React.FC<BNProps> = ({ isProfileActive }) => {
const theme = useTheme(); const theme = useTheme();
const [menuVisible, setMenuVisible] = useState(false);
return ( return (
<View style={{ backgroundColor: theme.colors.background }}> <View style={ isProfileActive && { display: 'none' }}>
<Appbar.Header style={[styles.bottomBar, { backgroundColor: theme.colors.primaryContainer }]} > <View style={{ backgroundColor: theme.colors.background }}>
<View style={{ alignItems: "center", flexDirection: "row", justifyContent: "space-between", padding: 10, flex: 1, paddingHorizontal: 15 }}> <Appbar.Header style={[styles.bottomBar, { backgroundColor: theme.colors.primaryContainer }]} >
<Text style={{ color: theme.colors.primary, fontFamily: "SpaceReg" }}>Daisy Knight Dog Park</Text> <View style={{ alignItems: "center", flexDirection: "row", justifyContent: "space-between", padding: 10, flex: 1, paddingHorizontal: 15 }}>
<Button <Text style={{ color: theme.colors.primary, fontFamily: "SpaceReg" }}>Daisy Knight Dog Park</Text>
mode="text" <Button
onPress={() => toggleLocation } mode="text"
style={{ backgroundColor: theme.colors.primary, height: styles.bottomBar.height/2, justifyContent: "center"}} onPress={() => setMenuVisible(true) }
labelStyle={{ color: theme.colors.onPrimary, fontFamily: "SpaceReg"}}> style={{ backgroundColor: theme.colors.primary, height: styles.bottomBar.height/2, justifyContent: "center"}}
Change labelStyle={{ color: theme.colors.onPrimary, fontFamily: "SpaceReg"}}>
</Button> Change
</View> </Button>
</Appbar.Header> </View>
</Appbar.Header>
<Portal>
<Dialog visible={menuVisible} onDismiss={() => setMenuVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer, maxHeight: 400 }}>
<Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Location</Dialog.Title>
<Location />
<Dialog.Actions style={{ justifyContent: "center" }}>
<Button onPress={() => setMenuVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>
Close
</Button>
</Dialog.Actions>
</Dialog>
</Portal>
</View>
</View> </View>
) )
} }

8
components/Broken.tsx
View File

@ -1,4 +1,4 @@
import {Dialog, useTheme} from "react-native-paper"; import {Dialog, Title, useTheme} from "react-native-paper";
import { Image } from "react-native"; import { Image } from "react-native";
import React from "react"; import React from "react";
@ -7,12 +7,12 @@ const theme = useTheme();
const Broken = () => { const Broken = () => {
return ( return (
<Dialog.Content> <Dialog.Content>
<Dialog.Title style={{color: theme.colors.onBackground, fontSize: 16, textAlign: 'center', fontFamily: "Light"}}>The Internet is a Series of Tubes</Dialog.Title> <Title style={{color: theme.colors.onBackground, fontSize: 16, textAlign: 'center', fontFamily: "Light"}}>The Internet is a Series of Tubes</Title>
<Image <Image
source={require("../assets/images/broken.png")} source={require("../assets/images/broken.png")}
style={{ alignSelf: 'center', width: "90%" }} style={{ alignSelf: 'center', resizeMode: "contain", height: 400/3 }}
/> />
<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> <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.)</Title>
</Dialog.Content> </Dialog.Content>
); );
}; };

19
components/Location.tsx
View File

@ -1,22 +1,9 @@
import { Dialog, Portal } from "react-native-paper"; import React from "react";
import React, {useEffect} from "react";
import Broken from "@/components/Broken"; import Broken from "@/components/Broken";
interface LocationProps { const Location = () => {
visible: boolean;
}
const Location: React.FC<LocationProps> = ({ visible }) => {
useEffect(() => {
if (visible) {
}
}, [visible]);
return ( return (
<Portal> <Broken />
<Dialog visible={visible} >
<Broken />
</Dialog>
</Portal>
) )
} }

2
components/TopNav.tsx
View File

@ -59,7 +59,7 @@ const TopNav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
</Dialog.Actions> </Dialog.Actions>
</Dialog> </Dialog>
<Dialog visible={bugVisible} onDismiss={() => setBugVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}> <Dialog visible={bugVisible} onDismiss={() => setBugVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}>
<Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Privacy Policy</Dialog.Title> <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Report A Bug</Dialog.Title>
<Broken /> <Broken />
<Dialog.Actions style={{ justifyContent: "center" }}> <Dialog.Actions style={{ justifyContent: "center" }}>
<Button onPress={() => setBugVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}> <Button onPress={() => setBugVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>