Typescript & FC/Hook support

.gitignore

@@ -108,3 +108,9 @@ dist
 
 # macOS
 .DS_Store
+
+# default react testing apps
+my-react-app/
+
+# tsc results
+lib/

src/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "trailingComma": "all",
+  "singleQuote": true
+}

src/components/Event/Event.styles.js → src/components/Event/Event.styles.ts

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
   item: {
-    // alignItems: 'center',
+    /* alignItems: 'center', */
     position: 'absolute',
     paddingVertical: 2,
     paddingHorizontal: 2,

src/components/Event/Event.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+
+import styles from './Event.styles';
+
+import { RNTEvent } from '../data';
+
+interface EventProps {
+  event: RNTEvent;
+  onPress?: (e: RNTEvent) => any;
+  style: object;
+}
+
+const Event: React.FC<EventProps> = (props: EventProps) => {
+  const e = props.event;
+  const style = props.style;
+
+  return (
+    <TouchableOpacity
+      onPress={() => props.onPress && props.onPress(e)}
+      style={[styles.item, style, { backgroundColor: e.color }]}
+    >
+      <Text style={styles.title}>{e.title}</Text>
+      <Text style={styles.location}>{e.location}</Text>
+      {e.extraDescriptions &&
+        e.extraDescriptions.map((description, idx) => (
+          <Text key={idx} style={styles.description}>
+            {description}
+          </Text>
+        ))}
+    </TouchableOpacity>
+  );
+};
+
+export default Event;

src/components/Events/Events.styles.js → src/components/Events/Events.styles.ts

@@ -1,9 +1,9 @@
 import { StyleSheet } from 'react-native';
-
-const GREY_COLOR = '#E9EDF0';
-const ROW_HEIGHT = 60;
-export { ROW_HEIGHT };
-export const CONTENT_OFFSET = 0;
+import {
+  EVENTS_CONTENT_OFFSET as CONTENT_OFFSET,
+  EVENTS_GREY_HEX as GREY_HEX,
+  EVENTS_ROW_HEIGHT as ROW_HEIGHT,
+} from '../constant';
 
 const styles = StyleSheet.create({
   container: {
@@ -15,15 +15,15 @@ const styles = StyleSheet.create({
   },
   timeLabelLine: {
     height: 1,
-    backgroundColor: GREY_COLOR,
+    backgroundColor: GREY_HEX,
     position: 'absolute',
     right: 0,
     left: 0,
   },
   event: {
     flex: 1,
     overflow: 'hidden',
-    borderColor: GREY_COLOR,
+    borderColor: GREY_HEX,
     borderLeftWidth: 1,
   },
   events: {