Fausto95 / react-native-tab-view

React Native Tab View

I built this when I hit a blocker with react-native-tab-view where nested tab views have some UI and performance issues. Note that my version of tab view does everything JS land.

Installation

npm install @fausto95/react-native-tab-view

Demo

Supports

• Scrollable tabs
• Nested tab views

Usage

import * as React from 'react';

import { View, Text } from 'react-native';
import { TabView } from '@fausto95/react-native-tab-view';

const routes = [
  { key: 'first', title: 'First' },
  { key: 'second', title: 'Second' },
  { key: 'third', title: 'Third' },
  { key: 'fourth', title: 'Fourth' },
];

export default function App() {
  return (
    <TabView
      tabBarStyle={styles.tabBarStyle}
      tabBarContentContainerStyle={styles.tabBarContentContainerStyle}
      style={{ flex: 1 }}
      routes={routes}
      onPress={(index) => console.log(index)}
      renderTabBar={({ route, isActive }) => (
        <View
          style={[styles.tab, isActive ? { backgroundColor: 'purple' } : {}]}
        >
          <Text style={[{ color: isActive ? 'white' : 'black' }]}>
            {route.title}
          </Text>
        </View>
      )}
      renderScene={(route) => (
        <View style={styles.scene}>
          <Text style={styles.text}>{route.title}</Text>
        </View>
      )}
    />
  );
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library