From 045a73d35b45988a53129f8748adda8d3f8acb4f Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 19 Dec 2024 15:52:26 +0200
Subject: [PATCH 1/9] Initial Commit

---
 demo/src/screens/PlaygroundScreen.tsx         |  61 +++++-
 src/components/actionSheet/index.tsx          |   1 +
 .../ActionSheet/actionSheet.api.json          |   0
 src/incubator/ActionSheet/index.tsx           | 188 ++++++++++++++++++
 src/incubator/ActionSheet/types.ts            | 111 +++++++++++
 src/incubator/index.ts                        |  22 +-
 6 files changed, 371 insertions(+), 12 deletions(-)
 create mode 100644 src/incubator/ActionSheet/actionSheet.api.json
 create mode 100644 src/incubator/ActionSheet/index.tsx
 create mode 100644 src/incubator/ActionSheet/types.ts

diff --git a/demo/src/screens/PlaygroundScreen.tsx b/demo/src/screens/PlaygroundScreen.tsx
index 0bda100e67..89d3953aa4 100644
--- a/demo/src/screens/PlaygroundScreen.tsx
+++ b/demo/src/screens/PlaygroundScreen.tsx
@@ -1,19 +1,60 @@
 import React, {Component} from 'react';
-import {View, Text, Card, TextField, Button} from 'react-native-ui-lib';
+import {View, Button, Incubator} from 'react-native-ui-lib';
 
 export default class PlaygroundScreen extends Component {
+  state = {
+    visible: false,
+    selectedOption: undefined
+  };
+
+  pickOption(index: string) {
+    console.log(`picked option ${index}`);
+  }
+
+  OPTIONS = [
+    {label: 'option 1', onPress: () => this.pickOption('option 1')},
+    {label: 'option 2', onPress: () => this.pickOption('option 2')},
+    {label: 'option 3', onPress: () => this.pickOption('option 3')},
+    {label: 'option 1', onPress: () => this.pickOption('option 1')},
+    {label: 'option 2', onPress: () => this.pickOption('option 2')},
+    {label: 'option 3', onPress: () => this.pickOption('option 3')},
+    {label: 'option 1', onPress: () => this.pickOption('option 1')},
+    {label: 'option 2', onPress: () => this.pickOption('option 2')},
+    {label: 'option 3', onPress: () => this.pickOption('option 3')},
+    {label: 'option 1', onPress: () => this.pickOption('option 1')},
+    {label: 'option 2', onPress: () => this.pickOption('option 2')},
+    {label: 'option 3', onPress: () => this.pickOption('option 3')},
+    {label: 'option 1', onPress: () => this.pickOption('option 1')},
+    {label: 'option 2', onPress: () => this.pickOption('option 2')},
+    {label: 'option 3', onPress: () => this.pickOption('option 3')},
+    {label: 'cancel', onPress: () => this.pickOption('cancel')}
+  ];
+
   render() {
     return (
       <View bg-grey80 flex padding-20>
-        <View marginT-20>
-          <TextField migrate placeholder="Placeholder"/>
-        </View>
-        <Card height={100} center padding-20>
-          <Text text50>Playground Screen</Text>
-        </Card>
-        <View flex center>
-          <Button marginV-20 label="Button"/>
-        </View>
+        <Button
+          label="Show Action Sheet"
+          onPress={() => {
+            console.log(`Button pressed`);
+            this.setState({visible: true});
+          }}
+        />
+
+        <Incubator.ActionSheet
+          visible={this.state.visible}
+          options={this.OPTIONS}
+          onDismiss={() => {
+            console.log(`props onDismiss called!`);
+            this.setState({visible: false});
+          }}
+          dialogProps={{
+            bottom: true,
+            centerH: true,
+            width: '90%',
+            headerProps: {title: 'Action Sheet', subtitle: 'sub'}
+          }}
+        />
       </View>
     );
   }
diff --git a/src/components/actionSheet/index.tsx b/src/components/actionSheet/index.tsx
index 155a132f90..f6516c1fce 100644
--- a/src/components/actionSheet/index.tsx
+++ b/src/components/actionSheet/index.tsx
@@ -36,6 +36,7 @@ type ActionSheetProps = {
   message?: string;
   /**
    * Index of the option represents the cancel action (to be displayed as the separated bottom bold button)
+   * Relevant for Native IOS ActionSheet only
    */
   cancelButtonIndex?: number;
   /**
diff --git a/src/incubator/ActionSheet/actionSheet.api.json b/src/incubator/ActionSheet/actionSheet.api.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/incubator/ActionSheet/index.tsx b/src/incubator/ActionSheet/index.tsx
new file mode 100644
index 0000000000..0022705950
--- /dev/null
+++ b/src/incubator/ActionSheet/index.tsx
@@ -0,0 +1,188 @@
+import _ from 'lodash';
+import React, {useState, useRef, useEffect, useCallback, useMemo} from 'react';
+import {View, Image, Text, ListItem, ButtonProps, ImageProps} from '../../index';
+import FadedScrollView from '../../components/fadedScrollView';
+import {Dialog} from '../../incubator';
+import {withScrollReached, withScrollEnabler} from '../../commons/new';
+import {Colors} from '../../style';
+import {
+  ActionSheetProps,
+  ActionSheetOptionProps,
+  ActionSheetGridItemProps,
+  ActionSheetDismissReason,
+  ScrollReachedProps
+} from './types';
+
+export {ActionSheetProps, ActionSheetOptionProps, ActionSheetGridItemProps, ActionSheetDismissReason};
+
+type SelectedOption = ActionSheetOptionProps | ActionSheetGridItemProps;
+type Selection = {
+  selectedOption: SelectedOption;
+  selectedIndex: number;
+};
+
+const ActionSheet = (props: ActionSheetProps) => {
+  const {visible: propsVisibility, onDismiss, dialogProps, footerCustomElement, testID, ...others} = props;
+
+  const [visible, setVisible] = useState<boolean | undefined>(undefined);
+  const selection = useRef<Selection | undefined>();
+
+  useEffect(() => {}, [visible, propsVisibility]);
+
+  useEffect(() => {
+    if (propsVisibility && visible === undefined) {
+      setVisible(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [propsVisibility]);
+
+  const invokeUserOnPress = useCallback(() => {
+    selection.current?.selectedOption.onPress?.(selection.current?.selectedOption, selection.current?.selectedIndex);
+  }, []);
+
+  const resetSelected = useCallback(() => {
+    selection.current = undefined;
+  }, []);
+
+  const onItemPress = useCallback(({customValue}: {customValue: Selection}) => {
+    selection.current = customValue;
+    if (selection.current?.selectedOption.avoidDismiss) {
+      // do not dismiss (but notify the user the option was pressed)
+      invokeUserOnPress();
+      resetSelected();
+      return;
+    }
+
+    setVisible(false);
+  },
+  [invokeUserOnPress, resetSelected, setVisible]);
+
+  const invokeAfterActionSelected = useCallback(() => {
+    invokeUserOnPress();
+    onDismiss?.(ActionSheet.dismissReason.ACTION);
+    resetSelected();
+    setVisible(undefined);
+  }, [invokeUserOnPress, onDismiss, resetSelected, setVisible]);
+
+  const _onDismiss = useCallback(() => {
+    if (!_.isUndefined(selection.current)) {
+      invokeAfterActionSelected();
+    } else {
+      onDismiss?.(ActionSheet.dismissReason.CANCELED);
+      resetSelected();
+      setVisible(undefined);
+    }
+  }, [invokeAfterActionSelected, onDismiss, resetSelected, setVisible]);
+
+  const _headerProps = useMemo(() => {
+    const {headerProps} = dialogProps || {};
+    return {
+      showKnob: true,
+      showDivider: true,
+      ...headerProps
+    };
+  }, [dialogProps]);
+
+  const _modalProps = useMemo(() => {
+    const {modalProps} = dialogProps || {};
+    return {accessibilityLabel: 'Close action menu', ...modalProps};
+  }, [dialogProps]);
+
+  const handleRenderIcon = (option: ButtonProps) => {
+    // @ts-ignore
+    let source = option.icon;
+    if (!source) {
+      source = _.isFunction(option.iconSource) ? option.iconSource() : (option.iconSource as ImageProps['source']);
+    }
+    return source && renderIcon(source);
+  };
+
+  const renderIcon = (iconSource: ImageProps['source']) => {
+    return <Image source={iconSource} resizeMode={'contain'} style={{width: 20, height: 20, marginRight: 16}}/>;
+  };
+
+  const renderActionItem = (selectedOption: ActionSheetOptionProps, selectedIndex: number) => {
+    return (
+      <ListItem
+        style={{backgroundColor: 'transparent'}}
+        height={48}
+        key={selectedIndex}
+        testID={selectedOption.testID}
+        onPress={() => onItemPress({customValue: {selectedOption, selectedIndex}})}
+        activeBackgroundColor={Colors.$backgroundNeutralLight}
+      >
+        <View row paddingL-16 flex centerV>
+          {handleRenderIcon(selectedOption)}
+          <Text text70 $textDefault numberOfLines={1} style={selectedOption.labelStyle}>
+            {selectedOption.label}
+          </Text>
+        </View>
+      </ListItem>
+    );
+  };
+
+  const renderActions = () => {
+    const {options, renderAction} = props;
+
+    return (
+      <View>
+        {_.map(options, (option, index) => {
+          return renderAction ? renderAction(option, index) : renderActionItem(option, index);
+        })}
+      </View>
+    );
+  };
+
+  const content = () => {
+    return (
+      <View>
+        {renderActions()}
+        {footerCustomElement}
+      </View>
+    );
+  };
+
+  return (
+    <Dialog
+      visible={visible && propsVisibility}
+      testID={testID}
+      {...dialogProps}
+      headerProps={_headerProps}
+      modalProps={_modalProps}
+      onDismiss={_onDismiss}
+      {...others}
+    >
+      <FadedScrollView
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="always"
+        {...props}
+        children={content()}
+      />
+    </Dialog>
+  );
+};
+
+// const styles = StyleSheet.create({
+//   listContentContainer: {
+//     paddingTop: Spacings.s3,
+//     paddingBottom: Spacings.s4
+//   },
+//   listContentContainerNoTitle: {
+//     paddingTop: 0,
+//     paddingBottom: Spacings.s4
+//   },
+//   gridContentContainer: {
+//     paddingTop: Spacings.s8,
+//     paddingBottom: Spacings.s1, // Spacings.s8 from guidelines - Spacings.s7 from gridItemContainerStyle (in GridOptions)
+//     alignSelf: 'center'
+//   },
+//   footerCheckbox: {
+//     marginVertical: Spacings.s5,
+//     marginLeft: Spacings.s5
+//   }
+// });
+
+ActionSheet.displayName = 'ActionSheet';
+ActionSheet.dismissReason = ActionSheetDismissReason;
+
+export default withScrollReached<ActionSheetProps>(withScrollEnabler<ScrollReachedProps>(ActionSheet));
diff --git a/src/incubator/ActionSheet/types.ts b/src/incubator/ActionSheet/types.ts
new file mode 100644
index 0000000000..8808bb6c99
--- /dev/null
+++ b/src/incubator/ActionSheet/types.ts
@@ -0,0 +1,111 @@
+import {StyleProp, ViewStyle} from 'react-native';
+import {DialogProps} from '../Dialog';
+import {ButtonProps} from '../../components/button';
+import {ImageProps} from '../../components/image';
+import {WithScrollReachedProps, WithScrollEnablerProps} from '../../commons/new';
+
+export enum ActionSheetDismissReason {
+  ACTION = 'action',
+  CANCELED = 'canceled'
+}
+
+export type ActionSheetOptionProps = ButtonProps & {
+  /**
+   * Is this option a section header
+   */
+  isSectionHeader?: boolean;
+  /**
+   * Send true to avoid dismissing the ActionSheet on press
+   */
+  avoidDismiss?: boolean;
+  /**
+   * Set a function to be executed on press
+   */
+  onPress?: (selectedOptionProps: ActionSheetOptionProps, selectedOptionIndex: number) => void;
+
+  key?: string | number;
+};
+
+export type ActionSheetGridItemProps = ButtonProps & {
+  /**
+   * Title for the GridItem
+   */
+  title?: string;
+  /**
+   * Icon's source for the GridItem
+   */
+  iconSource?: ImageProps['source'];
+  /**
+   * Action handler for the GridItem
+   */
+  onPress?: (selectedOptionProps: ActionSheetGridItemProps, selectedOptionIndex: number) => void;
+  /**
+   * Send true to avoid dismissing the ActionSheet on press
+   */
+  avoidDismiss?: boolean;
+  testID?: string;
+};
+
+export interface ActionSheetProps extends Pick<DialogProps, 'visible'> {
+  dialogProps?: Omit<DialogProps, 'visible' | 'onDismiss'>;
+  /**
+   * The callback that is called when the ActionSheet is dismissed
+   */
+  onDismiss?: (reason: ActionSheetDismissReason) => void;
+  /**
+   * List of options for the action sheet, follows the Button prop types (supply 'label' string and 'onPress'
+   * function)
+   */
+  options?: ActionSheetOptionProps[];
+  /**
+   * Options for the action sheet (when wanting an ActionSheet with a GridView).
+   *
+   * title - title for the GridItem.
+   * iconSource - icon's source for the GridItem.
+   * onPress - action handler for the GridItem.
+   * avoidDismiss - send true to avoid dismissing the ActionSheet on press.
+   *
+   * Example:
+   * [
+   *     {title: 'action 1', iconSource: Assets.icons.general.bookings, onPress: () => this.selectAction('action 1'), avoidDismiss: true},
+   *     {title: 'action 2', iconSource: Assets.icons.general.forum, onPress: () => this.selectAction('action 2')},
+   *     {title: 'action 3', iconSource: Assets.icons.general.groups, onPress: () => this.selectAction('action 3')},
+   * ]
+   */
+  gridOptions?: ActionSheetGridItemProps[];
+  /**
+   * The number of columns in the GridView
+   */
+  gridNumColumns?: number;
+  /**
+   * The options' container style
+   */
+  optionsContainerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Index of the option represents the destructive action (will display red text. Usually used for 'delete' or
+   * 'abort' actions)
+   * Note: this is now used in both platforms, not only for native iOS
+   */
+  destructiveButtonIndex?: number;
+  /**
+   * Index of the option represents the prominent action
+   * (will display text with theme color. Used for a prominent action)
+   */
+  prominentButtonIndex?: number;
+  /**
+   * The props of footer checkbox
+   */
+  footerCustomElement?: React.ReactElement;
+  /**
+   * Render custom action
+   * Note: you will need to call onOptionPress so the option's onPress will be called
+   */
+  renderAction?: (option: ActionSheetOptionProps, index: number) => JSX.Element;
+  /**
+   * Component Test Id
+   */
+  testID?: string;
+}
+
+export interface ScrollReachedProps extends ActionSheetProps, WithScrollReachedProps {}
+export interface ScrollEnabledProps extends ScrollReachedProps, WithScrollEnablerProps {}
diff --git a/src/incubator/index.ts b/src/incubator/index.ts
index d97ff71960..af86c532aa 100644
--- a/src/incubator/index.ts
+++ b/src/incubator/index.ts
@@ -15,6 +15,24 @@ export {default as TouchableOpacity, TouchableOpacityProps} from './TouchableOpa
 export {default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold} from './panView';
 export {default as Slider, SliderRef} from './Slider';
 export {default as Dialog, DialogProps, DialogHeaderProps, DialogStatics, DialogImperativeMethods} from './Dialog';
+export {
+  default as ActionSheet,
+  ActionSheetProps,
+  ActionSheetOptionProps,
+  ActionSheetGridItemProps,
+  ActionSheetDismissReason
+} from './ActionSheet';
 // TODO: delete exports after fully removing from private
-export {default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps} from '../components/chipsInput';
-export {default as WheelPicker, WheelPickerProps, WheelPickerItemProps, WheelPickerAlign, WheelPickerItemValue} from '../components/WheelPicker';
+export {
+  default as ChipsInput,
+  ChipsInputProps,
+  ChipsInputChangeReason,
+  ChipsInputChipProps
+} from '../components/chipsInput';
+export {
+  default as WheelPicker,
+  WheelPickerProps,
+  WheelPickerItemProps,
+  WheelPickerAlign,
+  WheelPickerItemValue
+} from '../components/WheelPicker';

From 9e9c920a4938434bf4c44c1a5766506f7f1ffb85 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Sun, 29 Dec 2024 10:08:52 +0200
Subject: [PATCH 2/9] add IncubatorActionSheetScreen

---
 demo/src/screens/MenuStructure.js             | 17 +++++-
 demo/src/screens/PlaygroundScreen.tsx         | 61 +++----------------
 .../IncubatorActionSheetScreen.tsx            | 56 +++++++++++++++++
 demo/src/screens/incubatorScreens/index.js    |  1 +
 4 files changed, 82 insertions(+), 53 deletions(-)
 create mode 100644 demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx

diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js
index 3b2bfbe003..257850a82b 100644
--- a/demo/src/screens/MenuStructure.js
+++ b/demo/src/screens/MenuStructure.js
@@ -84,6 +84,11 @@ export const navigationData = {
     title: 'Overlays',
     screens: [
       {title: 'Action Sheet', tags: 'action sheet cross-platform', screen: 'unicorn.components.ActionSheetScreen'},
+      {
+        title: 'Action Sheet (Incubator)',
+        tags: 'action sheet',
+        screen: 'unicorn.components.IncubatorActionSheetScreen'
+      },
       {title: 'Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.components.DialogScreen'},
       {title: 'Feature Highlight', tags: 'feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
       {title: 'Floating Button', tags: 'floating button', screen: 'unicorn.components.FloatingButtonScreen'},
@@ -99,7 +104,11 @@ export const navigationData = {
       {title: 'Conversation List', tags: 'list conversation', screen: 'unicorn.lists.ConversationListScreen'},
       {title: 'Drawer', tags: 'drawer', screen: 'unicorn.components.DrawerScreen'},
       {title: 'SortableList', tags: 'sortable list drag', screen: 'unicorn.components.SortableListScreen'},
-      {title: 'HorizontalSortableList', tags: 'sortable horizontal list drag', screen: 'unicorn.components.HorizontalSortableListScreen'},
+      {
+        title: 'HorizontalSortableList',
+        tags: 'sortable horizontal list drag',
+        screen: 'unicorn.components.HorizontalSortableListScreen'
+      },
       {title: 'GridList', tags: 'grid list', screen: 'unicorn.components.GridListScreen'},
       {title: 'SortableGridList', tags: 'sort grid list drag', screen: 'unicorn.components.SortableGridListScreen'}
     ]
@@ -114,7 +123,11 @@ export const navigationData = {
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
       {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
-      {title: 'TabControllerWithStickyHeader', tags: 'tabbar controller native sticky header', screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'},
+      {
+        title: 'TabControllerWithStickyHeader',
+        tags: 'tabbar controller native sticky header',
+        screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'
+      },
       {title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
       {
         title: 'withScrollEnabler',
diff --git a/demo/src/screens/PlaygroundScreen.tsx b/demo/src/screens/PlaygroundScreen.tsx
index 89d3953aa4..0bda100e67 100644
--- a/demo/src/screens/PlaygroundScreen.tsx
+++ b/demo/src/screens/PlaygroundScreen.tsx
@@ -1,60 +1,19 @@
 import React, {Component} from 'react';
-import {View, Button, Incubator} from 'react-native-ui-lib';
+import {View, Text, Card, TextField, Button} from 'react-native-ui-lib';
 
 export default class PlaygroundScreen extends Component {
-  state = {
-    visible: false,
-    selectedOption: undefined
-  };
-
-  pickOption(index: string) {
-    console.log(`picked option ${index}`);
-  }
-
-  OPTIONS = [
-    {label: 'option 1', onPress: () => this.pickOption('option 1')},
-    {label: 'option 2', onPress: () => this.pickOption('option 2')},
-    {label: 'option 3', onPress: () => this.pickOption('option 3')},
-    {label: 'option 1', onPress: () => this.pickOption('option 1')},
-    {label: 'option 2', onPress: () => this.pickOption('option 2')},
-    {label: 'option 3', onPress: () => this.pickOption('option 3')},
-    {label: 'option 1', onPress: () => this.pickOption('option 1')},
-    {label: 'option 2', onPress: () => this.pickOption('option 2')},
-    {label: 'option 3', onPress: () => this.pickOption('option 3')},
-    {label: 'option 1', onPress: () => this.pickOption('option 1')},
-    {label: 'option 2', onPress: () => this.pickOption('option 2')},
-    {label: 'option 3', onPress: () => this.pickOption('option 3')},
-    {label: 'option 1', onPress: () => this.pickOption('option 1')},
-    {label: 'option 2', onPress: () => this.pickOption('option 2')},
-    {label: 'option 3', onPress: () => this.pickOption('option 3')},
-    {label: 'cancel', onPress: () => this.pickOption('cancel')}
-  ];
-
   render() {
     return (
       <View bg-grey80 flex padding-20>
-        <Button
-          label="Show Action Sheet"
-          onPress={() => {
-            console.log(`Button pressed`);
-            this.setState({visible: true});
-          }}
-        />
-
-        <Incubator.ActionSheet
-          visible={this.state.visible}
-          options={this.OPTIONS}
-          onDismiss={() => {
-            console.log(`props onDismiss called!`);
-            this.setState({visible: false});
-          }}
-          dialogProps={{
-            bottom: true,
-            centerH: true,
-            width: '90%',
-            headerProps: {title: 'Action Sheet', subtitle: 'sub'}
-          }}
-        />
+        <View marginT-20>
+          <TextField migrate placeholder="Placeholder"/>
+        </View>
+        <Card height={100} center padding-20>
+          <Text text50>Playground Screen</Text>
+        </Card>
+        <View flex center>
+          <Button marginV-20 label="Button"/>
+        </View>
       </View>
     );
   }
diff --git a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
new file mode 100644
index 0000000000..1157212d5c
--- /dev/null
+++ b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
@@ -0,0 +1,56 @@
+import React, {useState} from 'react';
+import {View, Button, Incubator} from 'react-native-ui-lib';
+const pickOption = (index: string) => {
+  console.log(`picked option ${index}`);
+};
+
+const OPTIONS = [
+  {label: 'option 1', onPress: () => pickOption('option 1')},
+  {label: 'option 2', onPress: () => pickOption('option 2')},
+  {label: 'option 3', onPress: () => pickOption('option 3')},
+  {label: 'option 1', onPress: () => pickOption('option 1')},
+  {label: 'option 2', onPress: () => pickOption('option 2')},
+  {label: 'option 3', onPress: () => pickOption('option 3')},
+  {label: 'option 1', onPress: () => pickOption('option 1')},
+  {label: 'option 2', onPress: () => pickOption('option 2')},
+  {label: 'option 3', onPress: () => pickOption('option 3')},
+  {label: 'option 1', onPress: () => pickOption('option 1')},
+  {label: 'option 2', onPress: () => pickOption('option 2')},
+  {label: 'option 3', onPress: () => pickOption('option 3')},
+  {label: 'option 1', onPress: () => pickOption('option 1')},
+  {label: 'option 2', onPress: () => pickOption('option 2')},
+  {label: 'option 3', onPress: () => pickOption('option 3')},
+  {label: 'cancel', onPress: () => pickOption('cancel')}
+];
+
+function IncubatorActionSheetScreen() {
+  const [visible, setVisible] = useState(false);
+  return (
+    <View bg-grey80 flex padding-20>
+      <Button
+        label="Show Action Sheet"
+        onPress={() => {
+          console.log(`Button pressed`);
+          setVisible(true);
+        }}
+      />
+
+      <Incubator.ActionSheet
+        visible={visible}
+        options={OPTIONS}
+        onDismiss={() => {
+          console.log(`props onDismiss called!`);
+          setVisible(false);
+        }}
+        dialogProps={{
+          bottom: true,
+          centerH: true,
+          width: '90%',
+          headerProps: {title: 'Action Sheet', subtitle: 'sub'}
+        }}
+      />
+    </View>
+  );
+}
+
+export default IncubatorActionSheetScreen;
diff --git a/demo/src/screens/incubatorScreens/index.js b/demo/src/screens/incubatorScreens/index.js
index 247080359c..0546b53f8e 100644
--- a/demo/src/screens/incubatorScreens/index.js
+++ b/demo/src/screens/incubatorScreens/index.js
@@ -6,4 +6,5 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.IncubatorToastScreen', () => require('./IncubatorToastScreen').default);
   registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);
   registrar('unicorn.components.IncubatorSliderScreen', () => require('./IncubatorSliderScreen').default);
+  registrar('unicorn.components.IncubatorActionSheetScreen', () => require('./IncubatorActionSheetScreen').default);
 }

From c2290eb4d223ee44dac493b755b952039d2085de Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Sun, 29 Dec 2024 20:12:17 +0200
Subject: [PATCH 3/9] Incubator Screen, GridOptions, Type fixes

---
 .../IncubatorActionSheetScreen.tsx            | 28 ++++++-
 src/incubator/ActionSheet/GridOptions.tsx     | 80 +++++++++++++++++++
 src/incubator/ActionSheet/index.tsx           | 25 ++++--
 src/incubator/ActionSheet/types.ts            |  6 +-
 4 files changed, 129 insertions(+), 10 deletions(-)
 create mode 100644 src/incubator/ActionSheet/GridOptions.tsx

diff --git a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
index 1157212d5c..dd2cc0521c 100644
--- a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
+++ b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
@@ -23,6 +23,32 @@ const OPTIONS = [
   {label: 'cancel', onPress: () => pickOption('cancel')}
 ];
 
+const GRID_OPTIONS = [
+  {
+    title: 'option 1',
+    onPress: () => pickOption('option 1'),
+    imageSource: {
+      uri: 'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200'
+    },
+    imageStyle: {width: 40, height: 40}
+  },
+  {title: 'option 2', onPress: () => pickOption('option 2')},
+  {title: 'option 3', onPress: () => pickOption('option 3')},
+  {title: 'option 1', onPress: () => pickOption('option 1')},
+  {title: 'option 2', onPress: () => pickOption('option 2')},
+  {title: 'option 3', onPress: () => pickOption('option 3')},
+  {title: 'option 1', onPress: () => pickOption('option 1')},
+  {title: 'option 2', onPress: () => pickOption('option 2')},
+  {title: 'option 3', onPress: () => pickOption('option 3')},
+  {title: 'option 1', onPress: () => pickOption('option 1')},
+  {title: 'option 2', onPress: () => pickOption('option 2')},
+  {title: 'option 3', onPress: () => pickOption('option 3')},
+  {title: 'option 1', onPress: () => pickOption('option 1')},
+  {title: 'option 2', onPress: () => pickOption('option 2')},
+  {title: 'option 3', onPress: () => pickOption('option 3')},
+  {title: 'cancel', onPress: () => pickOption('cancel')}
+];
+
 function IncubatorActionSheetScreen() {
   const [visible, setVisible] = useState(false);
   return (
@@ -34,7 +60,6 @@ function IncubatorActionSheetScreen() {
           setVisible(true);
         }}
       />
-
       <Incubator.ActionSheet
         visible={visible}
         options={OPTIONS}
@@ -48,6 +73,7 @@ function IncubatorActionSheetScreen() {
           width: '90%',
           headerProps: {title: 'Action Sheet', subtitle: 'sub'}
         }}
+        gridOptions={GRID_OPTIONS}
       />
     </View>
   );
diff --git a/src/incubator/ActionSheet/GridOptions.tsx b/src/incubator/ActionSheet/GridOptions.tsx
new file mode 100644
index 0000000000..abcd7599ae
--- /dev/null
+++ b/src/incubator/ActionSheet/GridOptions.tsx
@@ -0,0 +1,80 @@
+import _ from 'lodash';
+import React, {useContext, useMemo} from 'react';
+import {StyleSheet} from 'react-native';
+import Constants from '../../commons/Constants';
+import {BorderRadiuses, Colors, Spacings} from '../../style';
+import GridView from '../../components/gridView';
+import FadedScrollView from '../../components/fadedScrollView';
+import Image from '../../components/image';
+import View from '../../components/view';
+import {ActionSheetProps} from './types';
+
+const GRID_COLUMN_NUMBER = 3;
+const GRID_ITEM_CIRCLE_SIZE = Constants.isTablet ? 64 : 52;
+
+const defaultProps = {
+  gridNumColumns: GRID_COLUMN_NUMBER
+};
+
+const GridOptions = React.memo((props: ActionSheetProps) => {
+  const {gridOptions, gridNumColumns, onItemPress} = props;
+
+  const gridItems = useMemo(() => {
+    return _.map(gridOptions, (option, index) => {
+      const {title, imageSource, imageStyle, testID, ...gridOptions} = option;
+      const customValue = {selectedIndex: index, selectedOption: option};
+      return {
+        renderCustomItem: () => (
+          <View center marginB-s1>
+            <View center style={styles.gridItemCircle}>
+              <Image
+                source={imageSource}
+                style={imageStyle}
+                /* tintColor={gridIconColor} */ testID={`${testID}.icon`}
+              />
+            </View>
+          </View>
+        ),
+        testID,
+        title,
+        titleLines: 2,
+        titleColor: Colors.grey10,
+        titleTypography: 'subtextBold',
+        containerStyle: styles.gridItemContainerStyle,
+        ...gridOptions,
+        customValue,
+        onPress: onItemPress
+      };
+    });
+  }, [gridOptions, onItemPress]);
+
+  const gridView = useMemo(() => {
+    return <GridView items={gridItems} numColumns={gridNumColumns}/>;
+  }, [gridItems, gridNumColumns]);
+
+  if (gridOptions) {
+    return <FadedScrollView {...props} children={gridView} style={styles.gridContainer}/>;
+  }
+
+  return null;
+});
+
+const styles = StyleSheet.create({
+  gridContainer: {
+    alignSelf: 'center'
+  },
+  gridItemCircle: {
+    width: GRID_ITEM_CIRCLE_SIZE,
+    height: GRID_ITEM_CIRCLE_SIZE,
+    borderWidth: 1,
+    borderRadius: BorderRadiuses.br100,
+    borderColor: Colors.$outlineDisabled
+  },
+  gridItemContainerStyle: {
+    marginBottom: Spacings.s7
+  }
+});
+
+// @ts-ignore
+GridOptions.defaultProps = defaultProps;
+export default GridOptions;
diff --git a/src/incubator/ActionSheet/index.tsx b/src/incubator/ActionSheet/index.tsx
index 0022705950..24b0935400 100644
--- a/src/incubator/ActionSheet/index.tsx
+++ b/src/incubator/ActionSheet/index.tsx
@@ -5,6 +5,7 @@ import FadedScrollView from '../../components/fadedScrollView';
 import {Dialog} from '../../incubator';
 import {withScrollReached, withScrollEnabler} from '../../commons/new';
 import {Colors} from '../../style';
+import GridOptions from './GridOptions';
 import {
   ActionSheetProps,
   ActionSheetOptionProps,
@@ -22,7 +23,7 @@ type Selection = {
 };
 
 const ActionSheet = (props: ActionSheetProps) => {
-  const {visible: propsVisibility, onDismiss, dialogProps, footerCustomElement, testID, ...others} = props;
+  const {visible: propsVisibility, onDismiss, dialogProps, footerCustomElement, gridOptions, testID, ...others} = props;
 
   const [visible, setVisible] = useState<boolean | undefined>(undefined);
   const selection = useRef<Selection | undefined>();
@@ -133,7 +134,7 @@ const ActionSheet = (props: ActionSheetProps) => {
     );
   };
 
-  const content = () => {
+  const renderList = () => {
     return (
       <View>
         {renderActions()}
@@ -142,6 +143,19 @@ const ActionSheet = (props: ActionSheetProps) => {
     );
   };
 
+  const content = () => {
+    return (
+      <FadedScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="always" {...props}>
+        {gridOptions ? (
+          <GridOptions {...props} /* contentContainerStyle={styles.gridContentContainer} */ onItemPress={onItemPress}/>
+        ) : (
+          renderList()
+        )}
+        {footerCustomElement}
+      </FadedScrollView>
+    );
+  };
+
   return (
     <Dialog
       visible={visible && propsVisibility}
@@ -152,12 +166,7 @@ const ActionSheet = (props: ActionSheetProps) => {
       onDismiss={_onDismiss}
       {...others}
     >
-      <FadedScrollView
-        showsVerticalScrollIndicator={false}
-        keyboardShouldPersistTaps="always"
-        {...props}
-        children={content()}
-      />
+      {content()}
     </Dialog>
   );
 };
diff --git a/src/incubator/ActionSheet/types.ts b/src/incubator/ActionSheet/types.ts
index 8808bb6c99..0e7fb83a99 100644
--- a/src/incubator/ActionSheet/types.ts
+++ b/src/incubator/ActionSheet/types.ts
@@ -34,7 +34,11 @@ export type ActionSheetGridItemProps = ButtonProps & {
   /**
    * Icon's source for the GridItem
    */
-  iconSource?: ImageProps['source'];
+  imageSource?: ImageProps['source'];
+  /**
+   *ImageStyle
+   */
+  imageStyle?: ImageProps['imageStyle'];
   /**
    * Action handler for the GridItem
    */

From 51fef750befecc25e2cbaae3ac9397743b218461 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 30 Dec 2024 09:57:57 +0200
Subject: [PATCH 4/9] GridOptions refactor, types refactor

---
 .../incubatorScreens/ActionSheetItems.tsx     | 119 ++++++++++++++++++
 .../IncubatorActionSheetScreen.tsx            |  60 ++-------
 src/incubator/ActionSheet/GridOptions.tsx     |  51 +-------
 src/incubator/ActionSheet/types.ts            |  38 +++---
 4 files changed, 150 insertions(+), 118 deletions(-)
 create mode 100644 demo/src/screens/incubatorScreens/ActionSheetItems.tsx

diff --git a/demo/src/screens/incubatorScreens/ActionSheetItems.tsx b/demo/src/screens/incubatorScreens/ActionSheetItems.tsx
new file mode 100644
index 0000000000..d808138c7c
--- /dev/null
+++ b/demo/src/screens/incubatorScreens/ActionSheetItems.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {View, Image, ImageProps, Assets, BorderRadiuses, Colors, Spacings} from 'react-native-ui-lib';
+
+const GRID_ITEM_CIRCLE_SIZE = 52;
+
+const pickOption = (option: string) => {
+  console.log(`picked: ${option}`);
+};
+
+const renderCustomItem = (imageProps: ImageProps) => {
+  return (
+    <View style={styles.gridItemContainerStyle}>
+      <View center style={styles.gridItemCircle}>
+        <Image {...imageProps}/>
+      </View>
+    </View>
+  );
+};
+
+export const listItems = [
+  {label: 'Open Settings', onPress: () => pickOption('Open Settings')},
+  {label: 'View Notifications', onPress: () => pickOption('View Notifications')},
+  {label: 'Update Profile', onPress: () => pickOption('Update Profile')},
+  {label: 'Log Out', onPress: () => pickOption('Log Out')},
+  {label: 'Share Post', onPress: () => pickOption('Share Post')},
+  {label: 'Send Message', onPress: () => pickOption('Send Message')},
+  {label: 'Take Photo', onPress: () => pickOption('Take Photo')},
+  {label: 'Record Video', onPress: () => pickOption('Record Video')},
+  {label: 'Add to Favorites', onPress: () => pickOption('Add to Favorites')},
+  {label: 'Search', onPress: () => pickOption('Search')},
+  {label: 'Refresh Feed', onPress: () => pickOption('Refresh Feed')},
+  {label: 'Edit Post', onPress: () => pickOption('Edit Post')},
+  {label: 'Report Issue', onPress: () => pickOption('Report Issue')},
+  {label: 'Contact Support', onPress: () => pickOption('Contact Support')},
+  {label: 'View Profile', onPress: () => pickOption('View Profile')},
+  {label: 'Cancel', onPress: () => pickOption('Cancel')}
+];
+
+export const gridItems = [
+  {
+    title: 'Open Settings',
+    onPress: () => pickOption('Open Settings'),
+    renderCustomItem: () =>
+      renderCustomItem({
+        source: Assets.icons.demo.settings
+      })
+  },
+  {
+    title: 'View Notifications',
+    onPress: () => pickOption('View Notifications'),
+    renderCustomItem: () =>
+      renderCustomItem({
+        source: Assets.icons.demo.refresh
+      })
+  },
+  {
+    title: 'Update Profile',
+    onPress: () => pickOption('Update Profile'),
+    renderCustomItem: () =>
+      renderCustomItem({
+        source: Assets.icons.check
+      })
+  },
+  {
+    title: 'Log Out',
+    onPress: () => pickOption('Log Out'),
+    renderCustomItem: () =>
+      renderCustomItem({
+        source: Assets.icons.x
+      })
+  },
+  {
+    title: 'Share Post',
+    onPress: () => pickOption('Share Post'),
+    renderCustomItem: () =>
+      renderCustomItem({
+        source: Assets.icons.plusSmall
+      })
+  },
+  {
+    title: 'Send Message',
+    onPress: () => pickOption('Send Message'),
+    renderCustomItem: () =>
+      renderCustomItem({
+        source: Assets.icons.minusSmall
+      })
+  },
+  {
+    title: 'Take Photo',
+    onPress: () => pickOption('Take Photo'),
+    renderCustomItem: () =>
+      renderCustomItem({
+        source: Assets.icons.demo.camera
+      })
+  },
+  {
+    title: 'Record Video',
+    onPress: () => pickOption('Record Video'),
+    renderCustomItem: () =>
+      renderCustomItem({
+        source: Assets.icons.demo.camera
+      })
+  }
+];
+
+const styles = StyleSheet.create({
+  gridItemCircle: {
+    width: GRID_ITEM_CIRCLE_SIZE,
+    height: GRID_ITEM_CIRCLE_SIZE,
+    borderWidth: 1,
+    borderRadius: BorderRadiuses.br100,
+    borderColor: Colors.$outlineDisabled
+  },
+  gridItemContainerStyle: {
+    marginBottom: Spacings.s2
+  },
+  containerStyle: {marginVertical: Spacings.s2}
+});
diff --git a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
index dd2cc0521c..cacdfb4d61 100644
--- a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
+++ b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
@@ -1,56 +1,12 @@
 import React, {useState} from 'react';
 import {View, Button, Incubator} from 'react-native-ui-lib';
-const pickOption = (index: string) => {
-  console.log(`picked option ${index}`);
-};
-
-const OPTIONS = [
-  {label: 'option 1', onPress: () => pickOption('option 1')},
-  {label: 'option 2', onPress: () => pickOption('option 2')},
-  {label: 'option 3', onPress: () => pickOption('option 3')},
-  {label: 'option 1', onPress: () => pickOption('option 1')},
-  {label: 'option 2', onPress: () => pickOption('option 2')},
-  {label: 'option 3', onPress: () => pickOption('option 3')},
-  {label: 'option 1', onPress: () => pickOption('option 1')},
-  {label: 'option 2', onPress: () => pickOption('option 2')},
-  {label: 'option 3', onPress: () => pickOption('option 3')},
-  {label: 'option 1', onPress: () => pickOption('option 1')},
-  {label: 'option 2', onPress: () => pickOption('option 2')},
-  {label: 'option 3', onPress: () => pickOption('option 3')},
-  {label: 'option 1', onPress: () => pickOption('option 1')},
-  {label: 'option 2', onPress: () => pickOption('option 2')},
-  {label: 'option 3', onPress: () => pickOption('option 3')},
-  {label: 'cancel', onPress: () => pickOption('cancel')}
-];
-
-const GRID_OPTIONS = [
-  {
-    title: 'option 1',
-    onPress: () => pickOption('option 1'),
-    imageSource: {
-      uri: 'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200'
-    },
-    imageStyle: {width: 40, height: 40}
-  },
-  {title: 'option 2', onPress: () => pickOption('option 2')},
-  {title: 'option 3', onPress: () => pickOption('option 3')},
-  {title: 'option 1', onPress: () => pickOption('option 1')},
-  {title: 'option 2', onPress: () => pickOption('option 2')},
-  {title: 'option 3', onPress: () => pickOption('option 3')},
-  {title: 'option 1', onPress: () => pickOption('option 1')},
-  {title: 'option 2', onPress: () => pickOption('option 2')},
-  {title: 'option 3', onPress: () => pickOption('option 3')},
-  {title: 'option 1', onPress: () => pickOption('option 1')},
-  {title: 'option 2', onPress: () => pickOption('option 2')},
-  {title: 'option 3', onPress: () => pickOption('option 3')},
-  {title: 'option 1', onPress: () => pickOption('option 1')},
-  {title: 'option 2', onPress: () => pickOption('option 2')},
-  {title: 'option 3', onPress: () => pickOption('option 3')},
-  {title: 'cancel', onPress: () => pickOption('cancel')}
-];
+import {renderBooleanOption} from '../ExampleScreenPresenter';
+import {listItems, gridItems} from './ActionSheetItems';
 
 function IncubatorActionSheetScreen() {
   const [visible, setVisible] = useState(false);
+  const [useGrid, setUseGrid] = useState(false);
+
   return (
     <View bg-grey80 flex padding-20>
       <Button
@@ -60,9 +16,13 @@ function IncubatorActionSheetScreen() {
           setVisible(true);
         }}
       />
+      <View marginV-s2 gap-s1 style={{width: 150}}>
+        {renderBooleanOption('Use Grid Layout', 'useGrid', {spread: true, state: useGrid, setState: setUseGrid})}
+      </View>
+
       <Incubator.ActionSheet
         visible={visible}
-        options={OPTIONS}
+        options={useGrid ? undefined : listItems}
         onDismiss={() => {
           console.log(`props onDismiss called!`);
           setVisible(false);
@@ -73,7 +33,7 @@ function IncubatorActionSheetScreen() {
           width: '90%',
           headerProps: {title: 'Action Sheet', subtitle: 'sub'}
         }}
-        gridOptions={GRID_OPTIONS}
+        gridOptions={useGrid ? gridItems : undefined}
       />
     </View>
   );
diff --git a/src/incubator/ActionSheet/GridOptions.tsx b/src/incubator/ActionSheet/GridOptions.tsx
index abcd7599ae..f35cf5f223 100644
--- a/src/incubator/ActionSheet/GridOptions.tsx
+++ b/src/incubator/ActionSheet/GridOptions.tsx
@@ -1,46 +1,27 @@
 import _ from 'lodash';
-import React, {useContext, useMemo} from 'react';
-import {StyleSheet} from 'react-native';
-import Constants from '../../commons/Constants';
-import {BorderRadiuses, Colors, Spacings} from '../../style';
+import React, {useMemo} from 'react';
+import {Colors} from '../../style';
 import GridView from '../../components/gridView';
-import FadedScrollView from '../../components/fadedScrollView';
-import Image from '../../components/image';
-import View from '../../components/view';
-import {ActionSheetProps} from './types';
+import {ActionSheetGridProps} from './types';
 
 const GRID_COLUMN_NUMBER = 3;
-const GRID_ITEM_CIRCLE_SIZE = Constants.isTablet ? 64 : 52;
 
 const defaultProps = {
   gridNumColumns: GRID_COLUMN_NUMBER
 };
 
-const GridOptions = React.memo((props: ActionSheetProps) => {
+const GridOptions = React.memo((props: ActionSheetGridProps) => {
   const {gridOptions, gridNumColumns, onItemPress} = props;
 
   const gridItems = useMemo(() => {
     return _.map(gridOptions, (option, index) => {
-      const {title, imageSource, imageStyle, testID, ...gridOptions} = option;
+      const {testID, ...gridOptions} = option;
       const customValue = {selectedIndex: index, selectedOption: option};
       return {
-        renderCustomItem: () => (
-          <View center marginB-s1>
-            <View center style={styles.gridItemCircle}>
-              <Image
-                source={imageSource}
-                style={imageStyle}
-                /* tintColor={gridIconColor} */ testID={`${testID}.icon`}
-              />
-            </View>
-          </View>
-        ),
         testID,
-        title,
         titleLines: 2,
         titleColor: Colors.grey10,
         titleTypography: 'subtextBold',
-        containerStyle: styles.gridItemContainerStyle,
         ...gridOptions,
         customValue,
         onPress: onItemPress
@@ -52,27 +33,7 @@ const GridOptions = React.memo((props: ActionSheetProps) => {
     return <GridView items={gridItems} numColumns={gridNumColumns}/>;
   }, [gridItems, gridNumColumns]);
 
-  if (gridOptions) {
-    return <FadedScrollView {...props} children={gridView} style={styles.gridContainer}/>;
-  }
-
-  return null;
-});
-
-const styles = StyleSheet.create({
-  gridContainer: {
-    alignSelf: 'center'
-  },
-  gridItemCircle: {
-    width: GRID_ITEM_CIRCLE_SIZE,
-    height: GRID_ITEM_CIRCLE_SIZE,
-    borderWidth: 1,
-    borderRadius: BorderRadiuses.br100,
-    borderColor: Colors.$outlineDisabled
-  },
-  gridItemContainerStyle: {
-    marginBottom: Spacings.s7
-  }
+  return gridView;
 });
 
 // @ts-ignore
diff --git a/src/incubator/ActionSheet/types.ts b/src/incubator/ActionSheet/types.ts
index 0e7fb83a99..61013491ec 100644
--- a/src/incubator/ActionSheet/types.ts
+++ b/src/incubator/ActionSheet/types.ts
@@ -1,7 +1,7 @@
 import {StyleProp, ViewStyle} from 'react-native';
 import {DialogProps} from '../Dialog';
 import {ButtonProps} from '../../components/button';
-import {ImageProps} from '../../components/image';
+import {GridListItemProps} from '../../components/gridListItem';
 import {WithScrollReachedProps, WithScrollEnablerProps} from '../../commons/new';
 
 export enum ActionSheetDismissReason {
@@ -26,28 +26,20 @@ export type ActionSheetOptionProps = ButtonProps & {
   key?: string | number;
 };
 
-export type ActionSheetGridItemProps = ButtonProps & {
-  /**
-   * Title for the GridItem
-   */
-  title?: string;
-  /**
-   * Icon's source for the GridItem
-   */
-  imageSource?: ImageProps['source'];
-  /**
-   *ImageStyle
-   */
-  imageStyle?: ImageProps['imageStyle'];
-  /**
-   * Action handler for the GridItem
-   */
-  onPress?: (selectedOptionProps: ActionSheetGridItemProps, selectedOptionIndex: number) => void;
-  /**
-   * Send true to avoid dismissing the ActionSheet on press
-   */
-  avoidDismiss?: boolean;
-  testID?: string;
+export type ActionSheetGridItemProps = ButtonProps &
+  Omit<GridListItemProps, 'onPress'> & {
+    /**
+     * Action handler for the GridItem
+     */
+    onPress?: (selectedOptionProps: ActionSheetGridItemProps, selectedOptionIndex: number) => void;
+    /**
+     * Send true to avoid dismissing the ActionSheet on press
+     */
+    avoidDismiss?: boolean;
+  };
+
+export type ActionSheetGridProps = Pick<ActionSheetProps, 'gridNumColumns' | 'gridOptions'> & {
+  onItemPress: (props: any) => void;
 };
 
 export interface ActionSheetProps extends Pick<DialogProps, 'visible'> {

From c168e5b4d66f42796a214d9ffa0e71b8efd5f607 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Thu, 9 Jan 2025 15:35:10 +0200
Subject: [PATCH 5/9] update IncubatorActionSheetScreen and GridOptions for
 improved option handling and styling

---
 .../incubatorScreens/ActionSheetItems.tsx     |  64 ++++++-----
 .../IncubatorActionSheetScreen.tsx            |   6 +-
 src/incubator/ActionSheet/GridOptions.tsx     |  29 +++--
 src/incubator/ActionSheet/index.tsx           | 100 ++++++++----------
 src/incubator/ActionSheet/types.ts            |  98 +++++++++--------
 5 files changed, 153 insertions(+), 144 deletions(-)

diff --git a/demo/src/screens/incubatorScreens/ActionSheetItems.tsx b/demo/src/screens/incubatorScreens/ActionSheetItems.tsx
index d808138c7c..b1574ea03f 100644
--- a/demo/src/screens/incubatorScreens/ActionSheetItems.tsx
+++ b/demo/src/screens/incubatorScreens/ActionSheetItems.tsx
@@ -10,7 +10,7 @@ const pickOption = (option: string) => {
 
 const renderCustomItem = (imageProps: ImageProps) => {
   return (
-    <View style={styles.gridItemContainerStyle}>
+    <View style={styles.gridItemCustomRenderStyle}>
       <View center style={styles.gridItemCircle}>
         <Image {...imageProps}/>
       </View>
@@ -19,32 +19,34 @@ const renderCustomItem = (imageProps: ImageProps) => {
 };
 
 export const listItems = [
-  {label: 'Open Settings', onPress: () => pickOption('Open Settings')},
-  {label: 'View Notifications', onPress: () => pickOption('View Notifications')},
-  {label: 'Update Profile', onPress: () => pickOption('Update Profile')},
-  {label: 'Log Out', onPress: () => pickOption('Log Out')},
-  {label: 'Share Post', onPress: () => pickOption('Share Post')},
-  {label: 'Send Message', onPress: () => pickOption('Send Message')},
-  {label: 'Take Photo', onPress: () => pickOption('Take Photo')},
-  {label: 'Record Video', onPress: () => pickOption('Record Video')},
-  {label: 'Add to Favorites', onPress: () => pickOption('Add to Favorites')},
-  {label: 'Search', onPress: () => pickOption('Search')},
-  {label: 'Refresh Feed', onPress: () => pickOption('Refresh Feed')},
-  {label: 'Edit Post', onPress: () => pickOption('Edit Post')},
-  {label: 'Report Issue', onPress: () => pickOption('Report Issue')},
-  {label: 'Contact Support', onPress: () => pickOption('Contact Support')},
-  {label: 'View Profile', onPress: () => pickOption('View Profile')},
-  {label: 'Cancel', onPress: () => pickOption('Cancel')}
+  {title: 'Open Settings', onPress: () => pickOption('Open Settings')},
+  {title: 'View Notifications', onPress: () => pickOption('View Notifications')},
+  {title: 'Update Profile', onPress: () => pickOption('Update Profile')},
+  {title: 'Log Out', onPress: () => pickOption('Log Out')},
+  {title: 'Share Post', onPress: () => pickOption('Share Post')},
+  {title: 'Send Message', onPress: () => pickOption('Send Message')},
+  {title: 'Take Photo', onPress: () => pickOption('Take Photo')},
+  {title: 'Record Video', onPress: () => pickOption('Record Video')},
+  {title: 'Add to Favorites', onPress: () => pickOption('Add to Favorites')},
+  {title: 'Search', onPress: () => pickOption('Search')},
+  {title: 'Refresh Feed', onPress: () => pickOption('Refresh Feed')},
+  {title: 'Edit Post', onPress: () => pickOption('Edit Post')},
+  {title: 'Report Issue', onPress: () => pickOption('Report Issue')},
+  {title: 'Contact Support', onPress: () => pickOption('Contact Support')},
+  {title: 'View Profile', onPress: () => pickOption('View Profile')},
+  {title: 'Cancel', onPress: () => pickOption('Cancel')}
 ];
 
 export const gridItems = [
   {
     title: 'Open Settings',
+    subtitle: 'Subtitle',
     onPress: () => pickOption('Open Settings'),
     renderCustomItem: () =>
       renderCustomItem({
         source: Assets.icons.demo.settings
-      })
+      }),
+    containerStyle: {alignItems: 'center', margin: Spacings.s1}
   },
   {
     title: 'View Notifications',
@@ -52,7 +54,8 @@ export const gridItems = [
     renderCustomItem: () =>
       renderCustomItem({
         source: Assets.icons.demo.refresh
-      })
+      }),
+    containerStyle: {alignItems: 'center', margin: Spacings.s1}
   },
   {
     title: 'Update Profile',
@@ -60,7 +63,8 @@ export const gridItems = [
     renderCustomItem: () =>
       renderCustomItem({
         source: Assets.icons.check
-      })
+      }),
+    containerStyle: {alignItems: 'center', margin: Spacings.s1}
   },
   {
     title: 'Log Out',
@@ -68,7 +72,8 @@ export const gridItems = [
     renderCustomItem: () =>
       renderCustomItem({
         source: Assets.icons.x
-      })
+      }),
+    containerStyle: {alignItems: 'center', margin: Spacings.s1}
   },
   {
     title: 'Share Post',
@@ -76,7 +81,8 @@ export const gridItems = [
     renderCustomItem: () =>
       renderCustomItem({
         source: Assets.icons.plusSmall
-      })
+      }),
+    containerStyle: {alignItems: 'center', margin: Spacings.s1}
   },
   {
     title: 'Send Message',
@@ -84,7 +90,8 @@ export const gridItems = [
     renderCustomItem: () =>
       renderCustomItem({
         source: Assets.icons.minusSmall
-      })
+      }),
+    containerStyle: {alignItems: 'center', margin: Spacings.s1}
   },
   {
     title: 'Take Photo',
@@ -92,7 +99,8 @@ export const gridItems = [
     renderCustomItem: () =>
       renderCustomItem({
         source: Assets.icons.demo.camera
-      })
+      }),
+    containerStyle: {alignItems: 'center', margin: Spacings.s1}
   },
   {
     title: 'Record Video',
@@ -100,7 +108,8 @@ export const gridItems = [
     renderCustomItem: () =>
       renderCustomItem({
         source: Assets.icons.demo.camera
-      })
+      }),
+    containerStyle: {alignItems: 'center', margin: Spacings.s1}
   }
 ];
 
@@ -112,8 +121,9 @@ const styles = StyleSheet.create({
     borderRadius: BorderRadiuses.br100,
     borderColor: Colors.$outlineDisabled
   },
-  gridItemContainerStyle: {
-    marginBottom: Spacings.s2
+  gridItemCustomRenderStyle: {
+    marginBottom: Spacings.s2,
+    alignSelf: 'center'
   },
   containerStyle: {marginVertical: Spacings.s2}
 });
diff --git a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
index cacdfb4d61..f7fdc750c2 100644
--- a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
+++ b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
@@ -22,7 +22,7 @@ function IncubatorActionSheetScreen() {
 
       <Incubator.ActionSheet
         visible={visible}
-        options={useGrid ? undefined : listItems}
+        options={useGrid ? gridItems : listItems}
         onDismiss={() => {
           console.log(`props onDismiss called!`);
           setVisible(false);
@@ -30,10 +30,10 @@ function IncubatorActionSheetScreen() {
         dialogProps={{
           bottom: true,
           centerH: true,
-          width: '90%',
+          width: '95%',
           headerProps: {title: 'Action Sheet', subtitle: 'sub'}
         }}
-        gridOptions={useGrid ? gridItems : undefined}
+        gridOptions={useGrid ? {numColumns: 3} : undefined}
       />
     </View>
   );
diff --git a/src/incubator/ActionSheet/GridOptions.tsx b/src/incubator/ActionSheet/GridOptions.tsx
index f35cf5f223..3953ae8d91 100644
--- a/src/incubator/ActionSheet/GridOptions.tsx
+++ b/src/incubator/ActionSheet/GridOptions.tsx
@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import React, {useMemo} from 'react';
-import {Colors} from '../../style';
 import GridView from '../../components/gridView';
-import {ActionSheetGridProps} from './types';
+import {ActionSheetGridList, ActionSheetGridItemProps} from './types';
 
 const GRID_COLUMN_NUMBER = 3;
 
@@ -10,28 +9,26 @@ const defaultProps = {
   gridNumColumns: GRID_COLUMN_NUMBER
 };
 
-const GridOptions = React.memo((props: ActionSheetGridProps) => {
-  const {gridOptions, gridNumColumns, onItemPress} = props;
+const GridOptions = React.memo((props: ActionSheetGridList) => {
+  const {options, onItemPress} = props;
 
   const gridItems = useMemo(() => {
-    return _.map(gridOptions, (option, index) => {
-      const {testID, ...gridOptions} = option;
+    return _.map(options as ActionSheetGridItemProps[], (option, index) => {
       const customValue = {selectedIndex: index, selectedOption: option};
+      console.log(`option:`, option);
       return {
-        testID,
-        titleLines: 2,
-        titleColor: Colors.grey10,
-        titleTypography: 'subtextBold',
-        ...gridOptions,
-        customValue,
-        onPress: onItemPress
+        ...option,
+        onPress: () => {
+          option.onPress?.(option, index);
+          onItemPress?.(customValue);
+        }
       };
     });
-  }, [gridOptions, onItemPress]);
+  }, [options, onItemPress]);
 
   const gridView = useMemo(() => {
-    return <GridView items={gridItems} numColumns={gridNumColumns}/>;
-  }, [gridItems, gridNumColumns]);
+    return <GridView items={gridItems} {...props}/>;
+  }, [gridItems]);
 
   return gridView;
 });
diff --git a/src/incubator/ActionSheet/index.tsx b/src/incubator/ActionSheet/index.tsx
index 24b0935400..6293de5215 100644
--- a/src/incubator/ActionSheet/index.tsx
+++ b/src/incubator/ActionSheet/index.tsx
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {useState, useRef, useEffect, useCallback, useMemo} from 'react';
-import {View, Image, Text, ListItem, ButtonProps, ImageProps} from '../../index';
+import {View, Text, ListItem, Icon} from '../../index';
 import FadedScrollView from '../../components/fadedScrollView';
 import {Dialog} from '../../incubator';
 import {withScrollReached, withScrollEnabler} from '../../commons/new';
@@ -23,13 +23,20 @@ type Selection = {
 };
 
 const ActionSheet = (props: ActionSheetProps) => {
-  const {visible: propsVisibility, onDismiss, dialogProps, footerCustomElement, gridOptions, testID, ...others} = props;
+  const {
+    dialogProps,
+    footerCustomElement,
+    options,
+    gridOptions,
+    onDismiss,
+    testID,
+    visible: propsVisibility,
+    ...others
+  } = props;
 
   const [visible, setVisible] = useState<boolean | undefined>(undefined);
   const selection = useRef<Selection | undefined>();
 
-  useEffect(() => {}, [visible, propsVisibility]);
-
   useEffect(() => {
     if (propsVisibility && visible === undefined) {
       setVisible(true);
@@ -53,7 +60,6 @@ const ActionSheet = (props: ActionSheetProps) => {
       resetSelected();
       return;
     }
-
     setVisible(false);
   },
   [invokeUserOnPress, resetSelected, setVisible]);
@@ -75,31 +81,24 @@ const ActionSheet = (props: ActionSheetProps) => {
     }
   }, [invokeAfterActionSelected, onDismiss, resetSelected, setVisible]);
 
-  const _headerProps = useMemo(() => {
-    const {headerProps} = dialogProps || {};
-    return {
-      showKnob: true,
-      showDivider: true,
-      ...headerProps
-    };
-  }, [dialogProps]);
-
   const _modalProps = useMemo(() => {
     const {modalProps} = dialogProps || {};
     return {accessibilityLabel: 'Close action menu', ...modalProps};
   }, [dialogProps]);
 
-  const handleRenderIcon = (option: ButtonProps) => {
-    // @ts-ignore
-    let source = option.icon;
-    if (!source) {
-      source = _.isFunction(option.iconSource) ? option.iconSource() : (option.iconSource as ImageProps['source']);
-    }
-    return source && renderIcon(source);
+  const renderIcon = (icon: ActionSheetOptionProps['icon']) => {
+    return <Icon {...icon}/>;
   };
 
-  const renderIcon = (iconSource: ImageProps['source']) => {
-    return <Image source={iconSource} resizeMode={'contain'} style={{width: 20, height: 20, marginRight: 16}}/>;
+  const renderSectionHeader = (option: ActionSheetOptionProps, index: number) => {
+    const {key, title, titleStyle, sectionHeaderStyle, testID} = option;
+    return (
+      <View key={key || index} row spread style={sectionHeaderStyle} testID={testID}>
+        <Text flex style={titleStyle} testID={`${testID}.title`}>
+          {title}
+        </Text>
+      </View>
+    );
   };
 
   const renderActionItem = (selectedOption: ActionSheetOptionProps, selectedIndex: number) => {
@@ -113,9 +112,9 @@ const ActionSheet = (props: ActionSheetProps) => {
         activeBackgroundColor={Colors.$backgroundNeutralLight}
       >
         <View row paddingL-16 flex centerV>
-          {handleRenderIcon(selectedOption)}
-          <Text text70 $textDefault numberOfLines={1} style={selectedOption.labelStyle}>
-            {selectedOption.label}
+          {renderIcon(selectedOption.icon)}
+          <Text text70 $textDefault numberOfLines={1} style={selectedOption.titleStyle}>
+            {selectedOption.title}
           </Text>
         </View>
       </ListItem>
@@ -123,12 +122,16 @@ const ActionSheet = (props: ActionSheetProps) => {
   };
 
   const renderActions = () => {
-    const {options, renderAction} = props;
-
+    const {renderAction} = props;
     return (
       <View>
-        {_.map(options, (option, index) => {
-          return renderAction ? renderAction(option, index) : renderActionItem(option, index);
+        {_.map(options as ActionSheetOptionProps, (option: ActionSheetOptionProps, index: number) => {
+          const {isSectionHeader} = option;
+          if (isSectionHeader) {
+            return renderSectionHeader(option, index);
+          } else {
+            return renderAction ? renderAction(option, index) : renderActionItem(option, index);
+          }
         })}
       </View>
     );
@@ -143,14 +146,20 @@ const ActionSheet = (props: ActionSheetProps) => {
     );
   };
 
+  const _gridOptions = useMemo(() => {
+    if (gridOptions) {
+      return {
+        ...gridOptions,
+        options,
+        onItemPress
+      };
+    }
+  }, [gridOptions, options, onItemPress]);
+
   const content = () => {
     return (
       <FadedScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="always" {...props}>
-        {gridOptions ? (
-          <GridOptions {...props} /* contentContainerStyle={styles.gridContentContainer} */ onItemPress={onItemPress}/>
-        ) : (
-          renderList()
-        )}
+        {_gridOptions ? <GridOptions {..._gridOptions}/> : renderList()}
         {footerCustomElement}
       </FadedScrollView>
     );
@@ -161,7 +170,6 @@ const ActionSheet = (props: ActionSheetProps) => {
       visible={visible && propsVisibility}
       testID={testID}
       {...dialogProps}
-      headerProps={_headerProps}
       modalProps={_modalProps}
       onDismiss={_onDismiss}
       {...others}
@@ -171,26 +179,6 @@ const ActionSheet = (props: ActionSheetProps) => {
   );
 };
 
-// const styles = StyleSheet.create({
-//   listContentContainer: {
-//     paddingTop: Spacings.s3,
-//     paddingBottom: Spacings.s4
-//   },
-//   listContentContainerNoTitle: {
-//     paddingTop: 0,
-//     paddingBottom: Spacings.s4
-//   },
-//   gridContentContainer: {
-//     paddingTop: Spacings.s8,
-//     paddingBottom: Spacings.s1, // Spacings.s8 from guidelines - Spacings.s7 from gridItemContainerStyle (in GridOptions)
-//     alignSelf: 'center'
-//   },
-//   footerCheckbox: {
-//     marginVertical: Spacings.s5,
-//     marginLeft: Spacings.s5
-//   }
-// });
-
 ActionSheet.displayName = 'ActionSheet';
 ActionSheet.dismissReason = ActionSheetDismissReason;
 
diff --git a/src/incubator/ActionSheet/types.ts b/src/incubator/ActionSheet/types.ts
index 61013491ec..f03cc3e96c 100644
--- a/src/incubator/ActionSheet/types.ts
+++ b/src/incubator/ActionSheet/types.ts
@@ -1,7 +1,8 @@
-import {StyleProp, ViewStyle} from 'react-native';
+import {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {DialogProps} from '../Dialog';
-import {ButtonProps} from '../../components/button';
 import {GridListItemProps} from '../../components/gridListItem';
+import {GridViewProps} from '../../components/gridView';
+import {IconProps} from '../../components/icon';
 import {WithScrollReachedProps, WithScrollEnablerProps} from '../../commons/new';
 
 export enum ActionSheetDismissReason {
@@ -9,39 +10,69 @@ export enum ActionSheetDismissReason {
   CANCELED = 'canceled'
 }
 
-export type ActionSheetOptionProps = ButtonProps & {
+type BaseActionSheetOptionProps = {
   /**
-   * Is this option a section header
+   * Action handler for the GridItem
    */
-  isSectionHeader?: boolean;
+  onPress?: (selectedOptionProps: ActionSheetGridItemProps, selectedOptionIndex: number) => void;
   /**
    * Send true to avoid dismissing the ActionSheet on press
    */
   avoidDismiss?: boolean;
+};
+
+export type ActionSheetOptionProps = BaseActionSheetOptionProps & {
   /**
-   * Set a function to be executed on press
+   * Action title
    */
-  onPress?: (selectedOptionProps: ActionSheetOptionProps, selectedOptionIndex: number) => void;
-
+  title?: string;
+  /**
+   * title custom style
+   */
+  titleStyle?: StyleProp<TextStyle>;
+  /**
+   * Action subtitle
+   */
+  subtitle?: string;
+  /**
+   * subtitle custom style
+   */
+  subtitleStyle?: StyleProp<TextStyle>;
+  /**
+   * Icon to display for the action, render before the title
+   */
+  icon?: IconProps;
+  /**
+   * Custom element to be rendered on the Action left side
+   */
+  leftCustomElement?: React.ReactElement;
+  /**
+   * Custom element to be rendered on the Action right side
+   */
+  rightCustomElement?: React.ReactElement;
+  /**
+   * Is this option a section header
+   */
+  isSectionHeader?: boolean;
+  /**
+   * Section header style
+   */
+  sectionHeaderStyle?: StyleProp<ViewStyle>;
+  /**
+   * Testing identifier
+   */
+  testID?: string;
   key?: string | number;
 };
 
-export type ActionSheetGridItemProps = ButtonProps &
-  Omit<GridListItemProps, 'onPress'> & {
-    /**
-     * Action handler for the GridItem
-     */
-    onPress?: (selectedOptionProps: ActionSheetGridItemProps, selectedOptionIndex: number) => void;
-    /**
-     * Send true to avoid dismissing the ActionSheet on press
-     */
-    avoidDismiss?: boolean;
-  };
+export type ActionSheetGridItemProps = Omit<GridListItemProps, 'onPress'> & BaseActionSheetOptionProps;
 
-export type ActionSheetGridProps = Pick<ActionSheetProps, 'gridNumColumns' | 'gridOptions'> & {
-  onItemPress: (props: any) => void;
+export type ActionSheetGridProps = Omit<GridViewProps, 'items' | 'lastItemLabel' | 'lastItemOverlayColor'> & {
+  onItemPress?: (props: any) => void;
 };
 
+export type ActionSheetGridList = ActionSheetGridProps & Pick<ActionSheetProps, 'options'>;
+
 export interface ActionSheetProps extends Pick<DialogProps, 'visible'> {
   dialogProps?: Omit<DialogProps, 'visible' | 'onDismiss'>;
   /**
@@ -49,30 +80,13 @@ export interface ActionSheetProps extends Pick<DialogProps, 'visible'> {
    */
   onDismiss?: (reason: ActionSheetDismissReason) => void;
   /**
-   * List of options for the action sheet, follows the Button prop types (supply 'label' string and 'onPress'
-   * function)
-   */
-  options?: ActionSheetOptionProps[];
-  /**
-   * Options for the action sheet (when wanting an ActionSheet with a GridView).
-   *
-   * title - title for the GridItem.
-   * iconSource - icon's source for the GridItem.
-   * onPress - action handler for the GridItem.
-   * avoidDismiss - send true to avoid dismissing the ActionSheet on press.
-   *
-   * Example:
-   * [
-   *     {title: 'action 1', iconSource: Assets.icons.general.bookings, onPress: () => this.selectAction('action 1'), avoidDismiss: true},
-   *     {title: 'action 2', iconSource: Assets.icons.general.forum, onPress: () => this.selectAction('action 2')},
-   *     {title: 'action 3', iconSource: Assets.icons.general.groups, onPress: () => this.selectAction('action 3')},
-   * ]
+   * List of options for the action sheet
    */
-  gridOptions?: ActionSheetGridItemProps[];
+  options?: ActionSheetOptionProps[] | ActionSheetGridItemProps[];
   /**
-   * The number of columns in the GridView
+   * Grid options for the action sheet
    */
-  gridNumColumns?: number;
+  gridOptions?: ActionSheetGridProps;
   /**
    * The options' container style
    */

From 5e137bd7d4542afd2d0fa9de70f1315e88c4c036 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Fri, 10 Jan 2025 16:00:41 +0200
Subject: [PATCH 6/9] refactor ActionSheet and ActionSheetItems for improved
 structure and option handling, Screen refactor

---
 .../incubatorScreens/ActionSheetItems.tsx     | 143 +++++------
 .../IncubatorActionSheetScreen.tsx            | 223 ++++++++++++++++--
 src/incubator/ActionSheet/index.tsx           |   7 +-
 3 files changed, 267 insertions(+), 106 deletions(-)

diff --git a/demo/src/screens/incubatorScreens/ActionSheetItems.tsx b/demo/src/screens/incubatorScreens/ActionSheetItems.tsx
index b1574ea03f..4c6d44498c 100644
--- a/demo/src/screens/incubatorScreens/ActionSheetItems.tsx
+++ b/demo/src/screens/incubatorScreens/ActionSheetItems.tsx
@@ -1,21 +1,41 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {View, Image, ImageProps, Assets, BorderRadiuses, Colors, Spacings} from 'react-native-ui-lib';
+import {Alert} from 'react-native';
+import {Assets} from 'react-native-ui-lib';
 
-const GRID_ITEM_CIRCLE_SIZE = 52;
+export enum TEXT_LENGTH {
+  NO_TEXT = 'No text',
+  SHORT = 'Short',
+  LONG = 'Long'
+}
 
-const pickOption = (option: string) => {
-  console.log(`picked: ${option}`);
+export enum CUSTOM_TITLE_COMPONENT {
+  NONE = 'None',
+  AVATAR = 'Avatar',
+  ICON = 'Icon',
+  THUMBNAIL = 'Thumbnail'
+}
+
+export enum OPTIONS_TYPE {
+  NONE = 'None',
+  REGULAR = 'Regular',
+  WITH_ICONS = 'With icons',
+  LONG = 'Long',
+  SECTION_HEADERS = 'Section headers',
+  GRID_VIEW = 'Grid view'
+}
+
+export type State = {
+  shouldShowModal: boolean;
+  titleLength: TEXT_LENGTH;
+  titleIsProminent: boolean;
+  titleIsClickable: boolean;
+  subtitleLength: TEXT_LENGTH;
+  showFooter: boolean;
+  optionsType: OPTIONS_TYPE;
+  visible: boolean;
 };
 
-const renderCustomItem = (imageProps: ImageProps) => {
-  return (
-    <View style={styles.gridItemCustomRenderStyle}>
-      <View center style={styles.gridItemCircle}>
-        <Image {...imageProps}/>
-      </View>
-    </View>
-  );
+const pickOption = (option: string) => {
+  Alert.alert(`picked: ${option}`);
 };
 
 export const listItems = [
@@ -40,90 +60,51 @@ export const listItems = [
 export const gridItems = [
   {
     title: 'Open Settings',
-    subtitle: 'Subtitle',
-    onPress: () => pickOption('Open Settings'),
-    renderCustomItem: () =>
-      renderCustomItem({
-        source: Assets.icons.demo.settings
-      }),
-    containerStyle: {alignItems: 'center', margin: Spacings.s1}
+    imageProps: {
+      source: Assets.icons.demo.settings
+    },
+    onPress: () => pickOption('Open Settings')
   },
   {
     title: 'View Notifications',
-    onPress: () => pickOption('View Notifications'),
-    renderCustomItem: () =>
-      renderCustomItem({
-        source: Assets.icons.demo.refresh
-      }),
-    containerStyle: {alignItems: 'center', margin: Spacings.s1}
+    imageProps: {
+      source: Assets.icons.demo.refresh
+    },
+    onPress: () => pickOption('View Notifications')
   },
   {
     title: 'Update Profile',
-    onPress: () => pickOption('Update Profile'),
-    renderCustomItem: () =>
-      renderCustomItem({
-        source: Assets.icons.check
-      }),
-    containerStyle: {alignItems: 'center', margin: Spacings.s1}
+    imageProps: {
+      source: Assets.icons.check
+    },
+    onPress: () => pickOption('Update Profile')
   },
   {
     title: 'Log Out',
-    onPress: () => pickOption('Log Out'),
-    renderCustomItem: () =>
-      renderCustomItem({
-        source: Assets.icons.x
-      }),
-    containerStyle: {alignItems: 'center', margin: Spacings.s1}
+    imageProps: {
+      source: Assets.icons.x
+    },
+    onPress: () => pickOption('Log Out')
   },
   {
     title: 'Share Post',
-    onPress: () => pickOption('Share Post'),
-    renderCustomItem: () =>
-      renderCustomItem({
-        source: Assets.icons.plusSmall
-      }),
-    containerStyle: {alignItems: 'center', margin: Spacings.s1}
-  },
-  {
-    title: 'Send Message',
-    onPress: () => pickOption('Send Message'),
-    renderCustomItem: () =>
-      renderCustomItem({
-        source: Assets.icons.minusSmall
-      }),
-    containerStyle: {alignItems: 'center', margin: Spacings.s1}
+    imageProps: {
+      source: Assets.icons.plusSmall
+    },
+    onPress: () => pickOption('Share Post')
   },
   {
     title: 'Take Photo',
-    onPress: () => pickOption('Take Photo'),
-    renderCustomItem: () =>
-      renderCustomItem({
-        source: Assets.icons.demo.camera
-      }),
-    containerStyle: {alignItems: 'center', margin: Spacings.s1}
+    imageProps: {
+      source: Assets.icons.demo.camera
+    },
+    onPress: () => pickOption('Take Photo')
   },
   {
     title: 'Record Video',
-    onPress: () => pickOption('Record Video'),
-    renderCustomItem: () =>
-      renderCustomItem({
-        source: Assets.icons.demo.camera
-      }),
-    containerStyle: {alignItems: 'center', margin: Spacings.s1}
+    imageProps: {
+      source: Assets.icons.demo.camera
+    },
+    onPress: () => pickOption('Record Video')
   }
 ];
-
-const styles = StyleSheet.create({
-  gridItemCircle: {
-    width: GRID_ITEM_CIRCLE_SIZE,
-    height: GRID_ITEM_CIRCLE_SIZE,
-    borderWidth: 1,
-    borderRadius: BorderRadiuses.br100,
-    borderColor: Colors.$outlineDisabled
-  },
-  gridItemCustomRenderStyle: {
-    marginBottom: Spacings.s2,
-    alignSelf: 'center'
-  },
-  containerStyle: {marginVertical: Spacings.s2}
-});
diff --git a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
index f7fdc750c2..4f1789b4b6 100644
--- a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
+++ b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
@@ -1,28 +1,181 @@
+import _ from 'lodash';
 import React, {useState} from 'react';
-import {View, Button, Incubator} from 'react-native-ui-lib';
-import {renderBooleanOption} from '../ExampleScreenPresenter';
-import {listItems, gridItems} from './ActionSheetItems';
+import {Alert, ScrollView, StyleSheet} from 'react-native';
+import {View, Button, Incubator, Text, Switch, RadioButton, RadioGroup, Typography} from 'react-native-ui-lib';
+import {listItems, gridItems, TEXT_LENGTH, OPTIONS_TYPE, State} from './ActionSheetItems';
 
 function IncubatorActionSheetScreen() {
-  const [visible, setVisible] = useState(false);
-  const [useGrid, setUseGrid] = useState(false);
+  const gridOptions = {};
+  const [actionSheetOptions, setActionSheetOptions] = useState<State>({
+    shouldShowModal: false,
+    titleLength: TEXT_LENGTH.NO_TEXT,
+    titleIsProminent: false,
+    titleIsClickable: false,
+    subtitleLength: TEXT_LENGTH.NO_TEXT,
+    showFooter: false,
+    optionsType: OPTIONS_TYPE.NONE,
+    visible: false
+  });
 
-  return (
-    <View bg-grey80 flex padding-20>
-      <Button
-        label="Show Action Sheet"
-        onPress={() => {
-          console.log(`Button pressed`);
-          setVisible(true);
-        }}
-      />
-      <View marginV-s2 gap-s1 style={{width: 150}}>
-        {renderBooleanOption('Use Grid Layout', 'useGrid', {spread: true, state: useGrid, setState: setUseGrid})}
+  const updateState = (newValues: Partial<State>) => {
+    setActionSheetOptions(prevOptions => ({
+      ...prevOptions,
+      ...newValues
+    }));
+  };
+
+  const setTitleLength = (titleLength: TEXT_LENGTH) => {
+    if (titleLength !== actionSheetOptions.titleLength) {
+      updateState({titleLength});
+    }
+  };
+
+  const toggleProminent = () => {
+    updateState({titleIsProminent: !actionSheetOptions.titleIsProminent});
+  };
+
+  const toggleClickable = () => {
+    updateState({titleIsClickable: !actionSheetOptions.titleIsClickable});
+  };
+
+  const setSubtitleLength = (subtitleLength: TEXT_LENGTH) => {
+    if (subtitleLength !== actionSheetOptions.subtitleLength) {
+      updateState({subtitleLength});
+    }
+  };
+
+  const toggleFooter = () => {
+    updateState({showFooter: !actionSheetOptions.showFooter});
+  };
+
+  const setOptionsType = (optionsType: OPTIONS_TYPE) => {
+    if (optionsType !== actionSheetOptions.optionsType) {
+      updateState({optionsType});
+    }
+  };
+
+  const showActionSheet = () => {
+    updateState({visible: true});
+  };
+
+  const setVisible = (visible: boolean) => {
+    updateState({visible});
+  };
+
+  const getTitle = () => {
+    const {titleLength} = actionSheetOptions;
+    switch (titleLength) {
+      case TEXT_LENGTH.NO_TEXT:
+        return undefined;
+      case TEXT_LENGTH.SHORT:
+      default:
+        return 'Title';
+      case TEXT_LENGTH.LONG:
+        return 'This is a very long title, perhaps too long';
+    }
+  };
+
+  const clicked = (text: string) => {
+    Alert.alert(text);
+  };
+
+  const getSubtitle = () => {
+    const {subtitleLength} = actionSheetOptions;
+    switch (subtitleLength) {
+      case TEXT_LENGTH.NO_TEXT:
+      default:
+        return undefined;
+      case TEXT_LENGTH.SHORT:
+        return 'Subtitle';
+      case TEXT_LENGTH.LONG:
+        return 'This is a very long subtitle that hopefully tests two lines';
+    }
+  };
+
+  const getHeaderProps = () => {
+    const {titleIsProminent, titleIsClickable} = actionSheetOptions;
+    const onPress = titleIsClickable ? clicked('Header clicked') : undefined;
+    const titleStyle = titleIsProminent ? {...Typography.text70BO} : undefined;
+
+    return {
+      title: getTitle(),
+      titleProps: {accessibilityLabel: 'Custom accessibility label for ActionSheet header'},
+      subtitle: getSubtitle(),
+      titleStyle,
+
+      onPress
+    };
+  };
+
+  const createGridViewItems = () => {
+    const {optionsType} = actionSheetOptions;
+    const data = optionsType === OPTIONS_TYPE.GRID_VIEW ? gridItems : gridItems.concat(gridItems).concat(gridItems);
+    return _.map(data, (quickAction, index: number) => ({
+      testID: `Option ${index + 1}`,
+      ...quickAction,
+      avoidDismiss: index === 5
+    }));
+  };
+
+  const getGridOptions = () => {
+    const {optionsType} = actionSheetOptions;
+    if (optionsType !== OPTIONS_TYPE.GRID_VIEW) {
+      return;
+    } else if (gridOptions[optionsType]) {
+      return gridOptions[optionsType];
+    }
+    gridOptions[optionsType] = createGridViewItems();
+
+    return {...gridOptions[optionsType]};
+  };
+
+  const renderRadioButton = (key: string, value: string, hasLeftMargin: boolean) => {
+    return <RadioButton testID={key} key={key} value={value} label={value} marginT-10 marginR-10={hasLeftMargin}/>;
+  };
+
+  const renderRadioGroup = (title: string,
+    data: {[s: number]: string},
+    initialValue?: string,
+    onValueChange?: (data: any) => void) => {
+    const radioButtons: React.ReactElement[] = [];
+    Object.entries(data).forEach(([key, value], index) => {
+      radioButtons.push(renderRadioButton(`${title}_${key}`, value, index !== _.size(data) - 1));
+    });
+
+    return (
+      <RadioGroup marginT-20 initialValue={initialValue} onValueChange={onValueChange}>
+        <Text>{title}:</Text>
+        <View row style={{flexWrap: 'wrap'}}>
+          {radioButtons}
+        </View>
+      </RadioGroup>
+    );
+  };
+
+  const renderTitleSwitches = () => {
+    const {titleIsProminent, titleIsClickable} = actionSheetOptions;
+
+    return (
+      <View row centerV marginT-10>
+        <Text>Prominent style:</Text>
+        <Switch testID={'prominentTitleSwitch'} value={titleIsProminent} onValueChange={toggleProminent} marginL-10/>
+        <Text marginL-40>Clickable:</Text>
+        <Switch testID={'clickableTitleSwitch'} value={titleIsClickable} onValueChange={toggleClickable} marginL-10/>
       </View>
+    );
+  };
+
+  const renderActionSheet = () => {
+    const {visible, showFooter} = actionSheetOptions;
+    const headerProps = getHeaderProps();
+    const gridOptions = getGridOptions();
+    const footerCustomElement = showFooter ? <Text red30>Footer</Text> : undefined;
 
+    return (
       <Incubator.ActionSheet
+        testID={'uilib.actionSheet'}
         visible={visible}
-        options={useGrid ? gridItems : listItems}
+        options={listItems}
         onDismiss={() => {
           console.log(`props onDismiss called!`);
           setVisible(false);
@@ -31,12 +184,44 @@ function IncubatorActionSheetScreen() {
           bottom: true,
           centerH: true,
           width: '95%',
-          headerProps: {title: 'Action Sheet', subtitle: 'sub'}
+          headerProps
         }}
-        gridOptions={useGrid ? {numColumns: 3} : undefined}
+        gridOptions={gridOptions}
+        footerCustomElement={footerCustomElement}
       />
+    );
+  };
+
+  return (
+    <View bg-grey80 flex padding-20>
+      <Text text30 grey10>
+        Action Sheet
+      </Text>
+
+      <ScrollView contentContainerStyle={styles.scrollViewContainer} testID="scrollView">
+        {renderRadioGroup('Title', TEXT_LENGTH, actionSheetOptions.titleLength, setTitleLength)}
+        {renderTitleSwitches()}
+        {renderRadioGroup('Subtitle', TEXT_LENGTH, actionSheetOptions.subtitleLength, setSubtitleLength)}
+        {renderRadioGroup('Options', OPTIONS_TYPE, actionSheetOptions.optionsType, setOptionsType)}
+        <View row centerV marginT-10>
+          <Text text65>Add footer:</Text>
+          <Switch value={actionSheetOptions.showFooter} onValueChange={toggleFooter} marginL-10/>
+        </View>
+
+        <Button testID={'uilib.openActionSheet'} marginT-30 label={'Show action sheet'} onPress={showActionSheet}/>
+        {renderActionSheet()}
+      </ScrollView>
     </View>
   );
 }
 
+const styles = StyleSheet.create({
+  dismissButton: {
+    justifyContent: 'center'
+  },
+  scrollViewContainer: {
+    paddingBottom: 12
+  }
+});
+
 export default IncubatorActionSheetScreen;
diff --git a/src/incubator/ActionSheet/index.tsx b/src/incubator/ActionSheet/index.tsx
index 6293de5215..8c6d34bcdb 100644
--- a/src/incubator/ActionSheet/index.tsx
+++ b/src/incubator/ActionSheet/index.tsx
@@ -138,12 +138,7 @@ const ActionSheet = (props: ActionSheetProps) => {
   };
 
   const renderList = () => {
-    return (
-      <View>
-        {renderActions()}
-        {footerCustomElement}
-      </View>
-    );
+    return <View>{renderActions()}</View>;
   };
 
   const _gridOptions = useMemo(() => {

From 848540d5bdef191389e5849855fcd33e10764c20 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Sat, 11 Jan 2025 19:19:18 +0200
Subject: [PATCH 7/9] refactor ActionSheetItems and IncubatorActionSheetScreen

---
 .../incubatorScreens/ActionSheetItems.tsx     | 68 ++++++++++-------
 .../IncubatorActionSheetScreen.tsx            | 74 +++++++++++++------
 src/incubator/ActionSheet/GridOptions.tsx     |  1 -
 3 files changed, 94 insertions(+), 49 deletions(-)

diff --git a/demo/src/screens/incubatorScreens/ActionSheetItems.tsx b/demo/src/screens/incubatorScreens/ActionSheetItems.tsx
index 4c6d44498c..d8a4b1fb86 100644
--- a/demo/src/screens/incubatorScreens/ActionSheetItems.tsx
+++ b/demo/src/screens/incubatorScreens/ActionSheetItems.tsx
@@ -1,5 +1,6 @@
-import {Alert} from 'react-native';
-import {Assets} from 'react-native-ui-lib';
+import React from 'react';
+import {Alert, StyleSheet} from 'react-native';
+import {Assets, BorderRadiuses, Colors, Image, ImageProps, Spacings, View} from 'react-native-ui-lib';
 
 export enum TEXT_LENGTH {
   NO_TEXT = 'No text',
@@ -18,7 +19,6 @@ export enum OPTIONS_TYPE {
   NONE = 'None',
   REGULAR = 'Regular',
   WITH_ICONS = 'With icons',
-  LONG = 'Long',
   SECTION_HEADERS = 'Section headers',
   GRID_VIEW = 'Grid view'
 }
@@ -34,10 +34,29 @@ export type State = {
   visible: boolean;
 };
 
+export const ICONS = [
+  Assets.icons.demo.settings,
+  Assets.icons.demo.refresh,
+  Assets.icons.check,
+  Assets.icons.x,
+  Assets.icons.plusSmall,
+  Assets.icons.demo.camera
+];
+
+const GRID_ITEM_CIRCLE_SIZE = 52;
+
 const pickOption = (option: string) => {
   Alert.alert(`picked: ${option}`);
 };
 
+const renderCustomItem = (imageProps: ImageProps) => {
+  return (
+    <View center style={styles.gridItemCircle}>
+      <Image {...imageProps}/>
+    </View>
+  );
+};
+
 export const listItems = [
   {title: 'Open Settings', onPress: () => pickOption('Open Settings')},
   {title: 'View Notifications', onPress: () => pickOption('View Notifications')},
@@ -60,51 +79,50 @@ export const listItems = [
 export const gridItems = [
   {
     title: 'Open Settings',
-    imageProps: {
-      source: Assets.icons.demo.settings
-    },
+    renderCustomItem: () => renderCustomItem({source: Assets.icons.demo.settings}),
     onPress: () => pickOption('Open Settings')
   },
   {
     title: 'View Notifications',
-    imageProps: {
-      source: Assets.icons.demo.refresh
-    },
+    renderCustomItem: () => renderCustomItem({source: Assets.icons.demo.refresh}),
     onPress: () => pickOption('View Notifications')
   },
   {
     title: 'Update Profile',
-    imageProps: {
-      source: Assets.icons.check
-    },
-    onPress: () => pickOption('Update Profile')
+    renderCustomItem: () => renderCustomItem({source: Assets.icons.check}),
+    onPress: () => pickOption('Update Profile'),
+    avoidDismiss: true
   },
   {
     title: 'Log Out',
-    imageProps: {
-      source: Assets.icons.x
-    },
+    renderCustomItem: () => renderCustomItem({source: Assets.icons.x}),
     onPress: () => pickOption('Log Out')
   },
   {
     title: 'Share Post',
-    imageProps: {
-      source: Assets.icons.plusSmall
-    },
+    renderCustomItem: () => renderCustomItem({source: Assets.icons.plusSmall}),
     onPress: () => pickOption('Share Post')
   },
   {
     title: 'Take Photo',
-    imageProps: {
-      source: Assets.icons.demo.camera
-    },
+    renderCustomItem: () => renderCustomItem({source: Assets.icons.demo.camera}),
     onPress: () => pickOption('Take Photo')
   },
   {
     title: 'Record Video',
-    imageProps: {
-      source: Assets.icons.demo.camera
-    },
+    renderCustomItem: () => renderCustomItem({source: Assets.icons.demo.camera}),
     onPress: () => pickOption('Record Video')
   }
 ];
+
+const styles = StyleSheet.create({
+  gridItemCircle: {
+    width: GRID_ITEM_CIRCLE_SIZE,
+    height: GRID_ITEM_CIRCLE_SIZE,
+    borderWidth: 1,
+    borderRadius: BorderRadiuses.br100,
+    borderColor: Colors.$outlineDisabled
+  },
+
+  containerStyle: {marginBottom: Spacings.s2, marginHorizontal: Spacings.s2, alignContent: 'center'}
+});
diff --git a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
index 4f1789b4b6..ef4a164a20 100644
--- a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
+++ b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
@@ -1,11 +1,10 @@
 import _ from 'lodash';
 import React, {useState} from 'react';
 import {Alert, ScrollView, StyleSheet} from 'react-native';
-import {View, Button, Incubator, Text, Switch, RadioButton, RadioGroup, Typography} from 'react-native-ui-lib';
-import {listItems, gridItems, TEXT_LENGTH, OPTIONS_TYPE, State} from './ActionSheetItems';
+import {View, Button, Incubator, Text, Switch, RadioButton, RadioGroup, Typography, Colors} from 'react-native-ui-lib';
+import {listItems, gridItems, TEXT_LENGTH, OPTIONS_TYPE, State, ICONS} from './ActionSheetItems';
 
 function IncubatorActionSheetScreen() {
-  const gridOptions = {};
   const [actionSheetOptions, setActionSheetOptions] = useState<State>({
     shouldShowModal: false,
     titleLength: TEXT_LENGTH.NO_TEXT,
@@ -102,31 +101,50 @@ function IncubatorActionSheetScreen() {
       titleProps: {accessibilityLabel: 'Custom accessibility label for ActionSheet header'},
       subtitle: getSubtitle(),
       titleStyle,
-
       onPress
     };
   };
 
-  const createGridViewItems = () => {
+  const getGridOptions = () => {
     const {optionsType} = actionSheetOptions;
-    const data = optionsType === OPTIONS_TYPE.GRID_VIEW ? gridItems : gridItems.concat(gridItems).concat(gridItems);
-    return _.map(data, (quickAction, index: number) => ({
-      testID: `Option ${index + 1}`,
-      ...quickAction,
-      avoidDismiss: index === 5
-    }));
+    if (optionsType === OPTIONS_TYPE.GRID_VIEW) {
+      return {
+        numColumns: 3
+      };
+    }
   };
 
-  const getGridOptions = () => {
+  const getList = () => {
     const {optionsType} = actionSheetOptions;
-    if (optionsType !== OPTIONS_TYPE.GRID_VIEW) {
-      return;
-    } else if (gridOptions[optionsType]) {
-      return gridOptions[optionsType];
+    switch (optionsType) {
+      case 'None':
+        return [];
+      case 'Regular':
+        return listItems;
+      case 'With icons':
+        return listItems.map((item, index) => ({
+          ...item,
+          icon: {
+            source: ICONS[index % ICONS.length],
+            tintColor: index % ICONS.length === 2 && 'red',
+            style: {marginRight: 10}
+          }
+        }));
+      case 'Grid view':
+        return gridItems.map(item => ({
+          ...item,
+          containerStyle: styles.gridItemsContainer
+        }));
+      case 'Section headers':
+        return listItems.map((item, index) => ({
+          ...item,
+          isSectionHeader: index % 3 === 0,
+          titleStyle: index % 3 === 0 && {...Typography.text65},
+          sectionHeaderStyle: styles.sectionHeaders
+        }));
+      default:
+        return [];
     }
-    gridOptions[optionsType] = createGridViewItems();
-
-    return {...gridOptions[optionsType]};
   };
 
   const renderRadioButton = (key: string, value: string, hasLeftMargin: boolean) => {
@@ -167,15 +185,22 @@ function IncubatorActionSheetScreen() {
 
   const renderActionSheet = () => {
     const {visible, showFooter} = actionSheetOptions;
+    const list = getList();
     const headerProps = getHeaderProps();
     const gridOptions = getGridOptions();
-    const footerCustomElement = showFooter ? <Text red30>Footer</Text> : undefined;
+    const footerCustomElement = showFooter ? (
+      <View style={{height: 50}} flex bg-grey70 center>
+        <Text red30 text70BO>
+          Footer
+        </Text>
+      </View>
+    ) : undefined;
 
     return (
       <Incubator.ActionSheet
         testID={'uilib.actionSheet'}
         visible={visible}
-        options={listItems}
+        options={list}
         onDismiss={() => {
           console.log(`props onDismiss called!`);
           setVisible(false);
@@ -184,6 +209,7 @@ function IncubatorActionSheetScreen() {
           bottom: true,
           centerH: true,
           width: '95%',
+          height: _.isEmpty(list) && !gridOptions ? 150 : undefined,
           headerProps
         }}
         gridOptions={gridOptions}
@@ -204,7 +230,7 @@ function IncubatorActionSheetScreen() {
         {renderRadioGroup('Subtitle', TEXT_LENGTH, actionSheetOptions.subtitleLength, setSubtitleLength)}
         {renderRadioGroup('Options', OPTIONS_TYPE, actionSheetOptions.optionsType, setOptionsType)}
         <View row centerV marginT-10>
-          <Text text65>Add footer:</Text>
+          <Text>Add footer:</Text>
           <Switch value={actionSheetOptions.showFooter} onValueChange={toggleFooter} marginL-10/>
         </View>
 
@@ -221,7 +247,9 @@ const styles = StyleSheet.create({
   },
   scrollViewContainer: {
     paddingBottom: 12
-  }
+  },
+  gridItemsContainer: {margin: 5},
+  sectionHeaders: {backgroundColor: Colors.grey60, padding: 10}
 });
 
 export default IncubatorActionSheetScreen;
diff --git a/src/incubator/ActionSheet/GridOptions.tsx b/src/incubator/ActionSheet/GridOptions.tsx
index 3953ae8d91..a609ed65bc 100644
--- a/src/incubator/ActionSheet/GridOptions.tsx
+++ b/src/incubator/ActionSheet/GridOptions.tsx
@@ -15,7 +15,6 @@ const GridOptions = React.memo((props: ActionSheetGridList) => {
   const gridItems = useMemo(() => {
     return _.map(options as ActionSheetGridItemProps[], (option, index) => {
       const customValue = {selectedIndex: index, selectedOption: option};
-      console.log(`option:`, option);
       return {
         ...option,
         onPress: () => {

From 194e090b9a8a329ba4cd2130ffccdb84da903967 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Sat, 11 Jan 2025 22:39:53 +0200
Subject: [PATCH 8/9] fix: correct import path for DialogProps in ActionSheet
 types and add headerProps to IncubatorActionSheetScreen

---
 .../src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx | 1 +
 src/incubator/ActionSheet/types.ts                              | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
index ef4a164a20..e6621aaab9 100644
--- a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
+++ b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
@@ -210,6 +210,7 @@ function IncubatorActionSheetScreen() {
           centerH: true,
           width: '95%',
           height: _.isEmpty(list) && !gridOptions ? 150 : undefined,
+          //@ts-ignore
           headerProps
         }}
         gridOptions={gridOptions}
diff --git a/src/incubator/ActionSheet/types.ts b/src/incubator/ActionSheet/types.ts
index f03cc3e96c..e6bf166968 100644
--- a/src/incubator/ActionSheet/types.ts
+++ b/src/incubator/ActionSheet/types.ts
@@ -1,5 +1,5 @@
 import {StyleProp, TextStyle, ViewStyle} from 'react-native';
-import {DialogProps} from '../Dialog';
+import {DialogProps} from '../dialog';
 import {GridListItemProps} from '../../components/gridListItem';
 import {GridViewProps} from '../../components/gridView';
 import {IconProps} from '../../components/icon';

From 4f792180471c4dfb0876d748300b00602333a1f9 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 14 Jan 2025 12:02:13 +0200
Subject: [PATCH 9/9] improve FadedScrollView structure with new isRoot prop

---
 .../incubatorScreens/ActionSheetItems.tsx     |  1 -
 .../IncubatorActionSheetScreen.tsx            |  1 -
 src/components/fadedScrollView/index.tsx      | 25 ++++++++++++++++---
 src/components/tabController/TabBar.tsx       |  1 +
 src/incubator/ActionSheet/index.tsx           | 14 ++++++-----
 5 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/demo/src/screens/incubatorScreens/ActionSheetItems.tsx b/demo/src/screens/incubatorScreens/ActionSheetItems.tsx
index d8a4b1fb86..08d0af7c7a 100644
--- a/demo/src/screens/incubatorScreens/ActionSheetItems.tsx
+++ b/demo/src/screens/incubatorScreens/ActionSheetItems.tsx
@@ -24,7 +24,6 @@ export enum OPTIONS_TYPE {
 }
 
 export type State = {
-  shouldShowModal: boolean;
   titleLength: TEXT_LENGTH;
   titleIsProminent: boolean;
   titleIsClickable: boolean;
diff --git a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
index e6621aaab9..afdf788311 100644
--- a/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
+++ b/demo/src/screens/incubatorScreens/IncubatorActionSheetScreen.tsx
@@ -6,7 +6,6 @@ import {listItems, gridItems, TEXT_LENGTH, OPTIONS_TYPE, State, ICONS} from './A
 
 function IncubatorActionSheetScreen() {
   const [actionSheetOptions, setActionSheetOptions] = useState<State>({
-    shouldShowModal: false,
     titleLength: TEXT_LENGTH.NO_TEXT,
     titleIsProminent: false,
     titleIsClickable: false,
diff --git a/src/components/fadedScrollView/index.tsx b/src/components/fadedScrollView/index.tsx
index a9472bc573..90bfbd0e94 100644
--- a/src/components/fadedScrollView/index.tsx
+++ b/src/components/fadedScrollView/index.tsx
@@ -4,7 +4,8 @@ import {
   ScrollViewProps,
   NativeSyntheticEvent,
   NativeScrollEvent,
-  LayoutChangeEvent
+  LayoutChangeEvent,
+  View
 } from 'react-native';
 import {ScrollView as GestureScrollView, GestureHandlerRootView} from 'react-native-gesture-handler';
 import Fader, {FaderProps} from '../fader';
@@ -34,6 +35,10 @@ export type FadedScrollViewProps = ScrollViewProps & {
    * Use the react-native-gesture-handler version, useful when using react-native-reanimated
    */
   useGesture?: boolean;
+  /**
+   * Whether the ScrollView is the root component of the screen, wrap the main content with GestureHandlerRootView
+   */
+  isRoot?: boolean;
   children?: React.ReactNode | React.ReactNode[];
 };
 
@@ -59,6 +64,8 @@ const FadedScrollView = (props: Props) => {
     showEndFader,
     endFaderProps,
     useGesture,
+    isRoot,
+    testID,
     ...others
   } = props;
   const ScrollView = useGesture ? GestureScrollView : RNScrollView;
@@ -105,10 +112,12 @@ const FadedScrollView = (props: Props) => {
     isScrollEnabled
   }));
 
-  if (children) {
+  const renderContent = () => {
     return (
-      <GestureHandlerRootView>
+      <View>
         <ScrollView
+          keyboardShouldPersistTaps="always"
+          testID={`${testID}.scroll`}
           scrollEventThrottle={16}
           decelerationRate={'fast'}
           {...others}
@@ -132,8 +141,16 @@ const FadedScrollView = (props: Props) => {
           position={horizontal ? Fader.position.END : Fader.position.BOTTOM}
           {...endFaderProps}
         />
-      </GestureHandlerRootView>
+      </View>
     );
+  };
+
+  if (children) {
+    if (isRoot) {
+      return <GestureHandlerRootView>{renderContent()}</GestureHandlerRootView>;
+    } else {
+      return renderContent();
+    }
   }
 
   return null;
diff --git a/src/components/tabController/TabBar.tsx b/src/components/tabController/TabBar.tsx
index 913d8f3ded..9242b96e31 100644
--- a/src/components/tabController/TabBar.tsx
+++ b/src/components/tabController/TabBar.tsx
@@ -307,6 +307,7 @@ const TabBar = (props: Props) => {
         testID={testID}
         onContentSizeChange={onContentSizeChange}
         onLayout={onLayout}
+        isRoot
       >
         <View style={tabBarContainerStyle}>{tabBarItems}</View>
         {itemsCount > 1 && (
diff --git a/src/incubator/ActionSheet/index.tsx b/src/incubator/ActionSheet/index.tsx
index 8c6d34bcdb..10c21549b9 100644
--- a/src/incubator/ActionSheet/index.tsx
+++ b/src/incubator/ActionSheet/index.tsx
@@ -121,7 +121,7 @@ const ActionSheet = (props: ActionSheetProps) => {
     );
   };
 
-  const renderActions = () => {
+  const renderList = () => {
     const {renderAction} = props;
     return (
       <View>
@@ -137,10 +137,6 @@ const ActionSheet = (props: ActionSheetProps) => {
     );
   };
 
-  const renderList = () => {
-    return <View>{renderActions()}</View>;
-  };
-
   const _gridOptions = useMemo(() => {
     if (gridOptions) {
       return {
@@ -153,7 +149,13 @@ const ActionSheet = (props: ActionSheetProps) => {
 
   const content = () => {
     return (
-      <FadedScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="always" {...props}>
+      <FadedScrollView
+        showsVerticalScrollIndicator={false}
+        showStartFader={false}
+        showEndFader
+        keyboardShouldPersistTaps="always"
+        {...props}
+      >
         {_gridOptions ? <GridOptions {..._gridOptions}/> : renderList()}
         {footerCustomElement}
       </FadedScrollView>