expo-router-top-tabs

KO | EN

gitlite — search

#python #react #ai #typescript #golang #android #rust #deep-learning #linux #docker #windows #awesome #kubernetes #mcp

expo-router-top-tabs

(★ 67)

experimental

expo-router-top-tabs Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# @bacons/expo-router-top-tabs

Wraps `react-native-collapsible-tab-view` and adds support for [Expo Router](https://expo.github.io/router/docs).

## 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](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation#babel-plugin) for more info.

## Usage

Example in Layout Route:

```js
// 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:

```js
// 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

expo-router-top-tabs Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

expo-router-top-tabs

expo-router-top-tabs Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README