Replace search icon in react-native-paper searchbar with icons from MaterialCommunityIcons

Question

I want to change the search icon in the searchbar of react-native-paper with the barcode-scan icon.
The native-paper uses react-native-vector-icons for icons and barcode-scan available in MaterialCommunityIcons
Here is the code that I tried which gives a blank instead of an icon

import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
<Searchbar
  placeholder="Search"
  onChangeText={query => { this.setState({ firstQuery: query }); }}
  value={firstQuery}
  icon={<MaterialCommunityIcon name="barcode-scan" size={30}/>}
/>

Is this the right way or am I missing something?

Answer 1

You have to use the callback to pass component in icon prop

icon={() => <MaterialCommunityIcons name="barcode-scan" size={30}/>}