React-native Navigation Add Hamburger Icon

android, ios, react-native, react-router

Solution

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,
  }

};

Problem

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.

Original source