1import React from 'react'; 2import rpx from '@/utils/rpx'; 3import {StyleSheet, Text, View} from 'react-native'; 4import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; 5import {fontSizeConst} from '@/constants/uiConst'; 6import useColors from '@/hooks/useColors'; 7 8interface IToastBaseProps { 9 text: string; 10 iconName: string; 11 iconColor: string; 12} 13function ToastBase(props: IToastBaseProps) { 14 const {text, iconName, iconColor} = props; 15 const colors = useColors(); 16 return ( 17 <View 18 style={[ 19 styles.toastBasic, 20 { 21 backgroundColor: colors.backdrop, 22 }, 23 ]}> 24 <Icon 25 style={[styles.icon]} 26 name={iconName} 27 color={iconColor ?? colors.text} 28 /> 29 <Text style={[styles.text, {color: colors.text}]} numberOfLines={2}> 30 {text} 31 </Text> 32 </View> 33 ); 34} 35 36const toastConfig = { 37 success: ({text1}: any) => ( 38 <ToastBase text={text1} iconName="check-circle" iconColor="#457236" /> 39 ), 40 warn: ({text1}: any) => ( 41 <ToastBase text={text1} iconName="alert-circle" iconColor="#de7622" /> 42 ), 43}; 44 45export default toastConfig; 46 47const styles = StyleSheet.create({ 48 toastBasic: { 49 width: rpx(600), 50 height: rpx(84), 51 borderRadius: rpx(48), 52 backgroundColor: '#fbeee2', 53 flexDirection: 'row', 54 alignItems: 'center', 55 zIndex: 20000, 56 }, 57 text: { 58 fontSize: fontSizeConst.content, 59 includeFontPadding: false, 60 marginLeft: fontSizeConst.tag, 61 width: rpx(488), 62 color: '#333333', 63 }, 64 icon: { 65 fontSize: fontSizeConst.appbar, 66 includeFontPadding: false, 67 marginLeft: fontSizeConst.content, 68 }, 69}); 70