I want to add a filter icon on navigation header in react-native but i dont have any idea about it

Question

here i try to add icon in navigation header but is show error that object is not a function

   <Stack.Screen
              name="Address"
              component={Address}
              options={{ headerLeft: <MaterialCommunityIcons name="heart" /> }}
            />

Answer 1

Check below working code:

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';

const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Search"
        onPress={() => navigation.navigate('Search')}
      />
    </View>
  );
}

function EmptyScreen() {
  return <View />;
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Group
          screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{
              headerRight: () =><MaterialCommunityIcons name="heart" />,
            }}
          />
          <Stack.Screen name="Profile" component={EmptyScreen} />
        </Stack.Group>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Hope it will help you!

Answer 2

Have you tried like this:-

      <Stack.Screen
                  name="Address"
                  component={Address}
                  options={{ 
                  headerLeft: () => (
                        <MaterialCommunityIcons name="heart" />),
                />