Material Design Tabs in React Native Paper

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:

Download Details:

Author: web-ridge

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/web-ridge/react-native-paper-tabs

License: MIT

#react-native #react #reactjs