RN Challenge - Joshua Wenata Sunarto

README.md

@@ -65,4 +65,7 @@ Your app should be able to complete these tasks:
 - Somehow make this boring app fun! show some crazy pokemon animation or something :P
 
 ## How to run the demo
-(REPLACE THIS WITH YOUR INSTRUCTIONS)
+1. Open the folder in your IDE (recommend using vscode), open the terminal
+2. Run "npm install" to install the default library
+3. Run "npm start" to start the application
+4. Type "a" to open on android app and "w" to open on website

configfirebase.tsx

@@ -0,0 +1,22 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getDatabase } from "firebase/database";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "AIzaSyA730L1nzgNZFv-N0-Z2x2VXaVXwqmn36k",
+  authDomain: "rn-challenge-dd223.firebaseapp.com",
+  databaseURL: "https://rn-challenge-dd223-default-rtdb.firebaseio.com",
+  projectId: "rn-challenge-dd223",
+  storageBucket: "rn-challenge-dd223.appspot.com",
+  messagingSenderId: "566970168809",
+  appId: "1:566970168809:web:e5b44aabfaf5b66c0a0778",
+  measurementId: "G-ME6YZ90JPS"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+export const db = getDatabase(app);

metro.config.js

@@ -0,0 +1,7 @@
+const { getDefaultConfig } = require("@expo/metro-config");
+
+const defaultConfig = getDefaultConfig(__dirname);
+
+defaultConfig.resolver.assetExts.push("cjs");
+
+module.exports = defaultConfig;

navigation/BottomTabNavigator.tsx

@@ -7,7 +7,10 @@ import Colors from '../constants/Colors';
 import useColorScheme from '../hooks/useColorScheme';
 import TabOneScreen from '../screens/TabOneScreen';
 import TabTwoScreen from '../screens/TabTwoScreen';
-import { BottomTabParamList, TabOneParamList, TabTwoParamList } from '../types';
+import { BottomTabParamList, TabOneParamList, TabThreeParamList, TabTwoParamList } from '../types';
+import { Image, Text } from 'react-native';
+import TabThreeScreen from '../screens/TabThreeScreen';
+import { useEffect, useState } from 'react';
 
 const BottomTab = createBottomTabNavigator<BottomTabParamList>();
 
@@ -22,16 +25,26 @@ export default function BottomTabNavigator() {
         name="TabOne"
         component={TabOneNavigator}
         options={{
-          tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
+          tabBarIcon: () => <IconOne/>,
+          title: 'today task',
         }}
       />
       <BottomTab.Screen
         name="TabTwo"
         component={TabTwoNavigator}
         options={{
-          tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
+          tabBarIcon: () => <IconTwo/>,
+          title: 'add task'
         }}
       />
+      <BottomTab.Screen
+        name="TabThree"
+        component={TabThreeNavigator}
+        options={{
+          tabBarIcon: () => <IconThree/>,
+          title: 'search task'
+        }}
+        />
     </BottomTab.Navigator>
   );
 }
@@ -52,7 +65,10 @@ function TabOneNavigator() {
       <TabOneStack.Screen
         name="TabOneScreen"
         component={TabOneScreen}
-        options={{ headerTitle: 'Tab One Title' }}
+        options={{ headerTitle: 'daylist' ,
+                   title: 'daylist',
+                   headerLeft: () => <ActionBarIcon/>,
+        }}
       />
     </TabOneStack.Navigator>
   );
@@ -66,8 +82,61 @@ function TabTwoNavigator() {
       <TabTwoStack.Screen
         name="TabTwoScreen"
         component={TabTwoScreen}
-        options={{ headerTitle: 'Tab Two Title' }}
+        options={{ headerTitle: 'daylist' ,
+                   title: 'daylist',
+                   headerLeft: () => <ActionBarIcon/>,
+        }}
       />
     </TabTwoStack.Navigator>
   );
 }
+
+const TabThreeStack = createStackNavigator<TabThreeParamList>();
+
+function TabThreeNavigator() {
+  return (
+    <TabThreeStack.Navigator>
+      <TabThreeStack.Screen
+        name="TabThreeScreen"
+        component={TabThreeScreen}
+        options={{ headerTitle: 'daylist' ,
+                   title: 'daylist',
+                   headerLeft: () => <ActionBarIcon/>,
+        }}
+      />
+    </TabThreeStack.Navigator>
+  );
+}
+
+function ActionBarIcon() {
+  return (
+    <Image
+    source={require('../assets/images/favicon.png')}
+    style={{ width: 40, height: 40, borderRadius: 40/2, marginLeft : 15 }} />
+  );
+}
+
+
+function IconOne() {
+  return (
+    <Image
+    source={require('../assets/images/icon1.png')}
+    style={{ width: 40, height: 40, borderRadius: 40/2 }} />
+  );
+}
+
+function IconTwo() {
+  return (
+    <Image
+    source={require('../assets/images/icon2.png')}
+    style={{ width: 40, height: 40, borderRadius: 40/2 }} />
+  );
+}
+
+function IconThree() {
+  return (
+    <Image
+    source={require('../assets/images/icon3.jpg')}
+    style={{ width: 40, height: 40, borderRadius: 40/2 }} />
+  );
+}

navigation/LinkingConfiguration.ts

@@ -8,12 +8,12 @@ export default {
         screens: {
           TabOne: {
             screens: {
-              TabOneScreen: 'one',
+              TabOneScreen: 'task',
             },
           },
           TabTwo: {
             screens: {
-              TabTwoScreen: 'two',
+              TabTwoScreen: 'add',
             },
           },
         },

navigation/index.tsx

@@ -2,6 +2,8 @@ import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/
 import { createStackNavigator } from '@react-navigation/stack';
 import * as React from 'react';
 import { ColorSchemeName } from 'react-native';
+import editDoneScreen from '../screens/editDoneScreen';
+import editScreen from '../screens/editScreen';
 
 import NotFoundScreen from '../screens/NotFoundScreen';
 import { RootStackParamList } from '../types';
@@ -28,6 +30,8 @@ function RootNavigator() {
   return (
     <Stack.Navigator screenOptions={{ headerShown: false }}>
       <Stack.Screen name="Root" component={BottomTabNavigator} />
+      <Stack.Screen name="editScreen" component={editScreen} />
+      <Stack.Screen name="editDoneScreen" component={editDoneScreen} />
       <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
     </Stack.Navigator>
   );