RN-Challenge Muhammad Bintang Pananjung

App.tsx

@@ -1,10 +1,11 @@
-import { StatusBar } from 'expo-status-bar';
-import React from 'react';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { StatusBar } from "expo-status-bar";
+import React from "react";
+import { Text } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
-import useCachedResources from './hooks/useCachedResources';
-import useColorScheme from './hooks/useColorScheme';
-import Navigation from './navigation';
+import useCachedResources from "./hooks/useCachedResources";
+import useColorScheme from "./hooks/useColorScheme";
+import Navigation from "./navigation";
 
 export default function App() {
   const isLoadingComplete = useCachedResources();

README.md

@@ -1,29 +1,35 @@
 # RN-Challenge
+
 MoneyHub is a team of fun, fast, and friendly builders. Everyone from interns to the CEO have some level of technical skill. Everyone is judged based on their creation and outcome. Not their background. Not their appearances.
 
 We welcome all kinds of builders, creators, and designers. This challenge is specifically for developers. We don't care much about your resume. If you think you can build awesome products and learn fast. This challenge is for you.
 
 This is a set of open ended challenges for you to show us your skills. Clone this repo, build an awesome app, and open a PR. The whole team will review your creation.
 
 ## Instructions
+
 ### 1. Learn
+
 - Download the [MoneyHub App](http://onelink.to/x9xxwg). Try to understand how the features are implemented. If you join the team, you'll be the one making these features!
-- Feel free to learn from any resources. [React Native Website](https://reactnative.dev), [YouTube](https://www.youtube.com/results?search_query=react+native+tutorial), etc. 
+- Feel free to learn from any resources. [React Native Website](https://reactnative.dev), [YouTube](https://www.youtube.com/results?search_query=react+native+tutorial), etc.
 - We have a udemy account you can borrow (reach out to [email protected]). This one is really good. Please reach out!
 - Understand how GitHub works. It's a standard tool in the industry. [GitHub Tutorial](https://guides.github.com/activities/hello-world/)
 
 ### 2. Build
+
 - You have 1 week to complete the challenge. We can see the commits timeline
 - Implementation (code) and design (UI/UX) will be evaluated
 
 ### 3. Show
+
 - Impress us with your skills
 - Go beyond the requirements
 - Beat the competition
 - Join us
 - Win
 
 ### Submissions
+
 - Setup your dev environment by following this ([React Native Getting started Guide](https://reactnative.dev/docs/getting-started))
 - Clone the challenge repository
 - Create a dedicated branch
@@ -34,6 +40,7 @@ This is a set of open ended challenges for you to show us your skills. Clone thi
 - Notify us. Please send an email to [email protected] [[email protected]](mailto:[email protected])
 
 ### Suggestions
+
 - Make it easy for us to try your app. Add instructions on how to run your demo. There's a section below you can fill in
 - Don't be afraid if you're still a newbie. We will judge what you built adjusted with your experience. If you're just starting out, but can learn fast. We want you :)
 - Make something fun. We love to party too! :D
@@ -42,12 +49,15 @@ This is a set of open ended challenges for you to show us your skills. Clone thi
 - Be prepared to explain your decisions and your thought process in the next interview. We're curious about how you think! :)
 
 ## Challenge
+
 Joko is a very responsible and organized person. He writes down all his to-do items in a day. And clears all the things he needs to do before the day ends
 
 Create a React Native app where Joko can keep track of the things he need to do in his day
 
 ## Requirements
+
 Your app should be able to complete these tasks:
+
 - Add a new to-do item
 - Mark a to-do item as done
 - Delete a to-do item
@@ -56,6 +66,7 @@ Your app should be able to complete these tasks:
 - Filter between completed and incomplete items
 
 ### Bonus:
+
 - Enable search for the to-do items
 - Include animations
 - Persist data using Contexts and/or Async Storage
@@ -64,5 +75,18 @@ Your app should be able to complete these tasks:
 - Do some kind of sharing
 - Somehow make this boring app fun! show some crazy pokemon animation or something :P
 
+## Design
+
+This design is adapted from https://dribbble.com/shots/6646573-To-do-list.
+
+## Features
+
+- Each Todo contains Todo things, date, and also time.
+- Create, Update, and Delete Todos.
+- Filter by search, implemented, and date.
+
 ## How to run the demo
-(REPLACE THIS WITH YOUR INSTRUCTIONS)
+
+- Require node, jdk and android studio for emulator
+- Install dependecies by running command `npm i` or `yarn`
+- Start demo using `npx expo start` or `npm start`

app.json

@@ -8,24 +8,23 @@
     "scheme": "myapp",
     "userInterfaceStyle": "automatic",
     "splash": {
-      "image": "./assets/images/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "image": "./assets/images/todologo.png",
+
+      "backgroundColor": "#2572FE"
     },
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#FFFFFF"
-      }
+      },
+      "softwareKeyboardLayoutMode": "pan"
     },
     "web": {
       "favicon": "./assets/images/favicon.png"

babel.config.js

@@ -1,6 +1,7 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
+    plugins: ["react-native-reanimated/plugin"],
   };
 };

components/BottomDrawer.tsx

@@ -0,0 +1,236 @@
+import RNDateTimePicker from "@react-native-community/datetimepicker";
+import Icon from "react-native-vector-icons/Feather";
+import { Button, Divider, Input } from "@rneui/themed";
+import React, { forwardRef, useImperativeHandle, useState } from "react";
+import {
+  Dimensions,
+  StyleSheet,
+  Animated,
+  Easing,
+  Pressable,
+  Text,
+  View,
+} from "react-native";
+// import DatePicker from "react-native-date-picker";
+import { blueColor } from "../constants/Colors";
+import { useAsyncStorage } from "@react-native-async-storage/async-storage";
+
+type Props = {
+  open: boolean;
+  closeFunction: any;
+  createFunction: any;
+};
+
+const { height } = Dimensions.get("window");
+
+const BottomDrawer = forwardRef((props: Props, ref: any) => {
+  let drawerPosY = new Animated.Value(height);
+  const [dateInfo, setdateInfo] = useState({
+    value: new Date(),
+    mode: "date",
+    show: false,
+  } as any);
+  const [createData, setcreateData] = useState({
+    detail: "",
+    date: new Date(),
+    time: new Date(Date.now()),
+  });
+
+  function swipe(direction: "up" | "down", callback?: any) {
+    // console.log("as");
+
+    Animated.timing(drawerPosY, {
+      toValue: direction === "down" ? height : 0,
+      useNativeDriver: false,
+      easing: Easing.ease,
+      duration: 500,
+    }).start(() => {
+      if (callback) callback();
+    });
+  }
+  useImperativeHandle(ref, () => ({
+    swipe,
+  }));
+
+  return (
+    <Animated.View
+      style={{
+        ...styles.container,
+        transform: [{ translateY: drawerPosY }],
+      }}
+    >
+      <Input
+        inputStyle={styles.textInput}
+        inputContainerStyle={{ borderBottomColor: "transparent" }}
+        underlineColorAndroid="rgba(0,0,0,0)"
+        placeholder="What do you need to do"
+        placeholderTextColor="#8bb2ff"
+        onChangeText={val => {
+          const tempData = { ...createData };
+          tempData.detail = val;
+          setcreateData(tempData);
+        }}
+      />
+      <Divider color="white" />
+      <View style={{ padding: 20 }}>
+        <Text style={styles.datetimeHeader}>Date</Text>
+        <Pressable
+          onPress={() => {
+            // setdatePicker(true);
+            setdateInfo({ value: createData.date, mode: "date", show: true });
+          }}
+          style={styles.datetime}
+        >
+          <Icon name="calendar" size={20} color="white" />
+          <Text style={styles.datetimeInput}>
+            {createData.date.toLocaleDateString()}
+          </Text>
+        </Pressable>
+      </View>
+      <Divider color="white" />
+
+      <View style={{ padding: 20 }}>
+        <Text style={styles.datetimeHeader}>Time</Text>
+        <Pressable
+          onPress={() => {
+            // setdatePicker(true);
+            setdateInfo({ value: createData.time, mode: "time", show: true });
+          }}
+          style={styles.datetime}
+        >
+          <Icon name="clock" size={20} color="white" />
+          <Text style={styles.datetimeInput}>
+            {createData.time.toLocaleTimeString()}
+          </Text>
+        </Pressable>
+      </View>
+      <Divider color="white" />
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "flex-end",
+          paddingHorizontal: 20,
+          marginTop: 40,
+        }}
+      >
+        <Button
+          title={"Cancel"}
+          size={"md"}
+          type="clear"
+          titleStyle={{
+            color: "white",
+            fontFamily: "Poppins-SemiBold",
+            fontSize: 16,
+          }}
+          containerStyle={{ borderRadius: 15, marginRight: 10, minWidth: 90 }}
+          onPress={() => {
+            // setcreateData({
+            //   detail: "",
+            //   date: new Date(),
+            //   time: new Date(Date.now()),
+            // });
+            swipe("down");
+          }}
+        />
+        <Button
+          title={"Save"}
+          size={"md"}
+          type="solid"
+          titleStyle={{
+            color: "black",
+            fontFamily: "Poppins-SemiBold",
+            fontSize: 16,
+          }}
+          containerStyle={{ borderRadius: 15 }}
+          buttonStyle={{
+            borderRadius: 15,
+            backgroundColor: "white",
+            minWidth: 90,
+          }}
+          onPress={async () => {
+            // props.createFunction(createData).then(() => {
+            //   swipe("down");
+            // });
+            swipe("down", async () => {
+              await props.createFunction(createData);
+            });
+            // await props.createFunction(createData, swipe("down"));
+          }}
+        />
+      </View>
+      {dateInfo.show && (
+        <RNDateTimePicker
+          mode={dateInfo.mode}
+          value={dateInfo.value}
+          onChange={(e, val) => {
+            if (val) {
+              const tempData = { ...createData };
+              if (dateInfo.mode === "date") {
+                tempData.date = val;
+              } else {
+                tempData.time = val;
+              }
+              setdateInfo({ value: val, mode: dateInfo.mode, show: false });
+              setcreateData(tempData);
+            }
+          }}
+        />
+      )}
+
+      {/* <DatePicker date={new Date()} /> */}
+    </Animated.View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    bottom: 0,
+    borderTopRightRadius: 30,
+    borderTopLeftRadius: 30,
+    minHeight: height * 0.7,
+    backgroundColor: blueColor.normal,
+    left: 0,
+    right: 0,
+    elevation: 30,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: -10,
+    },
+    shadowOpacity: 0.13,
+    shadowRadius: 100.62,
+    paddingVertical: 50,
+  },
+  textInput: {
+    fontSize: 30,
+    color: "white",
+    fontFamily: "Poppins",
+    borderBottomWidth: 0,
+
+    textDecorationLine: "none",
+    textAlign: "center",
+    paddingHorizontal: 10,
+  },
+  datetime: {
+    borderBottomColor: "white",
+    borderBottomWidth: 1,
+    marginBottom: 15,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  datetimeHeader: {
+    color: "white",
+    fontSize: 20,
+    fontFamily: "Poppins-Medium",
+  },
+  datetimeInput: {
+    color: "white",
+    fontSize: 20,
+    fontFamily: "Poppins",
+    textAlign: "right",
+    marginLeft: "auto",
+  },
+});
+
+export default BottomDrawer;