callstack / callstack/react-native-paper

Bottom Tab with expo-router 3

Open
#4,346 5 comments 7 reactions 0 assignees View on GitHub
question
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

Scouring from net I was able to have expo-router use react-native-paper bottom tabs. However `screenOptions` and `tabBarIcon` is having error in typescript.

```
import {
createMaterialBottomTabNavigator,
MaterialBottomTabNavigationOptions,
MaterialBottomTabNavigationEventMap,
} from "react-native-paper/react-navigation";

import { TabNavigationState, ParamListBase } from "@react-navigation/native";

import { withLayoutContext } from "expo-router";
import {
BottomTabNavigationEventMap,
BottomTabNavigationOptions,
} from "@react-navigation/bottom-tabs";

const BottomTabNavigator = createMaterialBottomTabNavigator().Navigator;

export const MaterialBottomTabs = withLayoutContext<
MaterialBottomTabNavigationOptions | BottomTabNavigationOptions,
typeof BottomTabNavigator,
TabNavigationState,
MaterialBottomTabNavigationEventMap | BottomTabNavigationEventMap
>(BottomTabNavigator);

```

What is the proper way of integrating expo-router to react-native-paper's bottom tab without having to resolve to using any on `screenOptions` and manually typing the `tabBarIcon` option

Contributor guide

Open the contributing guide

Research direction

Use the supplied MaterialBottomTabs snippet as the entry point, focusing on withLayoutContext and the react-native-paper navigation types. Reproduce the TypeScript errors for screenOptions and tabBarIcon, then determine whether the integration can expose both options without any or manual option typing; done means the example type-checks cleanly.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.