From 2e3db6cd54be2d23ffcc8bc408989b28bcd1e286 Mon Sep 17 00:00:00 2001
From: Johannes Klein <johannes.t.klein@gmail.com>
Date: Sat, 7 Jun 2025 20:47:40 +0200
Subject: [PATCH] Migrate FloatingActionBar to TS (#2944)

* Rename file without changes

* Migrate to TS
---
 ...tingActionBar.js => FloatingActionBar.tsx} | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)
 rename src/components/SharedComponents/{FloatingActionBar.js => FloatingActionBar.tsx} (86%)

diff --git a/src/components/SharedComponents/FloatingActionBar.js b/src/components/SharedComponents/FloatingActionBar.tsx
similarity index 86%
rename from src/components/SharedComponents/FloatingActionBar.js
rename to src/components/SharedComponents/FloatingActionBar.tsx
index bd3b15b94..0aa8a791e 100644
--- a/src/components/SharedComponents/FloatingActionBar.js
+++ b/src/components/SharedComponents/FloatingActionBar.tsx
@@ -1,8 +1,7 @@
-// @flow
 import classNames from "classnames";
 import { View } from "components/styledComponents";
-import * as React from "react";
-import { useEffect, useMemo, useState } from "react";
+import type { PropsWithChildren } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Animated, Keyboard } from "react-native";
 import { getShadow } from "styles/global";
 
@@ -17,14 +16,13 @@ const TOP_ANIMATION_START = -100;
 
 const FOOTER_PADDING = 17;
 
-type Props = {
-  position: "topStart" | "topEnd" | "bottomStart" | "bottomEnd",
-  containerClass?: string,
-  endY?: number | null,
-  children: React.Node,
-  show: boolean,
-  footerHeight: number
-};
+interface Props extends PropsWithChildren {
+  position: "topStart" | "topEnd" | "bottomStart" | "bottomEnd";
+  containerClass?: string;
+  endY?: number | null;
+  show: boolean;
+  footerHeight: number;
+}
 
 // Ensure this component is placed outside of scroll views
 
@@ -35,7 +33,7 @@ const FloatingActionBar = ( {
   children,
   show,
   footerHeight: FOOTER_HEIGHT
-}: Props ): React.Node => {
+}: Props ) => {
   const bottomPosition = FOOTER_HEIGHT + FOOTER_PADDING;
   const [keyboardHeight, setKeyboardHeight] = useState( 0 );
   const [keyboardOpen, setKeyboardOpen] = useState( false );
@@ -90,7 +88,10 @@ const FloatingActionBar = ( {
     ? keyboardHeight
     : 0;
 
-  const positionStyle = {};
+  const positionStyle: {
+    bottom?: number;
+    right?: number;
+  } = {};
 
   if ( position.includes( "bottom" ) ) {
     positionStyle.bottom = ( endY ?? bottomPosition ) + effectiveKeyboardHeight;