@100mslive/react-native-room-kit/lib/module/components/HMSHLSMessageList.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 { StyleSheet, View, useWindowDimensions } from 'react-native';
import { useSelector } from 'react-redux';
import { FlashList } from '@shopify/flash-list';
import { useIsLandscapeOrientation } from '../utils/dimension';
import { HMSOverlayMessageView } from './HMSOverlayMessageView';
export const HMSHLSMessageList = () => {
  const {
    height: windowHeight
  } = useWindowDimensions();
  const messages = useSelector(state => state.messages.messages);
  const isLandscapeOrientation = useIsLandscapeOrientation();
  const _keyExtractor = React.useCallback(item => item.messageId, []);
  const _renderItem = React.useCallback(data => {
    return /*#__PURE__*/React.createElement(HMSOverlayMessageView, {
      message: data.item
    });
  }, []);
  if (messages.length <= 0) {
    return null;
  }
  const HEIGHT_MULTIPLIER = isLandscapeOrientation ? 0.42 : 0.25;
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.container, {
      maxHeight: windowHeight * HEIGHT_MULTIPLIER,
      height: messages.length > 3 ? windowHeight * HEIGHT_MULTIPLIER : messages.length * 66
    }]
  }, /*#__PURE__*/React.createElement(FlashList, {
    data: messages,
    inverted: true,
    estimatedItemSize: 62,
    contentContainerStyle: {
      paddingBottom: 30
    }
    // contentContainerStyle={styles.listContentContainer} // Bug: Android inverted flashlist will apply padding on left when `paddingRight: 12` is applied
    ,
    keyboardShouldPersistTaps: "always"
    // ListEmptyComponent={ChatBanner}
    // 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
  }));
};
const styles = StyleSheet.create({
  container: {
    position: 'relative',
    marginVertical: 8,
    marginHorizontal: 16
  }
});
//# sourceMappingURL=HMSHLSMessageList.js.map