expo-router-top-tabs's Introduction

@bacons/expo-router-top-tabs

Wraps react-native-collapsible-tab-view and adds support for Expo Router.

Add the package to your npm dependencies

yarn add @bacons/expo-router-top-tabs react-native-reanimated

Setup Reanimated in the babel.config.js. See here for more info.

Usage

Example in Layout Route:

// app/(tabs)/_layout.tsx

import { Text, View } from "react-native";
import { TopTabs } from "@bacons/expo-router-top-tabs";

export default function CustomLayout() {
  return (
    <TopTabs screenOptions={{}}>
      <TopTabs.Header>
        <View pointerEvents="none" style={{}}>
          <Text>Header</Text>
        </View>
      </TopTabs.Header>

      <TopTabs.Screen name="index" />
    </TopTabs>
  );
}

Usage in child routes:

// app/(tabs)/index.tsx

import { Animated } from "react-native";
import { useScrollProps } from "@bacons/expo-router-top-tabs";

export default function Screen() {
  const props = useScrollProps();

  return <Animated.ScrollView {...props}></Animated.ScrollView>;
}

expo-router-top-tabs's People

Stargazers

Watchers

expo-router-top-tabs's Issues

Can't navigate using the actual tabs on android

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",

Recommend Projects

evanbacon / expo-router-top-tabs Goto Github PK

expo-router-top-tabs's Introduction

@bacons/expo-router-top-tabs

Add the package to your npm dependencies

Usage

expo-router-top-tabs's People

Stargazers

Watchers

expo-router-top-tabs's Issues

Can't navigate using the actual tabs on android

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent