Alessandro carnelli

App.js

@@ -1,13 +1,15 @@
-import { StatusBar } from 'expo-status-bar'
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import React from 'react';
+import { StatusBar } from 'expo-status-bar';
+
 import Providers from './context/Providers'
 import Screens from './screens/Screens'
 
 export default function App() {
+
   return (
     <Providers>
       <Screens />
+      <StatusBar style="light" backgroundColor="black" />
     </Providers>
   )
 }

components/Alert.js

@@ -0,0 +1,90 @@
+import React, { useRef, useEffect } from 'react'
+import { Animated, StyleSheet, View, Text } from 'react-native'
+import Button from './Button'
+import colors from '../config/colors'
+import spaces from '../config/spaces'
+
+
+export default function Alert({ open, onClose, message = null, typology }) {
+
+  // const animation = useRef(new Animated.Value(0)).current
+
+  // useEffect(() => {
+  //   Animated.timing(animation, {
+  //     toValue: open ? 1 : 0,
+  //     duration: 500,
+  //     useNativeDriver: true
+  //   }).start()
+  // }, [open])
+
+  let typologyContainerStyle = typology === "danger" ? styles.containerDanger : styles.containerSuccess
+
+  return (
+    // <Animated.View style={[styles.container, {
+    //   transform: [{
+    //     scale: animation.interpolate({
+    //       inputRange: [0, 1], 
+    //       outputRange: [0, 1] 
+    //     })
+    //   }],
+    // }]}>
+    <>
+      <View style={[styles.containerInternal, typologyContainerStyle]}>
+        {
+          message && <Text style={styles.message}>{message}</Text>
+        }
+
+
+            onClose&& ( 
+            <Button 
+                style={styles.button} 
+                color={colors.black} 
+                onPress={onClose} 
+                name={"CHIUDI"}>                
+            </Button>
+        )
+
+      </View>
+      </>
+    // </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: spaces.containerSpace,
+    width: '100%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    zIndex: 1,
+    paddingHorizontal: spaces.containerSpace,
+    paddingTop: 10
+  },
+  containerInternal: {
+    backgroundColor: 'red',
+    padding: 15,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderRadius: 15,
+    width: '100%'
+  },
+  containerSuccess: {
+    backgroundColor: 'green'
+  },
+  containerDanger: {
+    backgroundColor: 'red'
+  },
+  message: {
+    color: 'red',
+    fontWeight: 'bold',
+    fontSize: 16,
+    paddingRight: 15,
+    flexBasis: '70%'
+  },
+  button: {
+    flexBasis: '30%'
+  }
+})

components/Button.js

@@ -1,5 +1,27 @@
-import React from "react";
+import React from 'react'
+import { TouchableOpacity, Text } from 'react-native'
 
-export default function Button(){
-    return <></>
+export default function Button(props) {
+    const textStyle = {
+        fontWeight: 'bold',
+        textAlign: 'center',
+        color: 'white',
+    }
+    const btnStyle = {
+        width: '50%',
+        borderColor: 'orange',
+        backgroundColor: 'orange',
+        borderWidth: 3,
+        borderRadius: 50,
+        padding: 10,
+        marginVertical: 20,
+
+    }
+    return (
+        <TouchableOpacity style={btnStyle} onPress={props.submit} disabled={props.disabled}>
+            <Text style={textStyle}>
+                {props.name}
+            </Text>
+        </TouchableOpacity>
+    )
 }

components/CardItem.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Text, View, StyleSheet, TouchableOpacity, Image, Dimensions, } from 'react-native';
+import { EvilIcons } from '@expo/vector-icons';
+// import { rootNavigation } from '../utility/navigation.js'
+
+const CardItem = ({ data }) => {
+    const { game, name } = data;
+    return (
+
+
+
+        <View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', backgroundColor: 'white', marginBottom: 10, borderRadius: 10, overflow: 'hidden' }} >
+            <View style={{ flexDirection: 'row' }} >
+                <View style={styles.img}>
+                    <Image
+                        style={styles.logoGame}
+                        source={(game === "minecraft")
+                            ? require('../assets/logo_minecraft.png')
+                            : (game === "pokemon")
+                                ? require('../assets/logo_pokemon.png')
+                                : (game === "supermario")
+                                    ? require('../assets/logo_supermario.jpeg')
+                                    : require('../assets/Guybrush_Threepwood.png')} />
+                </View>
+                <View style={styles.text}>
+                    <Text>
+                        Name: {name}
+                    </Text>
+                    <Text>
+                        Game: {game}
+                    </Text>
+                </View>
+            </View>
+
+
+            <View style={styles.btnContainer}>
+                <EvilIcons name="arrow-right" size={40} color="black" />
+            </View>
+        </View >
+    )
+};
+
+export default CardItem;
+
+const styles = StyleSheet.create({
+    card: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginVertical: 5,
+        borderRadius: 2,
+        backgroundColor: 'white'
+        // borderWidth: 2,
+        // borderColor: 'blue',
+    },
+    img: {
+        width: 100,
+        height: 100,
+        borderColor: 'black',
+        borderWidth: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    text: {
+        height: 100,
+        padding: 10,
+        // borderWidth: 1,
+        // borderColor: 'red',
+        justifyContent: 'center',
+        paddingLeft: 20,
+    },
+    btnContainer: {
+
+        height: 100,
+        // borderWidth: 1,
+        // borderColor: 'red',
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingRight: 20,
+
+    },
+    logoGame: {
+        width: '80%',
+        height: '80%',
+        justifyContent: 'center',
+        alignItems: 'center',
+    }
+})
+
+/*
+<Image
+                    style={{
+                        width: 95,
+                        height: 95,
+                        justifyContent: 'center',
+                        alignItems: 'center'}}
+                    source={{
+
+                    }}/>
+*/