feat: new expense navigation
This commit is contained in:
parent
0c07dcc714
commit
9ec5755f96
10 changed files with 68 additions and 24 deletions
1
%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver
Normal file
1
%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
1212.2309.20012.0
|
||||||
|
|
@ -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}) => (
|
||||||
16
app/(tabs)/home/_layout.tsx
Normal file
16
app/(tabs)/home/_layout.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
10
app/(tabs)/home/addItem.tsx
Normal file
10
app/(tabs)/home/addItem.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -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
9
app/index.jsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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';
|
||||||
|
|
|
||||||
Reference in a new issue