FlashListMessagesRender

FlashListMessagesRender.js

import React, {useCallback, useMemo} from 'react';
import {View} from 'react-native';
import {OptimizedHeavyScreen} from 'react-navigation-heavy-screen';
import {toJS} from 'mobx';
import {observer} from 'mobx-react-lite';
import {ViewabilityTrackerFlatlist} from './viewabilityTracker/viewability-tracker-flashist';
import {useChatStore} from '../store/chatStoreProvider';
import {UserContextProvider} from '../../user/userHook';
import {useMessagesRenderHook} from './messagesRenderHook';
import {generateMessages} from './messageBrainer';

const keyExtractor = (item, index) => item._id;

const MessagesRenderFlashList = observer(props => {
  const {
    renderPropsMemo,
    renderMessage,
    getMoreMessages,
    renderListEmptyComponent,
    handleOnScroll,
    setMessagesRendererRef,
  } = useMessagesRenderHook(props);
  const {chatStore} = useChatStore();
  const messagesStore = useMemo(
    () => toJS(chatStore.messages),
    [chatStore.messages],
  );
  const inRoomStore = useMemo(
    () => toJS(chatStore?.allInCurrentRoomDetails),
    [chatStore.allInCurrentRoomDetails],
  );
  const inRoomisDiscussionRoomStore = useMemo(
    () => toJS(chatStore?.isDiscussionRoom),
    [chatStore.isDiscussionRoom],
  );

  const ToRenderLayer = useMemo(
    () =>
      renderPropsMemo.useUserContextProvider === false
        ? View
        : UserContextProvider,
    [renderPropsMemo.useUserContextProvider],
  );

  const memoizedMessages = useMemo(
    () =>
      generateMessages({
        data: messagesStore,
        inRoom: inRoomStore,
        isDiscussionRoom: inRoomisDiscussionRoomStore,
      }),
    [messagesStore, inRoomStore, inRoomisDiscussionRoomStore],
  );

  const renderItem = useCallback(({item, index}) => {
    return renderMessage({message: item});
  }, []);

  return (
    <OptimizedHeavyScreen style={{flex: 1}}>
      <ToRenderLayer>
        <ViewabilityTrackerFlatlist
          data={memoizedMessages}
          inverted={true}
          keyExtractor={keyExtractor}
          estimatedItemSize={70}
          initialNumToRender={8}
          maxToRenderPerBatch={2}
          onEndReachedThreshold={0.7}
          automaticallyAdjustsScrollIndicatorInsets
          automaticallyAdjustContentInsets
          contentInsetAdjustmentBehavior="automatic"
          keyboardDismissMode="on-drag"
          removeClippedSubviews={false}
          keyboardShouldPersistTaps="handled"
          ref={setMessagesRendererRef}
          onScroll={handleOnScroll}
          renderItem={renderItem}
          onEndReached={getMoreMessages}
          ListEmptyComponent={renderListEmptyComponent}
          contentContainerStyle={{
            paddingBottom: 20,
            paddingTop: 20,
          }}
        />
      </ToRenderLayer>
    </OptimizedHeavyScreen>
  );
});
export default MessagesRenderFlashList;