diff --git a/app/containers/ActionSheet/ActionSheet.tsx b/app/containers/ActionSheet/ActionSheet.tsx
index 886d8aca8..825362557 100644
--- a/app/containers/ActionSheet/ActionSheet.tsx
+++ b/app/containers/ActionSheet/ActionSheet.tsx
@@ -4,7 +4,7 @@ import React, { forwardRef, isValidElement, useEffect, useImperativeHandle, useR
 import { Keyboard } from 'react-native';
 import { Easing } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import BottomSheet, { BottomSheetBackdrop, BottomSheetProps } from '@gorhom/bottom-sheet';
 
 import { useDimensions, useOrientation } from '../../dimensions';
 import { useTheme } from '../../theme';
@@ -125,9 +125,11 @@ const ActionSheet = React.memo(
 		// when is android tablet and the input text is focused
 		const androidTablet: any = isTablet && isLandscape && !isIOS ? { android_keyboardInputMode: 'adjustResize' } : {};
 
-		const handleOnChange = (index: number) => {
+		const handleOnChange: BottomSheetProps['onChange'] = index => {
 			onChange(index);
-			index === -1 && onClose();
+			if (index === -1) {
+				return onClose();
+			}
 		};
 
 		return (
diff --git a/app/containers/ActionSheet/Provider.tsx b/app/containers/ActionSheet/Provider.tsx
index 5e034f3fb..c76f77e93 100644
--- a/app/containers/ActionSheet/Provider.tsx
+++ b/app/containers/ActionSheet/Provider.tsx
@@ -27,13 +27,13 @@ export type TActionSheetOptions = {
 export interface IActionSheetProvider {
 	showActionSheet: (item: TActionSheetOptions) => void;
 	hideActionSheet: () => void;
-	indexPosition: number;
+	actionSheetSnapIndex: number;
 }
 
 const context = React.createContext<IActionSheetProvider>({
 	showActionSheet: () => {},
 	hideActionSheet: () => {},
-	indexPosition: -1
+	actionSheetSnapIndex: -1
 });
 
 export const useActionSheet = () => useContext(context);
@@ -50,10 +50,10 @@ export const withActionSheet = (Component: React.ComponentType<any>): typeof Com
 };
 
 export const ActionSheetProvider = React.memo(({ children }: { children: React.ReactElement | React.ReactElement[] }) => {
-	const [indexPosition, setIndexPosition] = useState(-1);
+	const [actionSheetSnapIndex, setActionSheetSnapIndex] = useState(-1);
 	const ref: ForwardedRef<IActionSheetProvider> = useRef(null);
 
-	const onChange = (index: number) => setIndexPosition(index);
+	const onChange = (index: number) => setActionSheetSnapIndex(index);
 
 	const getContext = () => ({
 		showActionSheet: (options: TActionSheetOptions) => {
@@ -62,7 +62,7 @@ export const ActionSheetProvider = React.memo(({ children }: { children: React.R
 		hideActionSheet: () => {
 			ref.current?.hideActionSheet();
 		},
-		indexPosition
+		actionSheetSnapIndex
 	});
 
 	return (
diff --git a/app/containers/ReactionsList/AllTab.tsx b/app/containers/ReactionsList/AllTab.tsx
index 1d48bb863..4de9f7c16 100644
--- a/app/containers/ReactionsList/AllTab.tsx
+++ b/app/containers/ReactionsList/AllTab.tsx
@@ -66,13 +66,13 @@ const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemPro
 const AllTab = ({ reactions, getCustomEmoji }: IAllTabProps): React.ReactElement => {
 	const { height } = useWindowDimensions();
 	const paddingBottom = calculatePadding(height);
-	const { indexPosition } = useActionSheet();
+	const { actionSheetSnapIndex } = useActionSheet();
 
 	return (
 		<View style={styles.allTabContainer} testID='reactionsListAllTab'>
 			<FlatList
 				data={reactions}
-				contentContainerStyle={[styles.listContainer, indexPosition === 0 && { paddingBottom }]}
+				contentContainerStyle={[styles.listContainer, actionSheetSnapIndex === 0 && { paddingBottom }]}
 				renderItem={({ item }) => <AllReactionsListItem item={item} getCustomEmoji={getCustomEmoji} />}
 				keyExtractor={item => item.emoji}
 			/>
diff --git a/app/containers/ReactionsList/UsersList.tsx b/app/containers/ReactionsList/UsersList.tsx
index 4c65c15e5..eb7c284d9 100644
--- a/app/containers/ReactionsList/UsersList.tsx
+++ b/app/containers/ReactionsList/UsersList.tsx
@@ -12,7 +12,7 @@ import { calculatePadding } from './calculatePadding';
 const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement => {
 	const { colors } = useTheme();
 	const useRealName = useSelector((state: IApplicationState) => state.settings.UI_Use_Real_Name);
-	const { indexPosition } = useActionSheet();
+	const { actionSheetSnapIndex } = useActionSheet();
 	const { height } = useWindowDimensions();
 	const paddingBottom = calculatePadding(height);
 
@@ -25,7 +25,7 @@ const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement =>
 	return (
 		<FlatList
 			data={users}
-			contentContainerStyle={[styles.listContainer, indexPosition === 0 && { paddingBottom }]}
+			contentContainerStyle={[styles.listContainer, actionSheetSnapIndex === 0 && { paddingBottom }]}
 			ListHeaderComponent={
 				<View style={styles.emojiNameContainer}>
 					<Text style={[styles.emojiName, { color: colors.auxiliaryText }]} testID='usersListEmojiName'>