@100mslive/react-native-room-kit/lib/module/components/Chat/ChatList.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { FlashList
// FlashListProps
} from '@shopify/flash-list';
import { Platform, StyleSheet, View } from 'react-native';
import { useSelector } from 'react-redux';
import { ChatMessage } from './ChatMessage';
import { ChatBanner } from './ChatBanner';
import { PinnedMessages } from './PinnedMessages';
import { useIsAllowedToSendMessage } from '../../hooks-util';
const _ChatList = ({
  style
}) => {
  const flashlistRef = React.useRef(null);
  const isAllowedToSendMessage = useIsAllowedToSendMessage();
  const messages = useSelector(state => state.messages.messages);
  const _keyExtractor = React.useCallback(item => item.messageId, []);
  const _renderItem = React.useCallback(data => {
    return /*#__PURE__*/React.createElement(ChatMessage, {
      message: data.item
    });
  }, []);
  return /*#__PURE__*/React.createElement(View, {
    style: [chatListStyle.list, isAllowedToSendMessage ? chatListStyle.bottomSpace : null, style]
  }, /*#__PURE__*/React.createElement(PinnedMessages, null), messages.length > 0 ? /*#__PURE__*/React.createElement(FlashList, {
    ref: flashlistRef,
    data: messages,
    inverted: true,
    estimatedItemSize: 75,
    showsVerticalScrollIndicator: Platform.OS !== 'android'
    // contentContainerStyle={chatListStyle.listContentContainer} // Bug: Android inverted flashlist will apply padding on left when `paddingRight: 12` is applied
    ,
    keyboardShouldPersistTaps: "always"
    // ItemSeparatorComponent={() => <View style={{ height: 16 }} />} // TODO: There is a bug related to this: https://github.com/Shopify/flash-list/issues/638
    ,
    renderItem: _renderItem,
    keyExtractor: _keyExtractor
  }) : /*#__PURE__*/React.createElement(ChatBanner, null));
};
const chatListStyle = StyleSheet.create({
  list: {
    flex: 1,
    marginTop: 8
  },
  bottomSpace: {
    marginBottom: 16
  },
  listContentContainer: {
    paddingRight: 8
  }
});
export const ChatList = /*#__PURE__*/React.memo(_ChatList);
//# sourceMappingURL=ChatList.js.map