React-native Navigation Add Hamburger Icon

Question

Im tring to add Hamburger icon to open Drawer on react-native.but im getting this error

Objects are not valid as a React child (found: object with keys {left}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

Check the render method of `View`.

This is routes.js

import { StackNavigator, TabNavigator, DrawerNavigator } from 'react-navigation';

const DrawerIcon = ({ navigate }) => {

return(
        <Icon
            name = "md-menu"
            size = {38}
            color = "black"
            style = {{paddingLeft : 20}}
            onPress = {() => navigate('DrawerOpen')}
/>

    );
};

export const Stack1 = StackNavigator({
    Screen1: {
        screen: screen1,
        navigationOptions: {
            header: ( props ) => ({
                left: <DrawerIcon { ...props } />
            }),
        }
    },
    Screen2: {
        screen: screen2,
    },
    Screen3: {
        screen: screen3,
    },



})

export const Drawer = DrawerNavigator({
    Home:{
        screen: Stack1,
        navigationOption: {
            brawerLabel: 'Home',

        }
    },
    Camera:{
        screen: Stack2,
         navigationOption: {
            brawerLabel: 'Camera',

        }
    },
    Info:{
        screen: Stack3,
         navigationOption: {
            brawerLabel: 'Info',
        }
    }
})

How can i solve this error.Thanks.

Answer 1

None of the previous answers are very scalable, so thought I'd weigh in with my solution. For completeness, I'm using react-native-vector-icons in my example.

import { StackNavigator, DrawerNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Octicons';

const MenuIcon = ({ navigate }) => <Icon 
    name='three-bars' 
    size={30} 
    color='#000' 
    onPress={() => navigate('DrawerOpen')}
/>;

const Stack = {
    FirstView: {
        screen: Login,
        navigationOptions: ({ navigation }) => ({
            headerRight: MenuIcon(navigation)
        })
    }
};

// ...Remaining navigation code etc.

This makes the assumption that you'd want the same icon to open the drawer (which really should be the majority use-case).