@100mslive/react-native-room-kit
Version:
100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.
57 lines • 1.91 kB
JavaScript
// @ts-ignore - Ignoring React import as it is generating error while running prepack script
import React from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
import { useHMSRoomStyleSheet } from '../../hooks-util';
import { useIsLandscapeOrientation } from '../../utils/dimension';
export const ChatBanner = () => {
const isLandscapeOrientation = useIsLandscapeOrientation();
const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
title: {
color: theme.palette.on_surface_high,
fontFamily: `${typography.font_family}-SemiBold`
},
subtitle: {
color: theme.palette.on_surface_medium,
fontFamily: `${typography.font_family}-Regular`
}
}));
return /*#__PURE__*/React.createElement(View, {
style: styles.container
}, /*#__PURE__*/React.createElement(Image, {
source: require('../../assets/empty-chat-illustration/empty-chat.png'),
style: isLandscapeOrientation ? styles.landscapeCoverImage : null
}), /*#__PURE__*/React.createElement(Text, {
style: [styles.title, hmsRoomStyles.title]
}, "Start a Conversation"), /*#__PURE__*/React.createElement(Text, {
style: [styles.subtitle, hmsRoomStyles.subtitle]
}, "There are no messages here yet. Start a conversation by sending a message."));
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden'
// transform: [Platform.OS === 'android' ? { scale: -1 } : { scaleY: -1 }],
},
landscapeCoverImage: {
height: '30%',
flexShrink: 1,
resizeMode: 'contain'
},
title: {
fontSize: 20,
lineHeight: 24,
letterSpacing: 0.15,
textAlign: 'center',
marginTop: 16
},
subtitle: {
fontSize: 14,
lineHeight: 20,
letterSpacing: 0.25,
textAlign: 'center',
marginTop: 8
}
});
//# sourceMappingURL=ChatBanner.js.map