mediasfu-reactnative-expo
Version:
mediasfu-reactnative-expo – Expo-managed React Native WebRTC SDK for video conferencing, webinars, live streaming, broadcast, screen sharing, whiteboard, chat, recording, live subtitles, translation, and AI agent rooms on iOS, Android, and web. Prebuilt r
59 lines • 2.39 kB
JavaScript
import React from 'react';
import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
import AlertComponent from '../../components/displayComponents/AlertComponent';
import { getModernColors, getModernModalCardStyle, resolveIsDarkMode } from '../core/modernTheme';
export const ModernAlertComponent = (props) => {
const isDarkMode = resolveIsDarkMode(props);
const colors = getModernColors(isDarkMode);
const accentColor = props.type === 'danger' ? colors.danger : colors.success;
const defaultContent = (<View style={[styles.row, getModernModalCardStyle(isDarkMode)]}>
<View style={[styles.statusDot, { backgroundColor: accentColor }]}/>
<Text style={[styles.text, { color: colors.text }]}>{props.message}</Text>
</View>);
const renderContent = props.renderContent ?? (() => defaultContent);
return (<AlertComponent {...props} textColor={props.textColor ?? colors.invertedText} renderContent={renderContent} renderContainer={props.renderContainer ??
(({ dimensions }) => (<Modal transparent animationType="fade" visible={props.visible} onRequestClose={props.onHide}>
<Pressable style={[styles.overlay, props.style]} onPress={props.onHide}>
<Pressable onPress={(event) => event?.stopPropagation?.()} style={[styles.toastShell, { borderColor: accentColor }]}>
{renderContent({ defaultContent, dimensions })}
</Pressable>
</Pressable>
</Modal>))}/>);
};
const styles = StyleSheet.create({
overlay: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(15, 23, 42, 0.18)',
paddingHorizontal: 20,
},
toastShell: {
borderRadius: 18,
borderWidth: 1,
shadowColor: '#000000',
shadowOpacity: 0.22,
shadowRadius: 18,
shadowOffset: { width: 0, height: 8 },
elevation: 12,
},
row: {
flexDirection: 'row',
alignItems: 'center',
gap: 10,
paddingHorizontal: 16,
paddingVertical: 12,
},
statusDot: {
width: 10,
height: 10,
borderRadius: 5,
},
text: {
fontSize: 14,
fontWeight: '700',
textAlign: 'center',
},
});
export default ModernAlertComponent;
//# sourceMappingURL=ModernAlertComponent.js.map