How to create tabbed content inside a React Native screen

Question

I am using React-Native, with Expo and React-Navigation.

In my App I have a Search Component which renders results, but I want to have two tabs of different result types, which can be clicked.

I cannot seem to find a component which does this, a TabNavigator seems to be to change the whole screen, but I have seen this functionality in many other RN Apps, so I have attached a screenshot of a similar component to what I want.

See how the Following, Popular and Explore are different tabs and the line in this case smoothly animates to underline the active tab.

Is there a component out there that does this?

Answer 1

I ended up using the Tabs component from Native Base

import React, { Component } from 'react';
import { Container, Header, Content, Tab, Tabs } from 'native-base';
import Tab1 from './tabOne';
import Tab2 from './tabTwo';
import Tab3 from './tabThree';

​export default class TabsExample extends Component {
  render() {
    return (
      <Container>
        <Header hasTabs />
        <Tabs>
          <Tab heading="Tab1">
            <Tab1 />
          </Tab>
          <Tab heading="Tab2">
            <Tab2 />
          </Tab>
          <Tab heading="Tab3">
            <Tab3 />
          </Tab>
        </Tabs>
      </Container>
    );
  }
}