[improve]

1. change onpress callback naming
before
onPressFABItem
after
onPressListItem

2.delete unnecessary import
before
React.ReactElement
after
deconstruct React and just import ReactElement

3. delete the comment

4. not to use index for the key of the list item

main/FloatingActionButtonWrapper/index.tsx

@@ -2,7 +2,7 @@ import {Animated, Easing, StyleProp, View, ViewStyle} from 'react-native';
 import {ButtonSize, IconButton} from '../IconButton';
 import {DoobooTheme, withTheme} from '../theme';
 import {Icon, IconName} from '../Icon';
-import React, {ReactElement, useEffect, useRef, useState} from 'react';
+import {ReactElement, useEffect, useRef, useState} from 'react';
 
 import styled from '@emotion/native';
 
@@ -21,26 +21,26 @@ export interface FABItem {
 }
 
 export interface FABProps<ITEM extends FABItem> {
-  FABList: ITEM[];
-  onPressFABItem: (item: ITEM | FABItem) => void;
-  renderMainFAB?: (isActive: boolean) => React.ReactElement;
-  renderFABListItem?: (item: ITEM, idx: number) => React.ReactElement;
+  ButtonList: ITEM[];
+  onPressListItem: (item: ITEM | FABItem) => void;
+  renderMainFAB?: (isActive: boolean, onPressFAB: () => void) => ReactElement;
+  renderFABListItem?: (item: ITEM, idx: number) => ReactElement;
   size: ButtonSize;
   style?: StyleProp<ViewStyle>;
 }
 
 function FloatingActionButtons<ITEM extends FABItem = FABItem>({
   theme,
-  FABList,
-  onPressFABItem,
+  ButtonList: FABList,
+  onPressListItem: onPressFABItem,
   renderMainFAB,
   renderFABListItem,
   size = 'large',
   style,
 }: FABProps<ITEM> & {
   theme: DoobooTheme;
 }): ReactElement {
-  const [isActive, setFabActive] = useState(false);
+  const [isActive, setIsActive] = useState(false);
   const fadeAnim = useRef(new Animated.Value(0));
 
   useEffect(() => {
@@ -56,8 +56,8 @@ function FloatingActionButtons<ITEM extends FABItem = FABItem>({
     Animated.timing(fadeAnim.current, {
       toValue: 1,
       duration: 200,
-      easing: Easing.linear, // Easing is an additional import from react-native
-      useNativeDriver: true, // To make use of native driver for performance
+      easing: Easing.linear,
+      useNativeDriver: true,
     }).start();
   }, [fadeAnim]);
 
@@ -82,7 +82,7 @@ function FloatingActionButtons<ITEM extends FABItem = FABItem>({
         }}>
         {FABList.map((item, idx) => {
           return (
-            <FABItemWrapperView key={item.icon + idx}>
+            <FABItemWrapperView key={item.id}>
               {renderFABListItem ? (
                 renderFABListItem(item, idx)
               ) : (
@@ -98,17 +98,17 @@ function FloatingActionButtons<ITEM extends FABItem = FABItem>({
         })}
       </Animated.View>
       <FABItemWrapperView>
-        <Animated.View
-          testID={'main_fab_animation_wrapper'}
-          style={{transform: [{rotate: spin}]}}>
+        <Animated.View style={{transform: [{rotate: spin}]}}>
           {renderMainFAB ? (
-            renderMainFAB(isActive)
+            renderMainFAB(isActive, () =>
+              setIsActive((prevState) => !prevState),
+            )
           ) : (
             <IconButton
               testID={'main_fab'}
               size={size}
               icon={<StyledIcon size={24} name="add-light" />}
-              onPress={() => setFabActive((prevState) => !prevState)}
+              onPress={() => setIsActive((prevState) => !prevState)}
             />
           )}
         </Animated.View>

main/__tests__/FAB.test.tsx

@@ -1,5 +1,5 @@
 import {FAB, FABItem, FABProps} from '../../main';
-import {fireEvent, render, waitFor} from '@testing-library/react-native';
+import {fireEvent, render} from '@testing-library/react-native';
 
 import {ReactElement} from 'react';
 import {createComponent} from '../../test/testUtils';
@@ -8,39 +8,25 @@ const Component = (props: FABProps<FABItem>): ReactElement =>
   createComponent(<FAB {...props} />);
 
 describe('[FAB]', () => {
-  it('should render without crashing', () => {
-    const testingLib = render(
-      Component({
-        FABList: [{icon: 'bell-solid', id: 'item1'}],
-        size: 'large',
-        onPressFABItem: () => {},
-      }),
-    );
-
-    const json = testingLib.toJSON();
-
-    expect(json).toBeTruthy();
-  });
-
   it('test mainFAB onPress callback', async () => {
     let count = 0;
     let item1: FABItem = {icon: 'bell-solid', id: 'item1'};
     let resItem: FABItem;
 
-    const testingLib = render(
+    const {getByTestId} = render(
       Component({
-        FABList: [item1],
+        ButtonList: [item1],
         size: 'large',
-        onPressFABItem: (item1) => {
+        onPressListItem: (item1) => {
           count += 1;
           resItem = item1;
         },
       }),
     );
 
-    expect(count).toEqual(0);
-    fireEvent.press(testingLib.getByTestId('item1'));
-    expect(count).toEqual(1);
-    expect(resItem.id).toEqual(item1.id);
+    expect(count).toBe(0);
+    fireEvent.press(getByTestId('item1'));
+    expect(count).toBe(1);
+    expect(resItem.id).toBe(item1.id);
   });
 });

stories/dooboo-ui/FloatingActionButton/FABStory.tsx

@@ -27,11 +27,11 @@ const FABContainer: FC = () => {
         <FAB
           size="medium"
           theme={theme}
-          FABList={[
+          ButtonList={[
             {id: 'search', icon: 'home-light'},
-            {id: 'search', icon: 'like-light'},
+            {id: 'like', icon: 'like-light'},
           ]}
-          onPressFABItem={(item) => {
+          onPressListItem={(item) => {
             console.log(item.id);
           }}
         />