added code

code/01-starting-code/App.js

@@ -0,0 +1,92 @@
+import { StatusBar } from 'expo-status-bar';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Ionicons } from '@expo/vector-icons';
+
+import ManageExpense from './screens/ManageExpense';
+import RecentExpenses from './screens/RecentExpenses';
+import AllExpenses from './screens/AllExpenses';
+import { GlobalStyles } from './constants/styles';
+import IconButton from './components/UI/IconButton';
+import ExpensesContextProvider from './store/expenses-context';
+
+const Stack = createNativeStackNavigator();
+const BottomTabs = createBottomTabNavigator();
+
+function ExpensesOverview() {
+  return (
+    <BottomTabs.Navigator
+      screenOptions={({ navigation }) => ({
+        headerStyle: { backgroundColor: GlobalStyles.colors.primary500 },
+        headerTintColor: 'white',
+        tabBarStyle: { backgroundColor: GlobalStyles.colors.primary500 },
+        tabBarActiveTintColor: GlobalStyles.colors.accent500,
+        headerRight: ({ tintColor }) => (
+          <IconButton
+            icon="add"
+            size={24}
+            color={tintColor}
+            onPress={() => {
+              navigation.navigate('ManageExpense');
+            }}
+          />
+        ),
+      })}
+    >
+      <BottomTabs.Screen
+        name="RecentExpenses"
+        component={RecentExpenses}
+        options={{
+          title: 'Recent Expenses',
+          tabBarLabel: 'Recent',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="hourglass" size={size} color={color} />
+          ),
+        }}
+      />
+      <BottomTabs.Screen
+        name="AllExpenses"
+        component={AllExpenses}
+        options={{
+          title: 'All Expenses',
+          tabBarLabel: 'All Expenses',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="calendar" size={size} color={color} />
+          ),
+        }}
+      />
+    </BottomTabs.Navigator>
+  );
+}
+
+export default function App() {
+  return (
+    <>
+      <StatusBar style="light" />
+      <ExpensesContextProvider>
+        <NavigationContainer>
+          <Stack.Navigator
+            screenOptions={{
+              headerStyle: { backgroundColor: GlobalStyles.colors.primary500 },
+              headerTintColor: 'white',
+            }}
+          >
+            <Stack.Screen
+              name="ExpensesOverview"
+              component={ExpensesOverview}
+              options={{ headerShown: false }}
+            />
+            <Stack.Screen
+              name="ManageExpense"
+              component={ManageExpense}
+              options={{
+                presentation: 'modal',
+              }}
+            />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </ExpensesContextProvider>
+    </>
+  );
+}

code/01-starting-code/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "RNCourse",
+    "slug": "RNCourse",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

code/01-starting-code/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

code/01-starting-code/components/ExpensesOutput/ExpenseItem.js

@@ -0,0 +1,76 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { GlobalStyles } from '../../constants/styles';
+import { getFormattedDate } from '../../util/date';
+
+function ExpenseItem({ id, description, amount, date }) {
+  const navigation = useNavigation();
+
+  function expensePressHandler() {
+    navigation.navigate('ManageExpense', {
+      expenseId: id
+    });
+  }
+
+  return (
+    <Pressable
+      onPress={expensePressHandler}
+      style={({ pressed }) => pressed && styles.pressed}
+    >
+      <View style={styles.expenseItem}>
+        <View>
+          <Text style={[styles.textBase, styles.description]}>
+            {description}
+          </Text>
+          <Text style={styles.textBase}>{getFormattedDate(date)}</Text>
+        </View>
+        <View style={styles.amountContainer}>
+          <Text style={styles.amount}>{amount.toFixed(2)}</Text>
+        </View>
+      </View>
+    </Pressable>
+  );
+}
+
+export default ExpenseItem;
+
+const styles = StyleSheet.create({
+  pressed: {
+    opacity: 0.75,
+  },
+  expenseItem: {
+    padding: 12,
+    marginVertical: 8,
+    backgroundColor: GlobalStyles.colors.primary500,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    borderRadius: 6,
+    elevation: 3,
+    shadowColor: GlobalStyles.colors.gray500,
+    shadowRadius: 4,
+    shadowOffset: { width: 1, height: 1 },
+    shadowOpacity: 0.4,
+  },
+  textBase: {
+    color: GlobalStyles.colors.primary50,
+  },
+  description: {
+    fontSize: 16,
+    marginBottom: 4,
+    fontWeight: 'bold',
+  },
+  amountContainer: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    minWidth: 80,
+  },
+  amount: {
+    color: GlobalStyles.colors.primary500,
+    fontWeight: 'bold',
+  },
+});

code/01-starting-code/components/ExpensesOutput/ExpensesList.js

@@ -0,0 +1,19 @@
+import { FlatList } from 'react-native';
+
+import ExpenseItem from './ExpenseItem';
+
+function renderExpenseItem(itemData) {
+  return <ExpenseItem {...itemData.item} />;
+}
+
+function ExpensesList({ expenses }) {
+  return (
+    <FlatList
+      data={expenses}
+      renderItem={renderExpenseItem}
+      keyExtractor={(item) => item.id}
+    />
+  );
+}
+
+export default ExpensesList;

code/01-starting-code/components/ExpensesOutput/ExpensesOutput.js

@@ -0,0 +1,38 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { GlobalStyles } from '../../constants/styles';
+import ExpensesList from './ExpensesList';
+import ExpensesSummary from './ExpensesSummary';
+
+function ExpensesOutput({ expenses, expensesPeriod, fallbackText }) {
+  let content = <Text style={styles.infoText}>{fallbackText}</Text>;
+
+  if (expenses.length > 0) {
+    content = <ExpensesList expenses={expenses} />;
+  }
+
+  return (
+    <View style={styles.container}>
+      <ExpensesSummary expenses={expenses} periodName={expensesPeriod} />
+      {content}
+    </View>
+  );
+}
+
+export default ExpensesOutput;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 24,
+    paddingTop: 24,
+    paddingBottom: 0,
+    backgroundColor: GlobalStyles.colors.primary700,
+  },
+  infoText: {
+    color: 'white',
+    fontSize: 16,
+    textAlign: 'center',
+    marginTop: 32,
+  },
+});

code/01-starting-code/components/ExpensesOutput/ExpensesSummary.js

@@ -0,0 +1,38 @@
+import { View, Text, StyleSheet } from 'react-native';
+
+import { GlobalStyles } from '../../constants/styles';
+
+function ExpensesSummary({ expenses, periodName }) {
+  const expensesSum = expenses.reduce((sum, expense) => {
+    return sum + expense.amount;
+  }, 0);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.period}>{periodName}</Text>
+      <Text style={styles.sum}>${expensesSum.toFixed(2)}</Text>
+    </View>
+  );
+}
+
+export default ExpensesSummary;
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+    backgroundColor: GlobalStyles.colors.primary50,
+    borderRadius: 6,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  period: {
+    fontSize: 12,
+    color: GlobalStyles.colors.primary400,
+  },
+  sum: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: GlobalStyles.colors.primary500,
+  },
+});

code/01-starting-code/components/UI/Button.js

@@ -0,0 +1,44 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { GlobalStyles } from '../../constants/styles';
+
+function Button({ children, onPress, mode, style }) {
+  return (
+    <View style={style}>
+      <Pressable
+        onPress={onPress}
+        style={({ pressed }) => pressed && styles.pressed}
+      >
+        <View style={[styles.button, mode === 'flat' && styles.flat]}>
+          <Text style={[styles.buttonText, mode === 'flat' && styles.flatText]}>
+            {children}
+          </Text>
+        </View>
+      </Pressable>
+    </View>
+  );
+}
+
+export default Button;
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 4,
+    padding: 8,
+    backgroundColor: GlobalStyles.colors.primary500,
+  },
+  flat: {
+    backgroundColor: 'transparent',
+  },
+  buttonText: {
+    color: 'white',
+    textAlign: 'center',
+  },
+  flatText: {
+    color: GlobalStyles.colors.primary200,
+  },
+  pressed: {
+    opacity: 0.75,
+    backgroundColor: GlobalStyles.colors.primary100,
+    borderRadius: 4,
+  },
+});

code/01-starting-code/components/UI/IconButton.js

@@ -0,0 +1,29 @@
+import { Pressable, StyleSheet, View } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+function IconButton({ icon, size, color, onPress }) {
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => pressed && styles.pressed}
+    >
+      <View style={styles.buttonContainer}>
+        <Ionicons name={icon} size={size} color={color} />
+      </View>
+    </Pressable>
+  );
+}
+
+export default IconButton;
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    borderRadius: 24,
+    padding: 6,
+    marginHorizontal: 8,
+    marginVertical: 2
+  },
+  pressed: {
+    opacity: 0.75,
+  },
+});

code/01-starting-code/constants/styles.js

@@ -0,0 +1,16 @@
+export const GlobalStyles = {
+  colors: {
+    primary50: '#e4d9fd',
+    primary100: '#c6affc',
+    primary200: '#a281f0',
+    primary400: '#5721d4',
+    primary500: '#3e04c3',
+    primary700: '#2d0689',
+    primary800: '#200364',
+    accent500: '#f7bc0c',
+    error50: '#fcc4e4',
+    error500: '#9b095c',
+    gray500: '#39324a',
+    gray700: '#221c30',
+  },
+};