feat: new expense navigation

This commit is contained in:
Jakob Stornig 2023-12-07 16:54:17 +01:00
parent 0c07dcc714
commit 9ec5755f96
10 changed files with 68 additions and 24 deletions

View file

@ -0,0 +1 @@
1212.2309.20012.0

View file

@ -2,7 +2,7 @@ import { Tabs } from "expo-router/tabs";
import {StyleSheet, View} from "react-native" import {StyleSheet, View} from "react-native"
import { FontAwesome } from "@expo/vector-icons"; import { FontAwesome } from "@expo/vector-icons";
import {useThemeColor} from "../hooks/hooks"; import {useThemeColor} from "../../hooks/hooks";
import React from "react"; import React from "react";
export default function Layout() { export default function Layout() {
@ -28,22 +28,22 @@ export default function Layout() {
} }
return ( return (
<Tabs sceneContainerStyle={styles.sceneContainer} initialRouteName={"index"} screenOptions={screenOptions}> <Tabs sceneContainerStyle={styles.sceneContainer} screenOptions={screenOptions}>
<Tabs.Screen name="budget" options={ <Tabs.Screen name="budget/index" options={
{ {
tabBarLabel: "Budget", tabBarLabel: "Budget",
tabBarIcon: ({size, color}) => ( tabBarIcon: ({size, color}) => (
<FontAwesome name="money" size={size} color={color}/>), <FontAwesome name="money" size={size} color={color}/>),
} }
}/> }/>
<Tabs.Screen name="index" options={ <Tabs.Screen name="home" options={
{ {
tabBarLabel: "Home", tabBarLabel: "Home",
tabBarIcon: ({size, color}) => ( tabBarIcon: ({size, color}) => (
<FontAwesome name="home" size={size} color={color}/>), <FontAwesome name="home" size={size} color={color}/>),
} }
}/> }/>
<Tabs.Screen name="stats" options={ <Tabs.Screen name="stats/index" options={
{ {
tabBarLabel: "Stats", tabBarLabel: "Stats",
tabBarIcon: ({size, color}) => ( tabBarIcon: ({size, color}) => (

View file

@ -0,0 +1,16 @@
import { Stack } from "expo-router";
import { View, Text } from 'react-native'
import React from 'react'
export default function _Layout() {
return (
<Stack>
<Stack.Screen name="index" options={{
title: "test",
headerShown: false,
}}/>
<Stack.Screen name="addItem"/>
</Stack>
)
}

View file

@ -0,0 +1,10 @@
import { View, Text } from 'react-native'
import React from 'react'
export default function addItem() {
return (
<View>
<Text>addItem</Text>
</View>
)
}

View file

@ -1,12 +1,14 @@
import { StyleSheet, View, Text, NativeSyntheticEvent, NativeScrollEvent } from 'react-native'; import { StyleSheet, View, Text, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
import { useThemeColor } from "../hooks/hooks"; import { useThemeColor } from "../../../hooks/hooks";
import { SafeAreaView } from 'react-native-safe-area-context' import { SafeAreaView } from 'react-native-safe-area-context'
import { ExpenseItem, Plus, Welcome, SearchBar } from '../components'; import { ExpenseItem, Plus, Welcome, SearchBar } from '../../../components';
import { FlatList, TextInput} from 'react-native-gesture-handler'; import { FlatList, TextInput} from 'react-native-gesture-handler';
import { useRef, useState } from 'react'; import { useRef, useState, useEffect } from 'react';
import React from 'react'; import React from 'react';
import { useRouter } from "expo-router"
export default function Page() { export default function Page() {
const router = useRouter()
const [plusShow, setPlusShow] = useState(true); const [plusShow, setPlusShow] = useState(true);
const prevOffset = useRef(0); const prevOffset = useRef(0);
@ -23,7 +25,7 @@ export default function Page() {
} }
}); });
const profile = require("../assets/images/profile.jpg") const profile = require("../../../assets/images/profile.jpg")
const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>)=>{ const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>)=>{
const currentOffset = event.nativeEvent.contentOffset.y >= 0 ? event.nativeEvent.contentOffset.y : 0 const currentOffset = event.nativeEvent.contentOffset.y >= 0 ? event.nativeEvent.contentOffset.y : 0
@ -50,9 +52,10 @@ export default function Page() {
return ( return (
<SafeAreaView style={{flex: 1}}> <View style={{flex: 1}}>
{plusShow && <Plus/>} {plusShow && <Plus onPress={()=>{
{/* <Welcome name="My User" image={profile} onPress={()=>console.log("hello")}></Welcome> */} router.push("/(tabs)/home/addItem")
}}/>}
<FlatList <FlatList
data={data} data={data}
@ -69,7 +72,7 @@ export default function Page() {
scrollEventThrottle={20} scrollEventThrottle={20}
> >
</FlatList> </FlatList>
</SafeAreaView> </View>
); );
} }

9
app/index.jsx Normal file
View file

@ -0,0 +1,9 @@
import { View, Text } from 'react-native'
import React from 'react'
import { Redirect } from 'expo-router'
export default function index() {
return (
<Redirect href={"(tabs)/home"}></Redirect>
)
}

View file

@ -1,13 +1,18 @@
import { View, Text, ViewProps, StyleSheet } from 'react-native' import { View, Text, ViewProps, StyleSheet, TouchableOpacity } from 'react-native'
import { AntDesign } from '@expo/vector-icons' import { AntDesign } from '@expo/vector-icons'
import React from 'react' import React from 'react'
const Plus = (props : ViewProps) => { type PlusProps = ViewProps & {onPress? : ()=> void | undefined}
const Plus = (props : PlusProps) => {
return ( return (
<View style={[style.plus, props.style]}>
<TouchableOpacity onPress={props.onPress} style={[style.plus, props.style]}>
{props.children} {props.children}
<AntDesign name='plus' color={"white"} size={20}></AntDesign> <AntDesign name='plus' color={"white"} size={20}></AntDesign>
</View> </TouchableOpacity>
) )
} }
const style = StyleSheet.create({ const style = StyleSheet.create({
@ -22,7 +27,8 @@ const style = StyleSheet.create({
height: 60, height: 60,
width: 60, width: 60,
alignItems: 'center', alignItems: 'center',
justifyContent: "center" justifyContent: "center",
flex:1
} }
}) })
export default Plus export default Plus

View file

@ -1,6 +1,5 @@
import { View, Text, ViewProps, StyleSheet, Button } from 'react-native' import { View, Text, ViewProps, StyleSheet, Button, TouchableOpacity, TextInput } from 'react-native'
import React from 'react' import React from 'react'
import { TextInput, TouchableOpacity } from 'react-native-gesture-handler'
import { AntDesign } from '@expo/vector-icons'; import { AntDesign } from '@expo/vector-icons';
import { useThemeColor } from '../../../hooks/hooks'; import { useThemeColor } from '../../../hooks/hooks';
import { SIZES } from '../../../constants/theme'; import { SIZES } from '../../../constants/theme';