React-native-elements display all icons as square shape

Question

I'm creating a mobile app using react-native-elements. Whenever I'm using icons in the app, no matter what the icon is, it is displayed as a square. I followed the docs but couldn't get it working.

Here is how it renders icons.

In the first and second places, I want to place hamburger icon and a search icon respectively, but it is displayed as squares.

corresponding code

import React from 'react';
import { Header,Text } from 'react-native-elements'
import { Icon } from 'react-native-elements'

const Menu = (props) => {
    return(
        <Icon
  name='menu' onPress={ () => {
    props.navigation.openDrawer()
}}/>

    )
}

const ActionBar = props => {
    return (
        <Header
        placement="left"
        leftComponent={<Menu navigation={props.navigation}/>}
        centerComponent={{ text: 'OnTask', style: { fontSize: 20,color: '#fff' } }}
        rightComponent={{ icon: 'search', color: '#fff' }}
      />
    );
};

export default ActionBar;

Answer 1

After looking at React Native docs about auto linking, I came to the conclusion that auto linking works well only with NPM. Since I used Yarn, I ran react-native link react-native-vector-icons in the project folder and the problem was solved.