refactor: toast #140

components/checkbox/style/index.tsx

@@ -1,4 +1,4 @@
-import { ViewStyle, ImageStyle, TextStyle } from 'react-native';
+import { TextStyle, ViewStyle } from 'react-native';
 import variables from '../../style/themes/default';
 
 export interface ICheckboxStyle {

components/icon/index.tsx

@@ -5,11 +5,11 @@ import {
   OutlineGlyphMapType,
 } from '@ant-design/icons-react-native';
 import variables from '../style/themes/default';
-
+export type IconNames = OutlineGlyphMapType;
 export interface IconProps extends TextProps {
   size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | number;
   color?: string;
-  name: OutlineGlyphMapType;
+  name: IconNames;
 }
 
 export default class Icon extends React.Component<IconProps, any> {

components/toast/ToastContainer.tsx

@@ -1,14 +1,8 @@
 // tslint:disable:jsx-no-multiline-js
 
 import React from 'react';
-import {
-  ActivityIndicator,
-  Animated,
-  Image,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import { ActivityIndicator, Animated, StyleSheet, Text, View } from 'react-native';
+import Icon, { IconNames } from '../icon';
 import ToastContainerStyle, { IToastStyle } from './style/index';
 
 export interface ToastProps {
@@ -79,11 +73,11 @@ export default class ToastContainer extends React.Component<ToastProps, any> {
     const { type = '', content, mask } = this.props;
     const styles = this.props.styles!;
     const iconType: {
-      [key: string]: any;
+      [key: string]: IconNames;
     } = {
-      success: require('./images/success.png'),
-      fail: require('./images/fail.png'),
-      offline: require('./images/offline.png'),
+      success: 'check-circle',
+      fail: 'close-circle',
+      offline: 'frown',
     };
 
     let iconDom: React.ReactElement<any> | null = null;
@@ -99,7 +93,14 @@ export default class ToastContainer extends React.Component<ToastProps, any> {
     } else if (type === 'info') {
       iconDom = null;
     } else {
-      iconDom = <Image source={iconType[type]} style={styles.image} />;
+      iconDom = (
+        <Icon
+          name={iconType[type]}
+          style={styles.image}
+          color="white"
+          size={32}
+        />
+      );
     }
 
     return (

components/toast/style/index.tsx

@@ -1,5 +1,5 @@
 import variables from '../../style/themes/default';
-import { Platform, ViewStyle, ImageStyle, TextStyle } from 'react-native';
+import { Platform, ViewStyle, TextStyle } from 'react-native';
 
 export interface IToastStyle {
   container: ViewStyle;
@@ -8,7 +8,7 @@ export interface IToastStyle {
   iconToast: ViewStyle;
   textToast: ViewStyle;
   content: TextStyle;
-  image: ImageStyle;
+  image: TextStyle;
   centering: ViewStyle;
 }