import { useState } from 'react'
import Div from '../Div'
import Tabs from '../Tabs'

# Tabs

Inherits [react-native-tab-view](https://github.com/satya164/react-native-tab-view) with some changes:

- `navigationState` property is replaced to properties `routes` and `$value`, where:
  - `routes` is have the same structure as `navigationState.routes`
  - `$value` is the scoped model, to make tabs controlled (by omitting this property the tabs will be uncontrolled)
- added property `initialKey` to set default tab
- added property `onChange` that responds to tab change instead of `onIndexChange`
- all props for [TabBar](https://github.com/satya164/react-native-tab-view#tabbar) can be assigned to `Tabs` component

Tabs allow you to switch between different views.

```jsx
import { Tabs } from '@startupjs/ui'
```

## Tabs.Bar
Use component `Tabs.Bar` in the `renderTabBar` function if you want to make a custom `TabBar`

## Simple example

```jsx example noscroll
const [routes] = useState([
  { key: 'first', title: 'First' },
  { key: 'second', title: 'Second' },
])

const FirstRoute = () => (
  <Div style={[{ flexGrow: 1, backgroundColor: '#ff4081' }]} />
)

const SecondRoute = () => (
  <Div style={[{ flexGrow: 1, backgroundColor: '#673ab7' }]} />
)

function renderScene ({ route }) {
  switch (route.key) {
    case 'first':
      return <FirstRoute />;
    case 'second':
      return <SecondRoute />;
  }
}

return (
  <Tabs
    style={{ height: 250 }}
    routes={routes}
    renderScene={renderScene}
  />
)
```