@100mslive/react-native-room-kit/lib/module/components/HLSChatMessages.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 { FlatList, Platform, StyleSheet, View } from 'react-native';
import { useSelector } from 'react-redux';
import { HMSHLSMessage } from './HMSHLSMessage';
import { ChatBanner, PinnedMessages } from './Chat';
import { MessageOptionsBottomSheet } from './Chat/MessageOptionsBottomSheet';
export const HLSChatMessages = () => {
  const messages = useSelector(state => state.messages.messages);
  const _keyExtractor = React.useCallback(item => item.messageId, []);
  const _renderItem = React.useCallback(data => {
    return /*#__PURE__*/React.createElement(HMSHLSMessage, {
      message: data.item
    });
  }, []);
  return /*#__PURE__*/React.createElement(View, {
    style: {
      flex: 1,
      paddingHorizontal: 16
    }
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(PinnedMessages, null), messages.length > 0 ? /*#__PURE__*/React.createElement(FlatList, {
    inverted: true,
    data: messages,
    contentContainerStyle: {
      flexGrow: 1,
      justifyContent: 'flex-end'
    },
    showsVerticalScrollIndicator: Platform.OS !== 'android'
    // 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
  }) : /*#__PURE__*/React.createElement(ChatBanner, null)), /*#__PURE__*/React.createElement(MessageOptionsBottomSheet, null));
};
const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});
//# sourceMappingURL=HLSChatMessages.js.map