skip to Main Content

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" /> }}
            />

2

Answers


  1. Have you tried like this:-

          <Stack.Screen
                      name="Address"
                      component={Address}
                      options={{ 
                      headerLeft: () => (
                            <MaterialCommunityIcons name="heart" />),
                    />
    
    Login or Signup to reply.
  2. 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!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search