Cannot install the dependency.

[Qy742698]

Can't this third-party library be dependent on npm?

[vonovak]

Hello and thanks for asking,
I don't know what the question is to be honest, can you explain yourself better?
Thank you 🙂

[tbell-woG]

Hello, I am constantly getting this message: Unable to resolve "react-navigation-header-buttons" from "src/navigation/LifelineNavigator.js" after updating my mobile app project to Expo SDK 52 and React 18. I have properly npm installed it and included it in my NavigationOptions for the headerLeft, but I keep getting this error. Does anyone have a clue on what the issue could be? Included is my code for my navigator file.

import React from "react"; import { View, BlurView, StyleSheet, Image, TouchableOpacity, SafeAreaView, ScrollView, Dimensions, Text, Button } from "react-native"; import { createStackNavigator, TransitionPresets, } from "@react-navigation/stack"; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createDrawerNavigator, DrawerItems } from "@react-navigation/drawer"; import { FontAwesome, FontAwesome5, SimpleLineIcons, MaterialIcons, Ionicons, } from "@expo/vector-icons"; import { HeaderButtons, Item } from "react-navigation-header-buttons"; import CustomHeaderButton from "../components/HeaderButton";

const LifelineNavigator = createStackNavigator( { Home: LifelineTabNavigator, // TodaysLifeline: TodaysLifelineScreen, // Read: ReadScreen, // Prayer: PrayerScreen, // Listen: ListenScreen, // Search: SearchScreen, }, { defaultNavigationOptions: ({ navigation }) => { return { ...defaultStackNavOptions, headerTitle: () => ( <View> <Image style={{ width: 175, height: 175, alignSelf: "center", marginBottom: 5, resizeMode: "contain", }} source={require("/Users/tamirab2/Desktop/The Lifeline Code/the-lifeline-app-2025/src/assets/images/lifeline-logo-bold-dark-blue.png")} /> </View> ), headerLeft: () => ( <HeaderButtons HeaderButtonComponent={CustomHeaderButton}> <Item title="Menu" iconName="ios-menu" onPress={() => { navigation.toggleDrawer(); }} /> </HeaderButtons> ), headerRight: () => ( <View></View> ), headerStyle: { height: 140 }, }; }, } );

Here is my package.json:
{ "name": "the-lifeline-app-2025", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo run:android", "ios": "expo run:ios", "web": "expo start --web" }, "dependencies": { "@react-native-masked-view/masked-view": "0.3.2", "@react-navigation/bottom-tabs": "^7.2.0", "@react-navigation/drawer": "^7.1.1", "@react-navigation/native": "^7.0.14", "@react-navigation/stack": "^7.1.1", "expo": "~52.0.25", "expo-media-library": "~17.0.5", "expo-splash-screen": "~0.29.20", "expo-status-bar": "~2.0.1", "react": "18.3.1", "react-native": "0.76.6", "react-native-safe-area-context": "4.12.0", "react-native-screens": "~4.4.0", "react-navigation-header-buttons": "^13.0.0", "recyclerlistview": "^4.2.1" }, "devDependencies": { "@babel/core": "^7.20.0", "@types/react": "~18.3.12", "typescript": "^5.3.3" }, "private": true, "rnpm": { "assets": [ "./src/assets/fonts" ] } }

[vonovak]

hello @tbell-woG
did you follow the installation instructions? https://github.com/vonovak/react-navigation-header-buttons/blob/master/INSTALL.md#installation--setup
maybe try version 12, it has almost the same API

Also, as a general advice, I'd recommend not to use blank spaces in project paths (never - regardless of what kind of development you're doing)... it usually works until it doesn't. It's best to use underscores instead of spaces.

[tbell-woG]

Hello @vonovak
Thank you so much for taking the time to respond to my question! I truly appreciate it from the bottom of my heart because it is hard to find help on my "lonely coding island" lol.

I tried to follow the steps to the best of my ability, but unfortunately, I am still a novice in React Native and am still getting the error message. 😭 I am doing something wrong.

Maybe you could point out my error?

1. I changed "react-navigation-header-buttons" from version "^13.0.0" to "^12.0.0" in my package.json. It looks like this:

3. I created a tsconfig.json. It looks like this:

{ "compilerOptions": { "module": "ESNext", "moduleResolution": "Bundler" }, "extends": "expo/tsconfig.base" }

4. I created a metro.config.js. It looks like this:

// if you use Expo:
const config = getDefaultConfig(__dirname);
// unstable_enablePackageExports: true,
config.resolver.unstable_enablePackageExports = true;
module.exports = config;

// if you use bare React Native:
// const config = {
//   resolver: {
//     unstable_enablePackageExports: true,
//   },
// };
module.exports = mergeConfig(getDefaultConfig(__dirname), config);

5. I deleted my node modules and npm installed them all over again, so that I could use the depreciated version (v.12) of "react-navigation-header-buttons".
6. I am stuck on the 4th step in the installation instructions. This is where I need more clarity (because I am still a novice😩🤦🏽‍♀️). Here are the screenshots of my navigator file.

My imports:

The HeaderButton Component:

P.S. Thank you for pointing out the blank space in my project's root folder name. That totally slipped my radar.

Thanks once again. I truly appreciate you taking the time to help me out!

[vonovak]

Hi! With version 12 you don't need to do the custom metro setup at all iirc. You can change the "tag" in the github page of the repo to see what the docs looked like for v12.

If that doesn't help, I'll need to have access to a repository where the problem you experience is present. This is called a Minimal, Reproducible Example - this is because people can't debug code from screenshots - there's potentially a lot at play.

Thank you 🙂

[tbell-woG]

Hello Vonovak! Thank you for your response! I truly appreciate all of your help. And sorry for the delay. I am juggling school, work, and family while trying to work on this project. So I had to take a little pause on my project. But I'm back now!

Nonetheless, I looked at v12 on your GitHub and can see the difference with the metro.config.js. But I am still a little confused, so before I touch it even more and make a bigger mistake, I just made you a collaborator in my Github repo if you want to take a look. You should have received a notification.

But if that does not work, I think I will just rebuild the app from scratch. Thanks so much for all your help!