React-native Navigation Add Hamburger Icon

5
votes

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.

4
androidiosreact-nativereact-router

4 Answers

6
votes

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).

4
votes
static navigationOptions = ({ navigation }) => ({
    headerTitle: "Home",
    ...css.header,
    headerLeft:
    <View style={{paddingLeft:16}}>
        <Icon
            name="md-menu"
            size={30}
            color='white'
            onPress={() => navigation.navigate('DrawerOpen')} />
    </View>,
})

in the style.js class i added the constant call header 

export const header = {
  // background
  headerStyle: {
    backgroundColor: colors.secondary_blue,
  },
  // arrows
  headerTintColor: colors.text_light,
  // my own styles for titleAndIcon
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',

    alignItems: 'center',
    paddingLeft: 8,
  },
  // my own styles for titleAndIcon
  text: {

    paddingLeft: 8,
    color: colors.text_light,
    fontFamily: values.font_body,
    fontSize: values.font_title_size,
  }

};
3
votes

I use React Native Elements...provides some cool icons to spice up the menu. It comes with a lot of preset icons.

import { createStackNavigator,createDrawerNavigator, DrawerItems, SafeAreaView  }   from 'react-navigation';
import { Icon } from 'react-native-elements';

Here I have StackNavigator called AboutNavigator…

const AboutNavigator = createStackNavigator({
About:{ screen:About }
},{
navigationOptions: ({ navigation }) => ({
headerStyle: {
    backgroundColor: "#512DA8"
},
headerTitleStyle: {
    color: "#fff"            
},
headerTintColor: "#fff",
headerLeft: <Icon name='menu' size={24} color='white'
   onPress={()=> navigation.toggleDrawer()}
   />
})  
})

You'll have to install react-native-vector-icons from npm or yarn. But yes, there is actually a hamburger icon in there. Where I have named the icon 'menu', you use 'hamburger'.

Here's what the hamburger icon looks like. https://oblador.github.io/react-native-vector-icons/

In the search box, type hamburger.

2
votes
export default class Home extends React.Component {
    static navigationOptions = {
        headerTitle: "User Index",
        headerRight: <Button title="Info" onPress={()=> alert('right button')} />,
    };
    render(){
        return(<UserTabNavigator />);
    }
};

I had the same problem, the above worked for me

Pay close attention to this line

headerRight: <Button title="Info" onPress={()=> alert('right button')} />,