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

# Tabs (вкладки)

Наследует [react-native-tab-view](https://github.com/satya164/react-native-tab-view) с некоторыми изменениями:

- `navigationState` свойство заменено на свойства `routes` и `$value`, где:
  - `routes` имеет ту же структуру, что и `navigationState.routes`
  - `$value` скоуп модель, чтобы сделать вкладки контролируемыми (если опустить это свойство вкладки будут неконтролируемыми)
- добавлено свойство `initialKey` для установки вкладки по умолчанию
- добавлено свойство `onChange` которое реагирует на смену вкладки вместо `onIndexChange`
- все пропсы для [TabBar](https://github.com/satya164/react-native-tab-view#tabbar) можно задвавать компоненту Tabs

Вкладки позволяют переключаться между различными видами.

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

## Tabs.Bar
Используйте компонент `Tabs.Bar` в функции `renderTabBar`, если хотите сделать кастомный `TabBar`

## Простой пример

```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}
  />
)
```