component->memory folder added

frontend/src/component/memory/CategoryItem.js

+import React from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity,
+    ImageBackground,
+    TouchableNativeFeedback,
+    Platform
+} from 'react-native';
+
+const CategoryItem = (props) => {
+
+    return(
+        <View style={styles.gameItem}>
+            <TouchableOpacity onPress={props.onSelectGame}>
+                <View>
+                    <View style={{ ...styles.gameItemRow, ...styles.gameItemHeader }}>
+                        <ImageBackground
+                            style={styles.bgImage}
+                            source={{ uri: props.image }}
+                        >
+                            <View style={styles.titleContainer}>
+                                <Text style={styles.title} numberOfLines={1}>{props.title}</Text>
+                            </View>
+                        </ImageBackground>
+                    </View>
+                </View>
+                <View style={{ ...styles.gameItemRow, ...styles.gameItemDetails }}>
+                    <Text>Game {props.id}</Text>
+                    <Text>Click here to play the Game</Text>
+                </View>
+            </TouchableOpacity>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    gameItem : {
+        height: 200,
+        width: '100%',
+        backgroundColor: '#ccc',
+        marginVertical: 10,
+        borderRadius: 10,
+        overflow: 'hidden'
+    },
+    gameItemRow: {
+        flexDirection: 'row'
+    },
+    gameItemHeader: {
+        height: '90%'
+    },
+    gameItemDetails: {
+        height: '10%',
+        paddingHorizontal: 10,
+        justifyContent: 'space-between',
+        alignItems: 'center'
+    },
+    bgImage: {
+        height: '100%',
+        width: '100%',
+        justifyContent: 'flex-end'
+      },
+    title: {
+        color: 'white',
+        fontFamily: 'open-sans-bold',
+        fontSize: 18,
+        textAlign: 'center',
+      },
+      titleContainer: {
+        padding: 10,
+        backgroundColor: 'rgba(0,0,0,0.5)'
+      }
+});
+
+export default CategoryItem;
\ No newline at end of file

frontend/src/component/memory/Header.js

+import React from 'react';
+import {View, Text, StyleSheet, StatusBar, SafeAreaView} from 'react-native';
+import Colors from '../../constants/Colors';
+
+const Header = (props) => {
+    return (
+        <View style={StyleSheet.header}>
+            <Text style={styles.headerTitle}>Show Time</Text>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    header: {
+        width: '100%',
+        height: 90,
+        paddingTop: 36,
+        backgroundColor: Colors.primary,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    headerTitle: {
+        color: 'white',
+        fontSize: 18
+    }
+});
+
+export default Header;
+

frontend/src/component/memory/TimeTracker.js

+import React from 'react';
+import {Text, View} from 'react-native';
+
+const TimeTracker = () => {
+    const [time, setTime] = useState(0);
+    const [timerOn, setTimeOn] = useState(true);
+
+    useEffect(()=>{
+        let interval = null;
+    
+        if(timerOn){
+          interval = setInterval(()=>{
+            setTime(prevTime=> prevTime + 20)
+          },10)
+        }else{
+          clearInterval(interval);
+        }
+    
+        return () => clearInterval(interval);
+    
+      },[timerOn]);
+}
+
+export default TimeTracker;
\ No newline at end of file