Tolu submission

App.tsx

@@ -1,20 +1,20 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, Text, View } from "react-native";
+import Stopwatch from "./src/StopWatch";
 
 export default function App() {
   return (
     <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
+      <Stopwatch />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
   },
 });

core/Header.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Appbar } from "react-native-paper";
+
+const titleStyles = {
+  color: {
+    color: "#fff",
+  },
+};
+
+const StopwatchHeading = () => {
+  return (
+    <Appbar.Header style={{ backgroundColor: "purple" }}>
+      <Appbar.Content
+        testID=""
+        title="STOPWATCH"
+        titleStyle={titleStyles.color}
+      />
+    </Appbar.Header>
+  );
+};
+
+export default StopwatchHeading;

core/Result.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { StyleSheet, Text, ScrollView, View } from "react-native";
+import { displayTime } from "./util";
+
+
+interface MyComponentProps {
+  results: number[];
+}
+
+const styles = StyleSheet.create({
+  resultItem: {
+    flexDirection : 'row',
+    justifyContent: 'space-between',
+    alignContent : 'center',
+    alignItems: "center",
+    borderBottomWidth : 1, 
+    borderColor :'#313131',
+    height: 50,
+    paddingHorizontal: 15
+  }, 
+});
+
+const Result: React.FC<MyComponentProps> = ({ results }) => {
+  return (
+    <ScrollView>
+      <View style={styles.resultItem} />
+      {results.map((item, index) => (
+        <View  key={index} style = {styles.resultItem}>
+            <Text style= {{ color : "#fff"}}>
+                Lap {results.length - index }
+            </Text>
+
+            <Text style= {{ color : "#fff"}}>
+                {displayTime(item)}
+            </Text>
+
+        </View>
+
+      ))}
+    </ScrollView>
+  );
+};
+
+export default React.memo(Result); 

core/util.tsx

@@ -0,0 +1,29 @@
+const  padToTwo = (number : number) => (number <= 9  ? `0${number}` : `${number}`) 
+
+export const displayTime = (centiseconds: number) => {
+
+    let minutes = 0
+    let seconds = 0 
+
+    if (centiseconds < 0 ){ 
+        centiseconds = 0 
+    }
+
+    if (centiseconds  < 100 ){
+        return  `00:00:${padToTwo(centiseconds)}` 
+    }
+
+    let  remainCentiseconds  = centiseconds % 100 
+    seconds = (centiseconds - remainCentiseconds ) / 100 
+
+    if(seconds < 60 ){
+        return  `00:${padToTwo(seconds)}: ${padToTwo(remainCentiseconds)}`  
+    }
+
+
+    let remainSeconds  = seconds % 60  
+    minutes = (seconds - remainSeconds ) / 60 
+
+    return `${padToTwo(minutes)}:${padToTwo(remainSeconds)}: ${padToTwo(remainCentiseconds)}`
+
+};