TypeError: (0, _native.useTheme) is not a function. (In '(0, _native.useTheme)()', '(0, _native.useTheme)' is undefined)

Question

I created a drawerNavigator and now I'm trying to add an icon to the header. The issue is when I add my HeaderButton I get this error:

Component exception

In the navigationOptions I tried to use both HeaderButton and CustomHeaderButton but it doesn't work and I can't seem to figure out the issue.

This is my code:

HeaderButton.js

import React from "react";
import { HeaderButton } from "react-navigation-header-buttons";
import { Ionicons } from "@expo/vector-icons";

const CustomHeaderButton = (props) => {
  return (
    <HeaderButton
      {...props}
      IconComponent={Ionicons}
      iconSize={23}
      color="black"
    />
  );
};

export default CustomHeaderButton;

WelcomeScreen.js

import React from "react";
import { View, Text, StyleSheet, ImageBackground, Image } from "react-native";
import MainButton from "../components/MainButton";
import Colors from "../constants/Colors";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import HeaderButton from "../components/HeaderButton";

const WelcomeScreen = (props) => {
  return (
    <ImageBackground
      source={require("../assets/images/tsl.jpg")}
      style={styles.backgroundImage}
    >
      <Image
        source={require("../assets/images/slogan.jpg")}
        style={styles.logo}
      />
      <View style={styles.buttonContainer}>
        <MainButton
          onPress={() => {
            props.navigation.navigate({
              routeName: "UserLogin",
            });
          }}
        >
          User Login
        </MainButton>
        <MainButton
          onPress={() => {
            props.navigation.navigate({ routeName: "DriverLogin" });
          }}
        >
          Driver Login
        </MainButton>
        <View style={styles.newAccountContainer}>
          <Text style={styles.newAccountText}>Don't have an account?</Text>
        </View>
        <View style={styles.registerContainer}>
          <MainButton style={styles.registerButton}>Register now</MainButton>
        </View>
      </View>
    </ImageBackground>
  );
};

WelcomeScreen.navigationOptions = {
  headerLeft: (
    <HeaderButtons HeaderButtonComponent={HeaderButton}>
      <Item title="Menu" iconName="ios-menu" />
    </HeaderButtons>
  ),
};

Thank you!

Answer 1

For everybody who will get error (on Max's course, vid 173 :) ):

TypeError: (0, _native.useTheme) is not a function. (In '(0, _native.useTheme)()', '(0, _native.useTheme)' is undefined)

Try to add npm i --save @react-navigation/native

If it doesn't help, delete node_modules & package-lock.json, check & update your package.json to correct versions. Here is my dependencies:

"dependencies": {
    "@expo/vector-icons": "^12.0.5",
    "@react-navigation/native": "^5.9.4",
    "expo": "40.0.0",
    "expo-app-loading": "^1.0.1",
    "expo-font": "~8.4.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-screens": "~2.15.2",
    "react-native-web": "^0.13.12",
    "react-navigation": "^4.4.4",
    "react-navigation-drawer": "^2.7.0",
    "react-navigation-header-buttons": "^6.3.1",
    "react-navigation-stack": "^2.10.4",
    "react-navigation-tabs": "^2.11.0",
    "react-redux": "^7.2.4",
    "redux": "^4.1.0",
    "redux-devtools-extension": "^2.13.9"

After you'll done this, just run npm install.

I hope that it will helps somebody. Learn and enjoy!=)

Answer 2

I had the same issue and I did npm i --save @react-navigation/native since the error stated that useTheme was not found.

Answer 3

Hi I've been having this exact same issue. I'm working through a react-native course on Udemy.

Obviously this is specific to the course code etc. but I hope something here can fix your issue also.

I tried a few things so I'm not exactly sure what fixed the issue... here is what I did:

1. I changed the react-navigation and react-navigation-header-buttons vesrsions in package.json to those which are used in Max's code (3.11.1 & 3.0.1 respectively) and I think I ran npm install. (to update them?)

App didnt work, wouldnt launch error with react-navigation-header-buttons

2. ran expo update, to update packages and re-build node_modules and package-lock.json

was given a list of packages which didnt update: expo-app-loading, react-navigation, react-navigation-drawer, react-navigation-header-buttons, react-navigation-stack, react-navigation-tabs

3. ran expo install react-navigation react-navigation-drawer react-navigation-header-buttons react-navigation-stack react-navigation-tabs

4. noticed react-navigation warning that v3.13.0 wasnt supported upgrade to 4.x

ran npm install react-navigation@4 installed 4.4.4

5. react-navigation-header-buttons was still at an older version 3.0.5, so I ran npm install react-navigation-header-buttons@6 installed 6.3.1

6. npm start - Apps are working on emulator and physical device!

My working app now has the following dependencies (in package.json):

"expo": "~40.0.0",
"expo-app-loading": "^1.0.1",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.15.2",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.0",
"react-navigation-header-buttons": "^6.3.1",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.0"