Skip to content

Commit

Permalink
Notes Page Working
Browse files Browse the repository at this point in the history
  • Loading branch information
@rhit-norflwe
rhit-norflwe authored Dec 15, 2024
1 parent 744d4ef commit b916ebd
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 78 deletions.
161 changes: 83 additions & 78 deletions app/_layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,83 @@
import React from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from "@expo/vector-icons";
import App from './index';
import HealthTracker from './healthTracker';
import MealTracking from './mealTracker';
import Finance from './finance';
import CalendarEvents from './calendarEvents';
import { createStackNavigator, StackHeaderProps } from '@react-navigation/stack';
import { RootStackParamList } from '@/components/Types';
import AddCalendarEvents from './addCalendarEvents';
import AddHealthEvents from './addHealthEvents';
import AddMeals from './addMeals';
import AddFinanceEvents from './addFinanceEvents';


const Stack = createStackNavigator<RootStackParamList>();

const CustomTopBar = ({ navigation }: StackHeaderProps) => {
return (
<View style={styles.topBar}>
<TouchableOpacity onPress={() => navigation.navigate('index')}>
<Ionicons name="home-outline" size={28} color="black" />
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('healthTracker')}>
<Ionicons name="fitness-outline" size={28} color="black" />
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('mealTracker')}>
<Ionicons name="fast-food-outline" size={28} color="black" />
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('finance')}>
<Ionicons name="wallet-outline" size={28} color="black" />
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('calendarEvents')}>
<Ionicons name="calendar-outline" size={28} color="black" />
</TouchableOpacity>
</View>
);
};

export default function Layout() {
return (
<Stack.Navigator
screenOptions={{
header: (props) => <CustomTopBar {...props} />,
gestureEnabled: false,
cardStyle: { backgroundColor: 'white'}
}}
>
<Stack.Screen name="index" component={App} />
<Stack.Screen name="healthTracker" component={HealthTracker} />
<Stack.Screen name="mealTracker" component={MealTracking} />
<Stack.Screen name="finance" component={Finance} />
<Stack.Screen name="addFinanceEvents" component={AddFinanceEvents} />
<Stack.Screen name="calendarEvents" component={CalendarEvents} />
<Stack.Screen name="addCalendarEvents" component={AddCalendarEvents} />
<Stack.Screen name="addHealthEvents" component={AddHealthEvents} />
<Stack.Screen name="addMeals" component={AddMeals} />
</Stack.Navigator>
);
}

const styles = StyleSheet.create({
topBar: {
marginTop: 50,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
height: 60,
backgroundColor: '#f5f5f5',
paddingHorizontal: 10,
elevation: 4,
shadowColor: '#000',
shadowOpacity: 0.2,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 2,
},
});
import React from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from "@expo/vector-icons";
import App from './index';
import HealthTracker from './healthTracker';
import MealTracking from './mealTracker';
import Notes from './notes';
import Finance from './finance';
import CalendarEvents from './calendarEvents';
import { createStackNavigator, StackHeaderProps } from '@react-navigation/stack';
import { RootStackParamList } from '@/components/Types';
import AddCalendarEvents from './addCalendarEvents';
import AddHealthEvents from './addHealthEvents';
import AddMeals from './addMeals';
import AddFinanceEvents from './addFinanceEvents';


const Stack = createStackNavigator<RootStackParamList>();

const CustomTopBar = ({ navigation }: StackHeaderProps) => {
return (
<View style={styles.topBar}>
<TouchableOpacity onPress={() => navigation.navigate('index')}>
<Ionicons name="home-outline" size={28} color="black" />
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('healthTracker')}>
<Ionicons name="fitness-outline" size={28} color="black" />
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('mealTracker')}>
<Ionicons name="fast-food-outline" size={28} color="black" />
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('finance')}>
<Ionicons name="wallet-outline" size={28} color="black" />
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('calendarEvents')}>
<Ionicons name="calendar-outline" size={28} color="black" />
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('notes')}>
<Ionicons name="pencil-outline" size={28} color="black" />
</TouchableOpacity>
</View>
);
};

export default function Layout() {
return (
<Stack.Navigator
screenOptions={{
header: (props) => <CustomTopBar {...props} />,
gestureEnabled: false,
cardStyle: { backgroundColor: 'white'}
}}
>
<Stack.Screen name="index" component={App} />
<Stack.Screen name="healthTracker" component={HealthTracker} />
<Stack.Screen name="mealTracker" component={MealTracking} />
<Stack.Screen name="notes" component={Notes} />
<Stack.Screen name="finance" component={Finance} />
<Stack.Screen name="addFinanceEvents" component={AddFinanceEvents} />
<Stack.Screen name="calendarEvents" component={CalendarEvents} />
<Stack.Screen name="addCalendarEvents" component={AddCalendarEvents} />
<Stack.Screen name="addHealthEvents" component={AddHealthEvents} />
<Stack.Screen name="addMeals" component={AddMeals} />
</Stack.Navigator>
);
}

const styles = StyleSheet.create({
topBar: {
marginTop: 50,
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
height: 60,
backgroundColor: '#f5f5f5',
paddingHorizontal: 10,
elevation: 4,
shadowColor: '#000',
shadowOpacity: 0.2,
shadowOffset: { width: 0, height: 2 },
shadowRadius: 2,
},
});
16 changes: 16 additions & 0 deletions app/notes.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { styles } from './styles';

Check failure on line 1 in app/notes.tsx

View workflow job for this annotation

GitHub Actions / lint-ts 

'styles' is defined but never used

export default function Notes() {
return (
<div>

Check failure on line 5 in app/notes.tsx

View workflow job for this annotation

GitHub Actions / lint-ts 

'React' must be in scope when using JSX
<div style={{ textAlign: "center" }}>

Check failure on line 6 in app/notes.tsx

View workflow job for this annotation

GitHub Actions / lint-ts 

'React' must be in scope when using JSX
<h1>Notes</h1>

Check failure on line 7 in app/notes.tsx

View workflow job for this annotation

GitHub Actions / lint-ts 

'React' must be in scope when using JSX
<input type="text" style={{ height: "450px", width: "1500px" }} ></input>

Check failure on line 8 in app/notes.tsx

View workflow job for this annotation

GitHub Actions / lint-ts 

'React' must be in scope when using JSX
</div>
<br />

Check failure on line 10 in app/notes.tsx

View workflow job for this annotation

GitHub Actions / lint-ts 

'React' must be in scope when using JSX
<div style={{ textAlign: "right" }}>

Check failure on line 11 in app/notes.tsx

View workflow job for this annotation

GitHub Actions / lint-ts 

'React' must be in scope when using JSX
<input type="submit" style={{ flexDirection: "row", alignItems: "center", backgroundColor: "#65558f", borderRadius: 8, flex: 0.45, justifyContent: "center", fontSize: 18, fontWeight: "bold", color: "#eee", marginRight: 150, padding: "15px 300px"}} value="Save"></input>

Check failure on line 12 in app/notes.tsx

View workflow job for this annotation

GitHub Actions / lint-ts 

'React' must be in scope when using JSX
</div>
</div>
);
}

0 comments on commit b916ebd

Please sign in to comment.