Material Design Tabs For React Native Paper

Description:

Smooth and fast cross platform Material Design Tabs for React Native Paper.

Feature:

• Works on Android, iOS and the web
• Simple API
• Typesafe
• Scrollable and fixed
• Leading or top icon
• Performant
• Uses native components (react-native-viewpager)
• Great React Native Web support

How to use it:

1. Installation.

# Yarn
$ yarn add react-native-paper-tabs @react-native-community/viewpager
# NPM
$ npm i react-native-paper-tabs @react-native-community/viewpager
2. Import necessary components.

import {
  Button,
  Title,
  Paragraph,
} from 'react-native-paper';
import {
  Tabs,
  TabScreen,
  useTabIndex,
  useTabNavigation,
} from 'react-native-paper-tabs';

3. Create a basic Material Design Tabs component.

function Example() {
  return (
    <Tabs
      // options here
    >
      <TabScreen label="Explore" icon="compass">
         <ExploreWitHookExamples />
      </TabScreen>
      <TabScreen label="Flights" icon="airplane">
        <View style={{ backgroundColor: 'black', flex:1 }} />
      </TabScreen>
      <TabScreen label="Trips" icon="bag-suitcase">
         <View style={{ backgroundColor: 'red', flex:1 }} />
      </TabScreen>
    </Tabs>
  )
}
function ExploreWitHookExamples() {
  const goTo = useTabNavigation();
  const index = useTabIndex();
  return (
    <View style={{ flex:1 }}>
      <Title>Explore</Title>
      <Paragraph>Index: {index}</Paragraph>
      <Button onPress={() => goTo(1)}>Go to Flights</Button>
    </View>
  );
}

Preview: