Add floating Button

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;

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>
   );