evanbacon / expo-router-top-tabs Goto Github PK
View Code? Open in Web Editor NEWexperimental
License: MIT License
experimental
License: MIT License
Can't navigate using the actual tab buttons on android gives this error
ERROR TypeError: Cannot read property 'setPage' of undefined
This error is located at:
in PagerViewAdapter (created by TabView)
in RCTView (created by View)
in View (created by TabView)
in TabView (created by CollapsibleTabView)
in RCTView (created by View)
in View (created by CollapsibleTabView)
in CollapsibleTabView (created by MaterialTopTabsCollapsibleTabView)
in MaterialTopTabsCollapsibleTabView (created by MaterialTopTabNavigator)
in MaterialTopTabNavigator (created by TopTabs)
in TopTabs (created by HelpLayout)
in HelpLayout
in Unknown (created by Route(help))
in Route (created by Route(help))
in LocationProvider (created by Route(help))
in Route(help) (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by BottomTabView)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by BottomTabView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by BottomTabView)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by BottomTabView)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by BottomTabNavigator)
in BottomTabNavigator
in Unknown (created by AppLayout)
in AppLayout
in Unknown (created by Route(app))
in Route (created by Route(app))
in LocationProvider (created by Route(app))
in Route(app) (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
in DebugContainer (created by MaybeNestedStack)
in MaybeNestedStack (created by SceneView)
in RCTView (created by View)
in View (created by SceneView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by SceneView)
in SceneView (created by NativeStackViewInner)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by ScreenStack)
in RNSScreenStack (created by ScreenStack)
in ScreenStack (created by NativeStackViewInner)
in NativeStackViewInner (created by NativeStackView)
in RCTView (created by View)
in View (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by NativeStackView)
in NativeStackView (created by NativeStackNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by NativeStackNavigator)
in NativeStackNavigator
in Unknown (created by RootLayout)
in RNCSafeAreaView
in Unknown
in NativeWind.NoName
in Unknown (created by RootLayout)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by RootLayout)
in QueryClientProvider (created by TRPCProvider)
in TRPCProvider (created by TRPCProvider)
in TRPCProvider (created by RootLayout)
in RootLayout
in Unknown (created by Route())
in Route (created by Route())
in LocationProvider (created by Route())
in Route() (created by RootRoute)
in RootRoute (created by ContextNavigator)
in InitialRootStateProvider (created by ContextNavigator)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by NavigationContainer)
in NavigationContainer (created by ContextNavigator)
in RootRouteNodeProvider (created by ContextNavigator)
in ContextNavigator (created by ExpoRoot)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by ExpoRoot)
in ExpoRoot (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes
lib versions:
"@bacons/expo-router-top-tabs": "^0.1.0",
"@expo/metro-config": "^0.7.1",
"@expo/webpack-config": "^18.0.1",
"expo": "~48.0.19",
"expo-constants": "~14.2.1",
"expo-file-system": "~15.2.2",
"expo-linking": "~4.0.1",
"expo-navigation-bar": "~2.1.1",
"expo-router": "1.5.3",
"expo-splash-screen": "~0.18.2",
"expo-status-bar": "~1.4.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.71.8",
"react-native-pager-view": "6.1.2",
"react-native-reanimated": "~2.14.4",
"react-native-safe-area-context": "4.5.3",
"react-native-screens": "~3.20.0",
"react-native-svg": "13.4.0",
"superjson": "1.12.3",
I followed the basic guidelines,
I checked the demo setups here and on https://github.com/EvanBacon/expo-router-layouts-example/blob/main/app/collapsing-top-tabs/_layout.tsx
but I get this breaking error:
ERROR Error: useCtx must be inside a Provider with a value
and only when I call const props = useScrollProps();
in the child routes ...
Does anyone know how to fix this?
//React
import React from "react";
import { View, Text, ViewBase } from "react-native";
//Internal
/* import theme from "../../../utils/theme";
import ProfileCard from "../../../components/profile/card"; */
//External
import { TopTabs, useScrollProps } from "@bacons/expo-router-top-tabs";
export const unstable_settings = {
initialRouteName: "highlights",
};
export default function Layout() {
return (
<TopTabs>
<TopTabs.Header>
<View
pointerEvents="none"
style={{
backgroundColor: "red",
flexDirection: "row",
alignItems: "center",
padding: 24,
}}
>
<View
style={{
width: 64,
height: 64,
borderRadius: 64 / 2,
backgroundColor: "#D8D8D8",
}}
/>
<View style={{ paddingHorizontal: 24 }}>
<Text
style={{ fontWeight: "bold", fontSize: 48 }}
accessibilityRole="header"
>
Ludwig
</Text>
<Text
style={{ fontSize: 16, opacity: 0.5 }}
accessibilityRole="header"
>
User of Expo Router
</Text>
</View>
</View>
</TopTabs.Header>
<TopTabs.Screen
name="highlights"
options={{
title: "Highlights",
}}
/>
<TopTabs.Screen
name="contacts"
options={{
title: "Contacts",
}}
/>
</TopTabs>
);
}
Currently, the package requires Expo router V1.5 and Expo router V2 released and is stable. I am desperate for TopTab support with the expo router. Are you going to update this package to support V2?
Is it possible to lazy load a tab when it comes on the screen?
Once upgraded to expo SDK 50 and expo-router V3 I get the following issue
Unable to resolve "expo-router/src/layouts/withLayoutContext" from "node_modules/@bacons/expo-router-top-tabs/build/index.js"
Expo: v49, expo-router: v2
I m using this toptabs in my _layout.tsx
export default function TabLayout() {
return (
<TopTabs>
<TopTabs.Header>
<H3 pointerEvents="none">Hi</H3>
</TopTabs.Header>
<TopTabs.Screen name="index" options={{ title: "Home" }} />
<TopTabs.Screen name="Chat" options={{ title: "Chat" }} />
</TopTabs>
);
}
Swipe is working fine, routes are changing
but when i click on any tab, it showing this error.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.