level buttons

frontend/src/component/memory/MainButton.js

+import React from 'react'
+import {StyleSheet, View, Text, TouchableOpacity} from 'react-native'
+import Colors from '../../constants/Colors'
+
+const MainButton = (props) => {
+    return(
+        <TouchableOpacity onPress={props.onPress}>
+            <View style={{...styles.button, ...props.styles}}>
+                <Text style={styles.buttonText}>{props.children}</Text>
+            </View>
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    button: {
+        backgroundColor: Colors.primary,
+        paddingVertical: 30,
+        paddingHorizontal: 30,
+        borderRadius: 25,
+        marginBottom: 20
+    },
+    buttonText: {
+        color: 'white',
+        fontSize: 30,
+        fontWeight: 'bold',
+        textAlign: 'center'
+    }
+});
+
+export default MainButton;
\ No newline at end of file

frontend/src/router/router.js

@@ -7,7 +7,7 @@ import Home from '../screen/Home';
 import Start from '../screen/Start';
 import Register from '../screen/auth/Register';
 import Login from '../screen/auth/Login';
-import Splash from '../screen/splash/Splash';
+import Splash from '../screen/splash/splash';
 import Color from '../screen/Color';
 import Blue from '../screen/activity/Blue';
 import Blue2 from '../screen/activity/Blue2';

frontend/src/screen/memory/GameLevel.js

 import { Center, Column, Row } from 'native-base';
 import React from 'react';
-import {Text, View, StyleSheet, Button} from 'react-native';
+import {Text, View, StyleSheet, Button, ScrollView, Image,ImageBackground, TouchableOpacity} from 'react-native';
+import MainButton from '../../component/memory/MainButton';
 
 const GameLevel = ({navigation}) => {
     return (
-        <View style={styles.screen} >
-            <View style={styles.levelWrapper}>
-                <View style={styles.levelContainer}>
-                    <Button style={styles.btn} title='Elementry' onPress={()=>{navigation.navigate('StartGameScreen')}} />
-                    <Button style={styles.btn} title='Medium' onPress={()=>{navigation.navigate('MediumLevelStart')}} />
-                    <Button style={styles.btn} title='Advance' onPress={()=>{navigation.navigate('AdvanceLevelStart')}} />
-                </View>
+        <ScrollView>
+            {/* <Image style={styles.image} source={{ uri: 'https://cdn.pixabay.com/photo/2014/09/21/21/31/flowers-455591_960_720.jpg' }} /> */}
+            <View style={{ marginBottom: 20 }}>
+                    <View style={styles.gameItemRow}>
+                        <ImageBackground source={{ uri: 'https://cdn.pixabay.com/photo/2014/09/21/21/31/flowers-455591_960_720.jpg' }}
+                            style={styles.image}>
+                            {/* <Text style={styles.title}>Play Memo</Text> */}
+                            <View style={styles.titleContainer}>
+                                <Text style={styles.title} numberOfLines={1}>Play Memo</Text>
+                            </View>
+                        </ImageBackground>
+                    </View>
             </View>
-        </View>
+            <View style={styles.screen} >
+                <MainButton styles={styles.elementryBtn} onPress={()=>{navigation.navigate('StartGameScreen')}}>
+                    Elementry 
+                </MainButton>
+                <MainButton styles={styles.mediumBtn} onPress={()=>{navigation.navigate('MediumLevelStart')}}>
+                    Medium
+                </MainButton>
+                <MainButton styles={styles.advanceBtn} onPress={()=>{navigation.navigate('AdvanceLevelStart')}}>
+                    Advance
+                </MainButton>
+            </View>
+        </ScrollView>
+        // <View style={styles.screen} >
+        //     <View style={styles.levelWrapper}>
+        //         <View style={styles.levelContainer}>
+        //             <Button style={styles.btn} title='Elementry' onPress={()=>{navigation.navigate('StartGameScreen')}} />
+        //             <Button style={styles.btn} title='Medium' onPress={()=>{navigation.navigate('MediumLevelStart')}} />
+        //             <Button style={styles.btn} title='Advance' onPress={()=>{navigation.navigate('AdvanceLevelStart')}} />
+        //         </View>
+        //     </View>
+        // </View>
     );
 }
 
@@ -34,10 +60,40 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         alignItems: 'center'
     },
-    btn: {
-        maxWidth: '100%',
-        height: 30
-    }
+    elementryBtn: {
+        backgroundColor: 'green'
+    },
+    mediumBtn: {
+        backgroundColor: 'blue'
+    },
+    advanceBtn: {
+        backgroundColor: 'red'
+    },
+    image: {
+        height: 250,
+        width: '100%',
+    },
+    title: {
+        color: 'white',
+        fontWeight: 'bold',
+        fontSize: 30,
+        textAlign: 'center',
+    },
+    titleContainer: {
+        position: 'absolute',
+        padding: 20,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        bottom: 0,
+        width: '100%'
+      },
+      bgImage: {
+        height: '100%',
+        width: '100%',
+        justifyContent: 'flex-end'
+      },
+      gameItemRow: {
+        flexDirection: 'row',
+    },
 });
 
 export default GameLevel;