How to use the react-native-vector-icons/MaterialIcons.default function in react-native-vector-icons

import React from 'react';
import { View, Text, TouchableHighlight, TouchableOpacity } from 'react-native';

const IconMap = {
    fontAwesome: require('react-native-vector-icons/FontAwesome').default,
    feather: require('react-native-vector-icons/Feather').default,
    antDesign: require('react-native-vector-icons/AntDesign').default,
    entypo: require('react-native-vector-icons/Entypo').default,
    evilIcons: require('react-native-vector-icons/EvilIcons').default,
    foundation: require('react-native-vector-icons/Foundation').default,
    ionicons: require('react-native-vector-icons/Ionicons').default,
    materialCommunityIcons: require('react-native-vector-icons/MaterialCommunityIcons').default,
    materialIcons: require('react-native-vector-icons/MaterialIcons').default,
    octicons: require('react-native-vector-icons/Octicons').default,
    simpleLineIcons: require('react-native-vector-icons/SimpleLineIcons').default,
    zocial: require('react-native-vector-icons/Zocial').default,
};

export default class IconComponent extends React.PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        const { iconFont, iconName, iconColor, onPress, style } = this.props;
        const IC = IconMap[iconFont];
        return (

render() {
        const textStyle = { paragraph: styles.text, strong: styles.textBold };
        return (React.createElement(react_native_1.View, { style: styles.container },
            React.createElement(react_native_1.Text, { style: styles.title }, "Thank you"),
            React.createElement(react_native_1.View, { style: styles.iconView },
                React.createElement(MaterialIcons_1.default, { name: "check", size: 24, color: colors_1.colors.white })),
            React.createElement(react_native_1.Text, { style: { marginBottom: grid_1.grid.unit } },
                React.createElement(react_native_1.Text, { style: styles.text }, "Your "),
                React.createElement(react_native_1.Text, { style: styles.textBold }, "PIN Code"),
                React.createElement(react_native_1.Text, { style: styles.text }, " has been saved.")),
            React.createElement(react_native_1.Text, { style: styles.text }, "Let's start your application now.")));
    }
}

render() {
    const { name, title, size, color, pack, onPress } = this.props;
    const iconPack = pack ? pack : DEFAULT_ICON_PACK;

    const Icon =
      iconPack === "community"
        ? require("react-native-vector-icons/MaterialCommunityIcons").default
        : require("react-native-vector-icons/MaterialIcons").default;

    const sizeStyle = size
      ? {
          width: size * SCALE_RATIO,
          height: size * SCALE_RATIO,
          borderRadius: size * SCALE_RATIO * 2
        }
      : null;

    return (

export const MaterialIcons = require('react-native-vector-icons/MaterialIcons')
  .default;

this.renderIcon = () => {
            return (React.createElement(react_native_1.View, { style: this.props.styleViewIcon ? this.props.styleViewIcon : styles.viewIcon }, this.props.lockedIconComponent ?
                this.props.lockedIconComponent :
                React.createElement(MaterialIcons_1.default, { name: this.props.nameIcon ? this.props.nameIcon : "lock", size: this.props.sizeIcon ? this.props.sizeIcon : 24, color: this.props.colorIcon ? this.props.colorIcon : colors_1.colors.white })));
        };
        this.renderErrorLocked = () => {

constructor(props) {
    super(props)
    this.iconLoaded = false
    if (props.iconRenderer) {
      Icon = props.iconRenderer
      this.iconLoaded = true
    } else {
      Icon = require('react-native-vector-icons/MaterialIcons').default
      this.iconLoaded = true

    }
    
    this.state = {
      selector: false,
      searchTerm: '',
      highlightedChildren: [],
      styles: StyleSheet.flatten([defaultStyles, props.styles]),
      colors: StyleSheet.flatten([defaultColors, props.colors]),
    }
  }

}), onPress: () => {
                    if (this.state.password.length > 0) {
                        const newPass = this.state.password.slice(0, -1);
                        this.setState({ password: newPass });
                        if (this.props.getCurrentLength)
                            this.props.getCurrentLength(newPass.length);
                    }
                }, accessible: true, accessibilityLabel: this.props.buttonDeleteText
                    ? this.props.buttonDeleteText
                    : textDeleteButtonDefault },
                React.createElement(react_native_1.View, { style: this.props.styleColumnDeleteButton
                        ? this.props.styleColumnDeleteButton
                        : styles.colIcon }, this.props.customBackSpaceIcon ?
                    this.props.customBackSpaceIcon :
                    React.createElement(react_native_1.View, null,
                        !this.props.iconButtonDeleteDisabled && (React.createElement(MaterialIcons_1.default, { name: this.props.styleDeleteButtonIcon
                                ? this.props.styleDeleteButtonIcon
                                : "backspace", size: this.props.styleDeleteButtonSize
                                ? this.props.styleDeleteButtonSize
                                : 30, color: this.state.colorDelete, style: { opacity: opacity } })),
                        React.createElement(react_native_1.Text, { style: [
                                this.props.styleDeleteButtonText
                                    ? this.props.styleDeleteButtonText
                                    : styles.textDeleteButton,
                                { color: this.state.colorDelete, opacity: opacity }
                            ] }, this.props.buttonDeleteText
                            ? this.props.buttonDeleteText
                            : textDeleteButtonDefault)))));
        };
        this.renderTitle = (colorTitle, opacityTitle, attemptFailed, showError) => {