REF: FloatButton to TS

components/FloatButtons.tsx

@@ -1,5 +1,4 @@
-import React, { useState, useRef, forwardRef } from 'react';
+import React, { useState, useRef, forwardRef, ReactNode } from 'react';
-import PropTypes from 'prop-types';
 import { View, Text, TouchableOpacity, StyleSheet, Dimensions, PixelRatio } from 'react-native';
 import { useTheme } from './themes';
 
@@ -29,18 +28,23 @@ const cStyles = StyleSheet.create({
   },
 });
 
-export const FContainer = forwardRef((props, ref) => {
+interface FContainerProps {
-  const [newWidth, setNewWidth] = useState();
+  children: ReactNode | ReactNode[];
+  inline?: boolean;
+}
+
+export const FContainer = forwardRef<View, FContainerProps>((props, ref) => {
+  const [newWidth, setNewWidth] = useState<number | undefined>(undefined);
   const layoutCalculated = useRef(false);
 
-  const onLayout = event => {
+  const onLayout = (event: { nativeEvent: { layout: { width: number } } }) => {
     if (layoutCalculated.current) return;
     const maxWidth = Dimensions.get('window').width - BORDER_RADIUS - 20;
     const { width } = event.nativeEvent.layout;
     const withPaddings = Math.ceil(width + PADDINGS * 2);
     const len = React.Children.toArray(props.children).filter(Boolean).length;
     let newW = withPaddings * len > maxWidth ? Math.floor(maxWidth / len) : withPaddings;
-    if (len === 1 && newW < 90) newW = 90; // to add Paddings for lonely small button, like Scan on main screen
+    if (len === 1 && newW < 90) newW = 90;
     setNewWidth(newW);
     layoutCalculated.current = true;
   };
@@ -54,24 +58,26 @@ export const FContainer = forwardRef((props, ref) => {
       {newWidth
         ? React.Children.toArray(props.children)
             .filter(Boolean)
-            .map((c, index, array) =>
+            .map((child, index, array) => {
-              React.cloneElement(c, {
+              if (typeof child === 'string') {
+                return (
+                  <View key={index} style={{ width: newWidth }}>
+                    <Text>{child}</Text>
+                  </View>
+                );
+              }
+              return React.cloneElement(child as React.ReactElement<any>, {
                 width: newWidth,
                 key: index,
                 first: index === 0,
                 last: index === array.length - 1,
-              }),
+              });
-            )
+            })
         : props.children}
     </View>
   );
 });
 
-FContainer.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
-  inline: PropTypes.bool,
-};
-
 const buttonFontSize =
   PixelRatio.roundToNearestPixel(Dimensions.get('window').width / 26) > 22
     ? 22
@@ -95,7 +101,16 @@ const bStyles = StyleSheet.create({
   },
 });
 
-export const FButton = ({ text, icon, width, first, last, ...props }) => {
+interface FButtonProps {
+  text: string;
+  icon: ReactNode; // Updated the type to ReactNode
+  width?: number;
+  first?: boolean;
+  last?: boolean;
+  disabled?: boolean;
+}
+
+export const FButton = ({ text, icon, width, first, last, ...props }: FButtonProps) => {
   const { colors } = useTheme();
   const bStylesHook = StyleSheet.create({
     root: {
@@ -108,7 +123,7 @@ export const FButton = ({ text, icon, width, first, last, ...props }) => {
       color: colors.formBorder,
     },
   });
-  const style = {};
+  const style: Record<string, any> = {};
 
   if (width) {
     const paddingLeft = first ? BORDER_RADIUS / 2 : PADDINGS;
@@ -127,12 +142,3 @@ export const FButton = ({ text, icon, width, first, last, ...props }) => {
     </TouchableOpacity>
   );
 };
-
-FButton.propTypes = {
-  text: PropTypes.string,
-  icon: PropTypes.element,
-  width: PropTypes.number,
-  first: PropTypes.bool,
-  last: PropTypes.bool,
-  disabled: PropTypes.bool,
-};