Functions are not valide as a React child React Native

Question

I have the next error "Functions are not valid as a React child React Native", I am trying to show a drawer when I press an image in my header (create with react-navigation-stack library), then I am using react-navigation-drawer. Everything is OK until now, the problem start when I try to pass the variable navigation to my function to use in createStackNavigator, I don't know what is the correct way to pass this variable.

I want some like this image

    import React from 'react';
    import {TouchableOpacity, Image} from "react-native";
    import {createDrawerNavigator} from "react-navigation-drawer";
    import {createStackNavigator} from 'react-navigation-stack';

    //IMPORT SCENES
    import HomeScreen from "../scenes/Home";
    import UpdateProfileScreen from "../scenes/home/UpdateProfile";

    const HomeStack = ({navigation}) => createStackNavigator(
        {
                Home: HomeScreen,
                UpdateProfile: UpdateProfileScreen,
            },
            {
                initialRouteName: 'Home',
                defaultNavigationOptions: ({
                    headerLeft: () =>
                        <TouchableOpacity style={{alignItems: 'flex-end', margin: 16}}
                                          onPress={() => navigation.openDrawer()}>
                            <Image style={{width: 24, height: 24}} source={require('../images/open-menu.png')}/>
                        </TouchableOpacity>
                })
            }
        )

    export default DrawerNavigator = createDrawerNavigator({
        HomeStack
    })

How can I fix this, I'm new to React Native.

Answer 1

Replace your HomeStack with this :

const HomeStack = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  UpdateProfile: {
    screen: UpdateProfileScreen
  },
},{
  initialRouteName: 'Home',
  defaultNavigationOptions: ({navigation}) => ({ // change here
    headerLeft: () =>
      <TouchableOpacity style={{ alignItems: 'flex-end', margin: 16 }}
        onPress={() => navigation.openDrawer()}>
        <Image style={{ width: 24, height: 24 }} source={require('../images/open-menu.png')} />
      </TouchableOpacity>
  })
})

And

Replace your DrawerNavigator with this :

export default DrawerNavigator = createDrawerNavigator({
    HomeStack: {
      screen: HomeStack
    }
})