Add an ability to have custom preview

example/src/screens/Playground/Playground.tsx

@@ -1,14 +1,35 @@
 import React, { memo, useMemo } from 'react';
-import { View } from 'react-native';
+import { Alert, Text, View } from 'react-native';
 
 import { HoldItem } from 'react-native-hold-menu';
 
 import styles from './styles';
 import { useAppContext } from '../../hooks/useAppContext';
 import StyleGuide from '../../utilities/styleGuide';
+import { Pressable } from 'react-native';
 
 interface PlaygroundProps {}
 
+const PreviewComp = () => {
+  return (
+    <Pressable
+      onPress={() => {
+        Alert.alert('sss');
+      }}
+      style={{
+        width: '100%',
+        height: '100%',
+        minWidth: 200,
+        minHeight: 200,
+        backgroundColor: 'green',
+        borderRadius: 16,
+      }}
+    >
+      <Text>Presss</Text>
+    </Pressable>
+  );
+};
+
 const Playground = ({}: PlaygroundProps) => {
   const { theme } = useAppContext();
 
@@ -88,12 +109,12 @@ const Playground = ({}: PlaygroundProps) => {
     <View style={themeStyles.containerStyles}>
       <View style={[styles.column, styles.content]}>
         <View style={[styles.row]}>
-          <HoldItem items={items} menuAnchorPosition="bottom-left">
+          <HoldItem items={items} previewComponent={PreviewComp} bottom={true}>
             <View style={themeStyles.item}>
-              <View style={[themeStyles.dot, styles.bottomLeft]} />
+              <View style={[themeStyles.dot, styles.topLeft]} />
             </View>
           </HoldItem>
-          <HoldItem items={items}>
+          <HoldItem items={items} bottom={true}>
             <View style={themeStyles.item}>
               <View style={[themeStyles.dot, styles.topCenter]} />
             </View>
@@ -105,7 +126,7 @@ const Playground = ({}: PlaygroundProps) => {
           </HoldItem>
         </View>
         <View style={[styles.row]}>
-          <HoldItem items={items}>
+          <HoldItem items={items} previewComponent={PreviewComp}>
             <View style={themeStyles.item}>
               <View style={[themeStyles.dot, styles.topLeft]} />
             </View>
@@ -123,7 +144,11 @@ const Playground = ({}: PlaygroundProps) => {
         </View>
       </View>
       <View style={[themeStyles.footer, styles.row]}>
-        <HoldItem menuAnchorPosition="bottom-left" items={items}>
+        <HoldItem
+          menuAnchorPosition="bottom-left"
+          items={items}
+          previewComponent={PreviewComp}
+        >
           <View style={themeStyles.item}>
             <View style={[themeStyles.dot, styles.bottomLeft]} />
           </View>

example/src/screens/Whatsapp/MessageItem.tsx

@@ -1,15 +1,57 @@
 import React, { memo, useMemo } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, Alert, TouchableOpacity } from 'react-native';
 
 import StyleGuide from '../../utilities/styleGuide';
 
-import { MessageStyles } from './variables';
+import {
+  MessageStyles,
+  ReactionContainerStyles,
+  ReactionStyles,
+} from './variables';
 import { useAppContext } from '../../hooks/useAppContext';
 
 // React Native Hold Menu Components
-import { HoldItem } from 'react-native-hold-menu';
+import { HoldItem, PreviewComponentProps } from 'react-native-hold-menu';
 import { IS_IOS } from '../../constants';
 
+const MessagePreview = ({ children, close }: PreviewComponentProps) => {
+  const { theme } = useAppContext();
+
+  const triggerReaction = () => {
+    Alert.alert('Reaction pressed');
+    close();
+  };
+
+  return (
+    <>
+      <View style={ReactionContainerStyles(theme)}>
+        <TouchableOpacity
+          style={ReactionStyles(theme)}
+          onPress={triggerReaction}
+        />
+        <TouchableOpacity
+          style={ReactionStyles(theme)}
+          onPress={triggerReaction}
+        />
+        <TouchableOpacity
+          style={ReactionStyles(theme)}
+          onPress={triggerReaction}
+        />
+        <TouchableOpacity
+          style={ReactionStyles(theme)}
+          onPress={triggerReaction}
+        />
+        <TouchableOpacity
+          style={ReactionStyles(theme)}
+          onPress={triggerReaction}
+        />
+      </View>
+
+      {children}
+    </>
+  );
+};
+
 const MessageItemComp = ({
   senderMenu,
   receiverMenu,
@@ -57,6 +99,8 @@ const MessageItemComp = ({
           maxWidth: '80%',
         }}
         closeOnTap
+        previewComponent={MessagePreview}
+        anchorEdge="bottom"
       >
         <View
           style={[
@@ -78,7 +122,6 @@ export default MessageItem;
 
 const styles = StyleSheet.create({
   messageContainer: {
-    position: 'relative',
     width: '100%',
     display: 'flex',
     flexDirection: 'column',

example/src/screens/Whatsapp/variables.ts

@@ -15,3 +15,24 @@ export const MessageStyles = (fromMe: boolean, theme: 'light' | 'dark') => {
           StyleGuide.palette.whatsapp[theme].messageBackgroundReceiver,
       };
 };
+
+export const ReactionContainerStyles = (theme: 'light' | 'dark') => {
+  return {
+    borderRadius: StyleGuide.spacing,
+    backgroundColor:
+      StyleGuide.palette.whatsapp[theme].reactionContainerBackground,
+    marginBottom: StyleGuide.spacing,
+    flexGrow: 0,
+    flexDirection: 'row',
+  } as const;
+};
+
+export const ReactionStyles = (theme: 'light' | 'dark') => {
+  return {
+    borderRadius: StyleGuide.spacing * 2,
+    backgroundColor: StyleGuide.palette.whatsapp[theme].reactionBackground,
+    width: 30,
+    height: 30,
+    margin: StyleGuide.spacing,
+  };
+};

example/src/utilities/styleGuide.ts

@@ -26,12 +26,16 @@ const StyleGuide = {
         messageBackgroundSender: 'rgb(218, 248, 201)',
         messageBackgroundReceiver: '#FFF',
         messageText: '#474747',
+        reactionContainerBackground: '#FFF',
+        reactionBackground: '#474747',
       },
       dark: {
         chatBackground: '#131415',
         messageBackgroundSender: '#075E54',
         messageBackgroundReceiver: '#2b2d2e',
         messageText: '#FFF',
+        reactionContainerBackground: '#2b2d2e',
+        reactionBackground: '#FFF',
       },
     },
     telegram: {