How can we create a App header in reactNative

Question

I have a requirement of showing a app header with hamburger icon on left , and dropDown Selection in middle , and icon on the right side and below this , I'm showing a search bar . All these has to be added in the header part. below the searchView basically ,I have a list . How can we create the custom header like that?

samplecode:

const Drawer = createDrawerNavigator();

function MyDrawer({ navigation }) {
  return (
    <Drawer.Navigator
      initialRouteName='HomeScreen'
      screenOptions={{
        headerTitle: (props) => <HeaderComp {...props} />,
        headerStyle: {
          backgroundColor: '#051E42', //Set Header color
          height: 100,
          elevation: 15,
          shadowColor: '#000'
        },
        headerRight: () => (
          <TouchableOpacity style={{marginRight:10}}>
            <Image style={{ height: 30, width: 30, resizeMode: 'contain' }}
             source={require('./assets/cart_img.png')} 

              // source={{ uri: 'asset:/images/cart_img.png' }}
            />
          </TouchableOpacity>
        ),
        headerTintColor: 'white'
      }}
    >
      <Drawer.Screen name="HomeScreen"
        component={HomeScreen}
      />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
      <Drawer.Screen name="Settings" component={Settings} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

Header Component:

const HeaderComp = () => {
    const [searchValue, setValue] = useState('');

    return (
        <View >
            <Text style={style.headerTitle}>Custom Header</Text>
            {/* <Text style={{top:20}}>dsfskdfsfdjhsfjhs</Text> */}

        </View>
    )

}

const style = StyleSheet.create({

    headerTitle: {
        fontWeight: 'bold',
        alignItems: 'center',
        color: 'white',
        left: 60
    }
})
export default HeaderComp;