feat: create poll option dynamic height implementation

package/src/components/Channel/Channel.tsx

@@ -578,6 +578,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     compressImageQuality,
     CooldownTimer = CooldownTimerDefault,
     CreatePollContent,
+    createPollOptionGap,
     customMessageSwipeAction,
     DateHeader = DateHeaderDefault,
     deletedMessagesVisibilityType = 'always',
@@ -1828,6 +1829,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     compressImageQuality,
     CooldownTimer,
     CreatePollContent,
+    createPollOptionGap,
     doFileUploadRequest,
     editMessage,
     FileAttachmentUploadPreview,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -28,6 +28,7 @@ export const useCreateInputMessageInputContext = ({
   compressImageQuality,
   CooldownTimer,
   CreatePollContent,
+  createPollOptionGap,
   doFileUploadRequest,
   editMessage,
   FileAttachmentUploadPreview,
@@ -89,6 +90,7 @@ export const useCreateInputMessageInputContext = ({
       compressImageQuality,
       CooldownTimer,
       CreatePollContent,
+      createPollOptionGap,
       doFileUploadRequest,
       editMessage,
       FileAttachmentUploadPreview,

package/src/components/MessageInput/MessageInput.tsx

@@ -172,6 +172,7 @@ type MessageInputPropsWithContext = Pick<ChatContextValue, 'isOnline'> &
     | 'showPollCreationDialog'
     | 'sendMessage'
     | 'CreatePollContent'
+    | 'createPollOptionGap'
     | 'StopMessageStreamingButton'
   > &
   Pick<MessagesContextValue, 'Reply'> &
@@ -206,6 +207,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     closeAttachmentPicker,
     closePollCreationDialog,
     CreatePollContent,
+    createPollOptionGap,
     editing,
     messageInputFloating,
     messageInputHeightStore,
@@ -463,6 +465,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                 <CreatePoll
                   closePollCreationDialog={closePollCreationDialog}
                   CreatePollContent={CreatePollContent}
+                  createPollOptionGap={createPollOptionGap}
                   sendMessage={sendMessage}
                 />
               </SafeAreaViewWrapper>
@@ -486,6 +489,7 @@ const areEqual = (
     audioRecordingEnabled: prevAsyncMessagesEnabled,
     channel: prevChannel,
     closePollCreationDialog: prevClosePollCreationDialog,
+    createPollOptionGap: prevCreatePollOptionGap,
     editing: prevEditing,
     isKeyboardVisible: prevIsKeyboardVisible,
     isOnline: prevIsOnline,
@@ -505,6 +509,7 @@ const areEqual = (
     audioRecordingEnabled: nextAsyncMessagesEnabled,
     channel: nextChannel,
     closePollCreationDialog: nextClosePollCreationDialog,
+    createPollOptionGap: nextCreatePollOptionGap,
     editing: nextEditing,
     isKeyboardVisible: nextIsKeyboardVisible,
     isOnline: nextIsOnline,
@@ -525,6 +530,7 @@ const areEqual = (
   const pollCreationInputPropsEqual =
     prevOpenPollCreationDialog === nextOpenPollCreationDialog &&
     prevClosePollCreationDialog === nextClosePollCreationDialog &&
+    prevCreatePollOptionGap === nextCreatePollOptionGap &&
     prevShowPollCreationDialog === nextShowPollCreationDialog;
   if (!pollCreationInputPropsEqual) {
     return false;

package/src/components/Poll/CreatePollContent.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { StyleSheet, Switch, Text, View } from 'react-native';
 
 import { ScrollView } from 'react-native-gesture-handler';
@@ -23,7 +23,6 @@ import {
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
-import { POLL_OPTION_HEIGHT } from '../../utils/constants';
 
 const pollComposerStateSelector = (state: PollComposerState) => ({
   options: state.data.options,
@@ -40,14 +39,23 @@ export const CreatePollContent = () => {
   const { pollComposer } = messageComposer;
   const { options } = useStateStore(pollComposer.state, pollComposerStateSelector);
 
-  const { createPollOptionHeight, closePollCreationDialog, createAndSendPoll } =
-    useCreatePollContentContext();
+  const {
+    createPollOptionGap = 8,
+    closePollCreationDialog,
+    createAndSendPoll,
+  } = useCreatePollContentContext();
+  const normalizedCreatePollOptionGap =
+    Number.isFinite(createPollOptionGap) && createPollOptionGap > 0 ? createPollOptionGap : 0;
+  const optionIdsKey = useMemo(() => options.map((option) => option.id).join('|'), [options]);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
 
   // positions and index lookup map
   // TODO: Please rethink the structure of this, bidirectional data flow is not great
   const currentOptionPositions = useSharedValue<CurrentOptionPositionsCache>({
     inverseIndexCache: {},
     positionCache: {},
+    totalHeight: 0,
   });
 
   const {
@@ -61,20 +69,43 @@ export const CreatePollContent = () => {
   const styles = useStyles();
 
   useEffect(() => {
-    if (!createPollOptionHeight) return;
+    const latestOptions = optionsRef.current;
+    const currentPositions = currentOptionPositions.value;
+    const isCacheAlignedWithOptions =
+      latestOptions.length === Object.keys(currentPositions.inverseIndexCache).length &&
+      latestOptions.every(
+        (option, index) =>
+          currentPositions.inverseIndexCache[index] === option.id &&
+          currentPositions.positionCache[option.id] !== undefined,
+      );
+
+    // Avoid overwriting freshly measured heights/tops from CreatePollOptions onLayout.
+    // We only need this effect when options ids/order introduced missing cache entries.
+    if (isCacheAlignedWithOptions) {
+      return;
+    }
+
+    const previousPositionCache = currentOptionPositions.value.positionCache;
     const newCurrentOptionPositions: CurrentOptionPositionsCache = {
       inverseIndexCache: {},
       positionCache: {},
+      totalHeight: 0,
     };
-    options.forEach((option, index) => {
+    let runningTop = 0;
+    latestOptions.forEach((option, index) => {
+      const preservedHeight = previousPositionCache[option.id]?.updatedHeight ?? 0;
       newCurrentOptionPositions.inverseIndexCache[index] = option.id;
       newCurrentOptionPositions.positionCache[option.id] = {
+        updatedHeight: preservedHeight,
         updatedIndex: index,
-        updatedTop: index * createPollOptionHeight,
+        updatedTop: runningTop,
       };
+      const gap = index === latestOptions.length - 1 ? 0 : normalizedCreatePollOptionGap;
+      runningTop += preservedHeight + gap;
+      newCurrentOptionPositions.totalHeight = runningTop;
     });
     currentOptionPositions.value = newCurrentOptionPositions;
-  }, [createPollOptionHeight, currentOptionPositions, options]);
+  }, [currentOptionPositions, normalizedCreatePollOptionGap, optionIdsKey]);
 
   const onBackPressHandler = useCallback(() => {
     pollComposer.initState();
@@ -174,11 +205,11 @@ export const CreatePollContent = () => {
 export const CreatePoll = ({
   closePollCreationDialog,
   CreatePollContent: CreatePollContentOverride,
-  createPollOptionHeight = POLL_OPTION_HEIGHT,
+  createPollOptionGap = 8,
   sendMessage,
 }: Pick<
   CreatePollContentContextValue,
-  'createPollOptionHeight' | 'closePollCreationDialog' | 'sendMessage'
+  'createPollOptionGap' | 'closePollCreationDialog' | 'sendMessage'
 > &
   Pick<InputMessageInputContextValue, 'CreatePollContent'>) => {
   const messageComposer = useMessageComposer();
@@ -199,7 +230,12 @@ export const CreatePoll = ({
 
   return (
     <CreatePollContentProvider
-      value={{ closePollCreationDialog, createAndSendPoll, createPollOptionHeight, sendMessage }}
+      value={{
+        closePollCreationDialog,
+        createAndSendPoll,
+        createPollOptionGap,
+        sendMessage,
+      }}
     >
       {CreatePollContentOverride ? <CreatePollContentOverride /> : <CreatePollContent />}
     </CreatePollContentProvider>
@@ -241,9 +277,7 @@ const useStyles = () => {
       optionCardWrapper: {
         gap: primitives.spacingMd,
       },
-      optionCardSwitch: {
-        marginRight: primitives.spacingMd,
-      },
+      optionCardSwitch: {},
     });
   }, [semantics]);
 };