up

App.js

@@ -58,7 +58,7 @@ export default function App() {
 						borderTopLeftRadius: 20,
 						borderTopRightRadius: 20,
 					},
-					tabBarIcon: ({ focused, color, size }) => {
+					tabBarIcon: ({ focused }) => {
             let iconName;
 
             if (route.name === 'Home') {
@@ -67,7 +67,9 @@ export default function App() {
                 : 'home-outline';
             } else if (route.name === 'Game') {
               iconName = focused ? 'game-controller' : 'game-controller-outline';
-            }
+            }else if (route.name === 'First') {
+							iconName = focused ? 'chatbox' : 'chatbox-outline';
+						}
 
             // You can return any component that you like here!
             return createButton({iconName});

components/card.js

@@ -18,6 +18,8 @@ export default function Card({ text, type, color = "#FB5607", size = 60 }) {
 	const height = size * 1.4
 	const fontSize = size / 5
 	const footerHeight = size / 3
+	const photoHeight= size * 1.4 * 2  / 3 
+	const photoWidth= size * 0.8 
 
 	let bColor
 
@@ -45,7 +47,10 @@ export default function Card({ text, type, color = "#FB5607", size = 60 }) {
 					minHeight: height,
 				},
 			]}>
-			<Image source={image[0]?.link} style={styles.img} />
+				<View style={[styles.imgContener, {height: (height*0.8)}]}>
+					<Image style={[styles.photo, {width: photoWidth, height: photoHeight}]} source={image[0]?.link} />
+				</View>
+			{/* <Image source={image[0]?.link} style={styles.img} /> */}
 			<View
 				style={[styles.cardFooter, { width: "100%", minHeight: footerHeight }]}>
 				<Text
@@ -63,8 +68,6 @@ export default function Card({ text, type, color = "#FB5607", size = 60 }) {
 
 const styles = StyleSheet.create({
 	card: {
-		width: 90,
-		height: 120,
 		marginRight: 10,
 		backgroundColor: "#EAF4F4",
 		borderRadius: 12,
@@ -98,9 +101,9 @@ const styles = StyleSheet.create({
 		width: "100%",
 		height: "100%",
 	},
-	img: {
-		width: "100%",
-		height: "100%",
-    resizeMode: 'contain'
-	},
+  imgContener: {
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
 })

screens/firstScreen.js

@@ -3,7 +3,6 @@ import react, {useState} from "react";
 import { AntDesign } from "@expo/vector-icons"
 
 import { StyleSheet, Text, View, Button, KeyboardAvoidingView, TextInput, TouchableOpacity } from 'react-native';
-// import { TouchableOpacity } from "react-native-gesture-handler";
 
 import useSpeech from '../hooks/useSpeech'
 
@@ -18,13 +17,16 @@ export default function FirstScreen({ navigation }) {
   return (
     <View style={styles.container}>
     <KeyboardAvoidingView style={styles.block}>
-      <Text>Wpisz coś Proszę</Text>
+      <View style={styles.header}>
+
+      <Text style={{fontSize: 24, color: '#6B9080', width: '100%'}}>Wpisz coś a ja to powiem</Text>
       <TextInput
         style={styles.input}
         placeholder='Wpisz coś'
         onChangeText={(val) => setText(val)}
-      />
-      <TouchableOpacity onPress={pressHandler}>
+        />
+        </View>
+      <TouchableOpacity style={styles.buttonContener} onPress={pressHandler}>
 				<View style={styles.headerButtonContent}>
 					<View style={styles.headerButton}>
 						<AntDesign
@@ -50,9 +52,12 @@ const styles = StyleSheet.create({
   },
 	block: {
     width: "80%",
-    height: "30%",
+    minHeight: "30%",
 		backgroundColor: "#A4C3B2",
-    padding: 20,
+    padding: 30,
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "center",
     borderRadius: 20,
 	},
 
@@ -83,12 +88,20 @@ const styles = StyleSheet.create({
 	},
   input: {
     minHeight: 36,
+    backgroundColor: "#EAF4F4",
     borderStyle: 'solid',
-    borderColor: '#A4C3B2',
+    borderColor: '#6B9080',
     borderRadius: 9,
     borderWidth: 2,
     padding: 5,
     paddingLeft: 15,
     marginBottom: 15,
   },
-})
+  buttonContener: {
+    alignItems: "center",
+    // position: "absolute",
+    width: "100%",
+    // bottom: 30,
+    justifyContent: "center",
+  },
+})