Add React Navigation 7 Support

[szado]

Current behaviour

Currently, the Bottom Tab Navigator (react-native-paper/react-navigation) cannot be used with the latest version of react-navigation (7.x) or with the latest expo-router due to changes in the react-navigation API. The issue is that useLinkBuilder now returns an object instead of a builder function.

An error occurs: buildLink is not a function.

After a brief investigation, I noticed there was an attempt to add support for react-navigation@7, but the changes were reverted.: https://github.com/callstack/react-native-paper/pull/3958/files

The fix seems quite simple; if we're dealing with v7 (the hook value is an object) we should try to call buildHref method on it.

Docs: https://reactnavigation.org/docs/use-link-builder/

Your Environment

software	version
react-native-paper	5.13.1
expo sdk	52.0.25

[wtvamp]

PR here: #4644

[RainPlays09]

See PR: #4615

[pjmvp]

Will this be addressed soon?
The incompatibility towards React Navigation 7 prevents react-native-paper from being used with the latest version (52) of Expo.
@BogiKay , there are already 2 PRs that have proposed a fix for this. Anyone who can review/approve?

[bmatasar]

It seems the version of use-latest-callback used in React Navigation 6.x does not work with RN 0.79.x.

It would be great to merge the migration to React Navigation 7.x

[jcruzmontanari]

hi there, same issue with use-latest-callback on Card component

package.json

"dependencies": { "@react-native-async-storage/async-storage": "^2.1.2", "@react-native-community/datetimepicker": "^8.3.0", "@react-native-community/netinfo": "^11.4.1", "@react-native-vector-icons/common": "^11.0.0", "@react-native-vector-icons/fontawesome6": "^6.7.1", "@react-navigation/bottom-tabs": "^7.3.10", "@react-navigation/native": "^7.1.6", "@react-navigation/native-stack": "^7.3.10", "@realm/react": "^0.11.0", "axios": "^1.8.4", "react": "19.0.0", "react-native": "0.79.0", "react-native-element-dropdown": "^2.12.4", "react-native-gesture-handler": "^2.25.0", "react-native-get-random-values": "^1.11.0", "react-native-mmkv": "^3.2.0", "react-native-paper": "^5.13.1", "react-native-reanimated": "^3.17.3", "react-native-safe-area-context": "^5.3.0", "react-native-screens": "^4.10.0", "realm": "^20.1.0", "use-latest-callback": "^0.2.3", "uuid": "^11.1.0", "zustand": "^5.0.3" }, "devDependencies": { "@babel/core": "^7.25.2", "@babel/preset-env": "^7.25.3", "@babel/runtime": "^7.25.0", "@react-native-community/cli": "18.0.0", "@react-native-community/cli-platform-android": "18.0.0", "@react-native-community/cli-platform-ios": "18.0.0", "@react-native/babel-preset": "0.79.0", "@react-native/eslint-config": "0.79.0", "@react-native/metro-config": "0.79.0", "@react-native/typescript-config": "0.79.0", "@tsconfig/react-native": "^3.0.5", "@types/jest": "^29.5.13", "@types/react": "^19.0.0", "@types/react-test-renderer": "^19.0.0", "babel-plugin-module-resolver": "^5.0.2", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "19.0.0", "typescript": "5.0.4" },

const Component = ()=> {
return (

<Card>
        <Card.Title title="Card Title" subtitle="Card Subtitle" />
        <Card.Content>
          <Text variant="titleLarge">Card title</Text>
          <Text variant="bodyMedium">Card content</Text>
        </Card.Content>
        <Card.Cover source={{uri: 'https://picsum.photos/700'}} />
        <Card.Actions>
          <Text>Cancel</Text>
        </Card.Actions>
      </Card>
}
}

[szado]

@lukewalczak sorry for the ping, but I believe this is an urgent issue. It prevents upgrading to the latest version of RN/Expo/React Navigation.

[lukewalczak]

Hey @szado, I'm going to start the work on it today/tomorrow and will do my best to have that reviewed-merged-and released in the next week, but cannot guarantee that.

I've noticed also there are two PRs opened, for v7 support, however I believe we need to also ensure compatibility with the previous version.

[lukewalczak]

The createMaterialBottomTabNavigator has been deprecated as of [email protected]. Instead, use @react-navigation/bottom-tabs version 7.x or later, combined with BottomNavigation.Bar to achieve a Material Design look.

For implementation details, see the dedicated example.