lint

.prettierrc.json

+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": true
+}
\ No newline at end of file

.vscode/settings.json

 {
     "search.exclude": {
         "**/node_modules": false
-    }
+    },
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
 }
\ No newline at end of file

screens/Home.tsx

 import React, { useState } from "react";
 import { View, ImageBackground } from "react-native";
-import CardStack, { Card } from "react-native-card-stack-swiper";
 import { City, Filters, CardItem } from "../components";
 import styles from "../assets/styles";
 import DEMO from "../assets/data/demo";
 
 const Home = () => {
-  const [swiper, setSwiper] = useState<CardStack | null>(null);
-
   return (
-    <ImageBackground
-      source={require("../assets/images/bg.png")}
-      style={styles.bg}
-    >
+    <ImageBackground source={require("../assets/images/bg.png")} style={styles.bg}>
       <View style={styles.containerHome}>
         <View style={styles.top}>
           <City />
           <Filters />
         </View>
-
-        <CardStack
-          loop
-          verticalSwipe={false}
-          renderNoMoreCards={() => null}
-          ref={(newSwiper): void => setSwiper(newSwiper)}
-        >
-          {DEMO.map((item) => (
-            <Card key={item.id}>
-              <CardItem
-                hasActions
-                image={item.image}
-                name={item.name}
-                description={item.description}
-                matches={item.match}
-              />
-            </Card>
-          ))}
-        </CardStack>
       </View>
     </ImageBackground>
   );

screens/Login.tsx

@@ -5,7 +5,6 @@ import { auth } from "../config/firebase";
 const backImage = require("../assets/backImage.png");
 
 export default function Login({ navigation }) {
-
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
@@ -16,42 +15,42 @@ export default function Login({ navigation }) {
         .catch((err) => Alert.alert("Login error", err.message));
     }
   };
-  
+
   return (
     <View style={styles.container}>
       <Image source={backImage} style={styles.backImage} />
       <View style={styles.whiteSheet} />
       <SafeAreaView style={styles.form}>
         <Text style={styles.title}>Log In</Text>
-         <TextInput
-        style={styles.input}
-        placeholder="Enter email"
-        autoCapitalize="none"
-        keyboardType="email-address"
-        textContentType="emailAddress"
-        autoFocus={true}
-        value={email}
-        onChangeText={(text) => setEmail(text)}
-      />
-      <TextInput
-        style={styles.input}
-        placeholder="Enter password"
-        autoCapitalize="none"
-        autoCorrect={false}
-        secureTextEntry={true}
-        textContentType="password"
-        value={password}
-        onChangeText={(text) => setPassword(text)}
-      />
-      <TouchableOpacity style={styles.button} onPress={onHandleLogin}>
-        <Text style={{fontWeight: 'bold', color: '#fff', fontSize: 18}}> Log In</Text>
-      </TouchableOpacity>
-      <View style={{marginTop: 20, flexDirection: 'row', alignItems: 'center', alignSelf: 'center'}}>
-        <Text style={{color: 'gray', fontWeight: '600', fontSize: 14}}>Don't have an account? </Text>
-        <TouchableOpacity onPress={() => navigation.navigate("Signup")}>
-          <Text style={{color: '#f57c00', fontWeight: '600', fontSize: 14}}> Sign Up</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Enter email"
+          autoCapitalize="none"
+          keyboardType="email-address"
+          textContentType="emailAddress"
+          autoFocus={true}
+          value={email}
+          onChangeText={(text) => setEmail(text)}
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Enter password"
+          autoCapitalize="none"
+          autoCorrect={false}
+          secureTextEntry={true}
+          textContentType="password"
+          value={password}
+          onChangeText={(text) => setPassword(text)}
+        />
+        <TouchableOpacity style={styles.button} onPress={onHandleLogin}>
+          <Text style={{ fontWeight: "bold", color: "#fff", fontSize: 18 }}> Log In</Text>
         </TouchableOpacity>
-      </View>
+        <View style={{ marginTop: 20, flexDirection: "row", alignItems: "center", alignSelf: "center" }}>
+          <Text style={{ color: "gray", fontWeight: "600", fontSize: 14 }}>Don't have an account? </Text>
+          <TouchableOpacity onPress={() => navigation.navigate("Signup")}>
+            <Text style={{ color: "#f57c00", fontWeight: "600", fontSize: 14 }}> Sign Up</Text>
+          </TouchableOpacity>
+        </View>
       </SafeAreaView>
       <StatusBar barStyle="light-content" />
     </View>
@@ -60,14 +59,14 @@ export default function Login({ navigation }) {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
+    backgroundColor: "#fff"
   },
   title: {
     fontSize: 36,
-    fontWeight: 'bold',
+    fontWeight: "bold",
     color: "orange",
     alignSelf: "center",
-    paddingBottom: 24,
+    paddingBottom: 24
   },
   input: {
     backgroundColor: "#F6F7FB",
@@ -75,34 +74,34 @@ const styles = StyleSheet.create({
     marginBottom: 20,
     fontSize: 16,
     borderRadius: 10,
-    padding: 12,
+    padding: 12
   },
   backImage: {
     width: "100%",
     height: 340,
     position: "absolute",
     top: 0,
-    resizeMode: 'cover',
+    resizeMode: "cover"
   },
   whiteSheet: {
-    width: '100%',
-    height: '75%',
+    width: "100%",
+    height: "75%",
     position: "absolute",
     bottom: 0,
-    backgroundColor: '#fff',
-    borderTopLeftRadius: 60,
+    backgroundColor: "#fff",
+    borderTopLeftRadius: 60
   },
   form: {
     flex: 1,
-    justifyContent: 'center',
-    marginHorizontal: 30,
+    justifyContent: "center",
+    marginHorizontal: 30
   },
   button: {
-    backgroundColor: '#f57c00',
+    backgroundColor: "#f57c00",
     height: 58,
     borderRadius: 10,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: 40,
-  },
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 40
+  }
 });

screens/Matches.tsx

-import React from "react";
+import React from 'react'
 import {
   ScrollView,
   View,
@@ -6,14 +6,14 @@ import {
   TouchableOpacity,
   ImageBackground,
   FlatList,
-} from "react-native";
-import { CardItem, Icon } from "../components";
-import DEMO from "../assets/data/demo";
-import styles, { DARK_GRAY } from "../assets/styles";
+} from 'react-native'
+import { CardItem, Icon } from '../components'
+import DEMO from '../assets/data/demo'
+import styles, { DARK_GRAY } from '../assets/styles'
 
 const Matches = () => (
   <ImageBackground
-    source={require("../assets/images/bg.png")}
+    source={require('../assets/images/bg.png')}
     style={styles.bg}
   >
     <View style={styles.containerMatches}>
@@ -41,6 +41,6 @@ const Matches = () => (
       />
     </View>
   </ImageBackground>
-);
+)
 
-export default Matches;
+export default Matches

screens/Messages.tsx

-import React from "react";
+import React from 'react'
 import {
   ScrollView,
   Text,
@@ -6,14 +6,14 @@ import {
   ImageBackground,
   View,
   FlatList,
-} from "react-native";
-import { Icon, Message } from "../components";
-import DEMO from "../assets/data/demo";
-import styles, { DARK_GRAY } from "../assets/styles";
+} from 'react-native'
+import { Icon, Message } from '../components'
+import DEMO from '../assets/data/demo'
+import styles, { DARK_GRAY } from '../assets/styles'
 
 const Messages = () => (
   <ImageBackground
-    source={require("../assets/images/bg.png")}
+    source={require('../assets/images/bg.png')}
     style={styles.bg}
   >
     <View style={styles.containerMessages}>
@@ -39,6 +39,6 @@ const Messages = () => (
       />
     </View>
   </ImageBackground>
-);
+)
 
-export default Messages;
+export default Messages

screens/Profile.tsx

-import React from "react";
+import React from 'react'
 import {
   ScrollView,
   View,
   Text,
   ImageBackground,
   TouchableOpacity,
-} from "react-native";
-import { Icon, ProfileItem } from "../components";
-import DEMO from "../assets/data/demo";
-import styles, { WHITE } from "../assets/styles";
-import { auth } from '../config/firebase';
-import { signOut } from 'firebase/auth';
+} from 'react-native'
+import { Icon, ProfileItem } from '../components'
+import DEMO from '../assets/data/demo'
+import styles, { WHITE } from '../assets/styles'
+import { auth } from '../config/firebase'
+import { signOut } from 'firebase/auth'
 
 const Profile = ({}) => {
-  const {
-    age,
-    image,
-    info1,
-    info2,
-    info3,
-    info4,
-    location,
-    match,
-    name,
-  } = DEMO[7];
+  const { age, image, info1, info2, info3, info4, location, match, name } =
+    DEMO[7]
 
   return (
     <ImageBackground
-      source={require("../assets/images/bg.png")}
+      source={require('../assets/images/bg.png')}
       style={styles.bg}
     >
       <ScrollView style={styles.containerProfile}>
@@ -74,21 +65,21 @@ const Profile = ({}) => {
             <Text style={styles.textButton}>Start chatting</Text>
           </TouchableOpacity>
 
-          <TouchableOpacity style={styles.roundedButton}  onPress={onSignOut}> 
+          <TouchableOpacity style={styles.roundedButton} onPress={onSignOut}>
             <Icon name="exit-outline" size={20} color={WHITE} />
             <Text style={styles.textButton}>Log Out</Text>
           </TouchableOpacity>
         </View>
       </ScrollView>
     </ImageBackground>
-  );
-};
- function onSignOut() {
+  )
+}
+function onSignOut() {
   try {
-        signOut(auth)
-          } catch (e) {
+    signOut(auth)
+  } catch (e) {
     console.log('Error')
-    }
-};
+  }
+}
 
-export default Profile;
+export default Profile

screens/Signup.tsx

-import React, { useState } from 'react';
-import { StyleSheet, Text, View, Button, TextInput, Image, SafeAreaView, TouchableOpacity, StatusBar, Alert } from "react-native";
-import { createUserWithEmailAndPassword } from 'firebase/auth';
-import { auth } from '../config/firebase';
-const backImage = require("../assets/backImage.png");
+import React, { useState } from 'react'
+import {
+  StyleSheet,
+  Text,
+  View,
+  Button,
+  TextInput,
+  Image,
+  SafeAreaView,
+  TouchableOpacity,
+  StatusBar,
+  Alert,
+} from 'react-native'
+import { createUserWithEmailAndPassword } from 'firebase/auth'
+import { auth } from '../config/firebase'
+const backImage = require('../assets/backImage.png')
 
 export default function Signup({ navigation }) {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
 
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-
-const onHandleSignup = () => {
+  const onHandleSignup = () => {
     if (email !== '' && password !== '') {
-  createUserWithEmailAndPassword(auth, email, password)
+      createUserWithEmailAndPassword(auth, email, password)
         .then(() => console.log('Signup success'))
-        .catch((err) => Alert.alert("Login error", err.message));
+        .catch((err) => Alert.alert('Login error', err.message))
     }
-  };
-  
+  }
+
   return (
     <View style={styles.container}>
       <Image source={backImage} style={styles.backImage} />
       <View style={styles.whiteSheet} />
       <SafeAreaView style={styles.form}>
         <Text style={styles.title}>Sign Up</Text>
-         <TextInput
-        style={styles.input}
-        placeholder="Enter email"
-        autoCapitalize="none"
-        keyboardType="email-address"
-        textContentType="emailAddress"
-        autoFocus={true}
-        value={email}
-        onChangeText={(text) => setEmail(text)}
-      />
-      <TextInput
-        style={styles.input}
-        placeholder="Enter password"
-        autoCapitalize="none"
-        autoCorrect={false}
-        secureTextEntry={true}
-        textContentType="password"
-        value={password}
-        onChangeText={(text) => setPassword(text)}
-      />
-      <TouchableOpacity style={styles.button} onPress={onHandleSignup}>
-        <Text style={{fontWeight: 'bold', color: '#fff', fontSize: 18}}> Sign Up</Text>
-      </TouchableOpacity>
-      <View style={{marginTop: 20, flexDirection: 'row', alignItems: 'center', alignSelf: 'center'}}>
-        <Text style={{color: 'gray', fontWeight: '600', fontSize: 14}}>Don't have an account? </Text>
-        <TouchableOpacity onPress={() => navigation.navigate("Login")}>
-          <Text style={{color: '#f57c00', fontWeight: '600', fontSize: 14}}> Log In</Text>
+        <TextInput
+          style={styles.input}
+          placeholder="Enter email"
+          autoCapitalize="none"
+          keyboardType="email-address"
+          textContentType="emailAddress"
+          autoFocus={true}
+          value={email}
+          onChangeText={(text) => setEmail(text)}
+        />
+        <TextInput
+          style={styles.input}
+          placeholder="Enter password"
+          autoCapitalize="none"
+          autoCorrect={false}
+          secureTextEntry={true}
+          textContentType="password"
+          value={password}
+          onChangeText={(text) => setPassword(text)}
+        />
+        <TouchableOpacity style={styles.button} onPress={onHandleSignup}>
+          <Text style={{ fontWeight: 'bold', color: '#fff', fontSize: 18 }}>
+            {' '}
+            Sign Up
+          </Text>
         </TouchableOpacity>
-      </View>
+        <View
+          style={{
+            marginTop: 20,
+            flexDirection: 'row',
+            alignItems: 'center',
+            alignSelf: 'center',
+          }}
+        >
+          <Text style={{ color: 'gray', fontWeight: '600', fontSize: 14 }}>
+            Don't have an account?{' '}
+          </Text>
+          <TouchableOpacity onPress={() => navigation.navigate('Login')}>
+            <Text style={{ color: '#f57c00', fontWeight: '600', fontSize: 14 }}>
+              {' '}
+              Log In
+            </Text>
+          </TouchableOpacity>
+        </View>
       </SafeAreaView>
       <StatusBar barStyle="light-content" />
     </View>
-  );
+  )
 }
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
+    backgroundColor: '#fff',
   },
   title: {
     fontSize: 36,
     fontWeight: 'bold',
-    color: "orange",
-    alignSelf: "center",
+    color: 'orange',
+    alignSelf: 'center',
     paddingBottom: 24,
   },
   input: {
-    backgroundColor: "#F6F7FB",
+    backgroundColor: '#F6F7FB',
     height: 58,
     marginBottom: 20,
     fontSize: 16,
@@ -78,16 +103,16 @@ const styles = StyleSheet.create({
     padding: 12,
   },
   backImage: {
-    width: "100%",
+    width: '100%',
     height: 340,
-    position: "absolute",
+    position: 'absolute',
     top: 0,
     resizeMode: 'cover',
   },
   whiteSheet: {
     width: '100%',
     height: '75%',
-    position: "absolute",
+    position: 'absolute',
     bottom: 0,
     backgroundColor: '#fff',
     borderTopLeftRadius: 60,
@@ -105,4 +130,4 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginTop: 40,
   },
-});
\ No newline at end of file
+})