From faf4e53693d498e8a39e39c5a313482a62d3d48f Mon Sep 17 00:00:00 2001
From: Samuel Oberhofer <sa.oberhofer@mci4me.at>
Date: Fri, 9 Dec 2022 15:11:07 +0100
Subject: [PATCH] Add floating Button

---
 components/FloatingButton.js | 29 +++++++++++++++++++++++++++++
 screens/MainScreen.js        |  3 +++
 2 files changed, 32 insertions(+)
 create mode 100644 components/FloatingButton.js

diff --git a/components/FloatingButton.js b/components/FloatingButton.js
new file mode 100644
index 0000000..1b4e531
--- /dev/null
+++ b/components/FloatingButton.js
@@ -0,0 +1,29 @@
+import { Text, TouchableOpacity } from "react-native";
+import Icon from "react-native-vector-icons/Ionicons";
+
+function FloatingButton() {
+  return (
+    <TouchableOpacity
+      style={{
+        borderWidth: 1,
+        borderColor: "#B695F3",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 70,
+        position: "absolute",
+        top: 560,
+        right: 20,
+        height: 70,
+        backgroundColor: "#B695F3",
+        borderRadius: 100,
+      }}
+      onPress={() => {
+        alert("Button is pressed");
+      }}
+    >
+      <Icon name="add-circle-outline" color="white" size={40} />
+    </TouchableOpacity>
+  );
+}
+
+export default FloatingButton;
diff --git a/screens/MainScreen.js b/screens/MainScreen.js
index 6fc9bcc..8401ed2 100644
--- a/screens/MainScreen.js
+++ b/screens/MainScreen.js
@@ -1,10 +1,13 @@
 import { StatusBar } from "expo-status-bar";
 import { Text, View, StyleSheet } from "react-native";
 
+import FloatingButton from "../components/FloatingButton";
+
 function MainScreen() {
   return (
     <View style={styles.container}>
       <Text>Open up App.js to start working on your app!</Text>
+      <FloatingButton />
       <StatusBar style="auto" />
     </View>
   );