react-native-collapsible-segmented-view

[![Build Status][build-badge]][build]
[![Version][version-badge]][package]
[![MIT License][license-badge]][license]
[![runs with expo][expo-badge]][expo]

- Expo app
- Demo
- Features
- Installation
- Quick Start
- API reference
- Core
- Segmented.View
- Segmented.Segment
- Segmented.FlatList
- Segmented.ScrollView
- Controls
- SegmentedControl
- MaterialTabBar
- Hooks
- useIsFocused
- useSelectedIndex
- useHeaderMeasurements
- Alternative libraries
- Contributing
- Documentation changes

Expo app

Collapsible Segmented View for React Native.

- View it with Expo.
- Checkout the examples for the source code of the Expo app.

Credits

The react-native-tab-view example app was used as template for the demos.

Demo

| ios | android |
| :----------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------: |
| | |

Features

- Implements SegmentedControl and Fixed Material Tab Bar
- Lazy support
- Highly customizable
- Fully typed with TypeScript

Installation

Open a Terminal in the project root and run:

``sh
yarn add react-native-collapsible-segmented-view

expo install @react-native-community/segmented-control
`

Quick Start

`tsx
import React from 'react'
import { View, StyleSheet, ListRenderItem, Text } from 'react-native'
import { Segmented } from 'react-native-collapsible-segmented-view'

const Header = () => {
return (

Collapsible Header

)
}

const Example: React.FC = () => {
return (





)
}

const buildRenderItem = (color0: string, color1: string) => {
const renderItem: ListRenderItem = (data) => {
const backgroundColor = data.index % 2 === 0 ? color0 : color1
const color = data.index % 2 === 0 ? color1 : color0
return (

{data.index}

)
}
return renderItem
}

const buildSegment = (data: number[], color0: string, color1: string) => {
const Segment = () => {
return (
data={data}
renderItem={buildRenderItem(color0, color1)}
keyExtractor={(v) => v + ''}
/>
)
}
return Segment
}

const data0 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const data1 = [0, 1]

const SegmentA = buildSegment(data0, '#FBC02D', '#FFF9C4')
const SegmentB = buildSegment(data0, '#0097A7', '#B2EBF2')
const SegmentC = buildSegment(data1, '#D32F2F', '#FFCDD2')

const styles = StyleSheet.create({
box: {
justifyContent: 'center',
alignItems: 'center',
height: 250,
width: '100%',
},
text: {
fontSize: 32,
},
})

export default Example

`

API reference

Core

$3

Basic usage looks like this:

`tsx
import { Segmented } from 'react-native-collapsible-segmented-view'

const Example = () => {
return (





)
}
`

#### Props

|name|type|default|
|:----:|:----:|:----:|
|animatedValue|Value \| undefined|new Animated.Value(0)|
|containerHeight|number \| undefined|0|
|containerStyle|ViewStyle \| undefined||
|control|(props: ControlProps) => React.ReactElement|IS_IOS ? SegmentedControl : MaterialTabBar|
|controlHeight|number \| undefined|48|
|disableFadeIn|boolean \| undefined|false|
|header|() => React.ReactElement||
|headerHeight|number \| undefined||
|initialIndex|number \| undefined|0|
|lazy|boolean \| undefined|false|
|topStyle|ViewStyle \| undefined||

$3

Wrap your screens with Segmented.Segment. Basic usage looks like this:

`tsx





`

#### Props

|name|type|
|:----:|:----:|
|component|() => React.ReactElement|
|label|string|

$3

Use like a regular flatlist.

$3

Use like a regular ScrollView.

Controls

$3

Default iOS control. Props are passed down to the original SegmentedControl.

Example usage:

`tsx
import {
Segmented,
SegmentedControl
} from 'react-native-collapsible-segmented-view

...

control={(props) => }
>
...
`

#### Props

|name|type|
|:----:|:----:|
|containerStyle|ViewStyle \| undefined|

$3

Default android control.

Example usage:

`tsx
import {
Segmented,
MaterialTabBar
} from 'react-native-collapsible-segmented-view

...

control={(props) => }
>
...
`

#### Props

|name|type|default|
|:----:|:----:|:----:|
|containerStyle|ViewStyle \| undefined||
|inactiveOpacity|number \| undefined|0.7|
|indicatorStyle|ViewStyle \| undefined||
|labelStyle|TextStyle \| undefined||
|pressColor|string \| undefined|DDDDDD|
|pressOpacity|number \| undefined|IS_IOS ? 0.2 : 1|
|tabStyle|ViewStyle \| undefined||

Hooks

$3

Returns true if the segment is focused, else returns false.

`tsx
const isFocused = useIsFocused()
`

$3

Returns the current segment selected index.

`tsx
const selectedIndex = useSelectedIndex()
`

$3

Returns translateY interpolation and the height of the header. See the animated header example.

`tsx
const { translateY, height } = useHeaderMeasurements()
`

Alternative libraries

If you are looking for a full-featured tab bar with swiping, scrollable tabs, dynamic rendering, snapping and diffClamp:

- react-native-collapsible-tab-view

Contributing

While developing, you can run the example app to test your changes.

Please follow the angular commit message format.

Make sure your code passes TypeScript and ESLint. Run the following to verify:

`sh
yarn typescript
yarn lint
`

To fix formatting errors, run the following:

`sh
yarn lint -- --fix
`

Remember to add tests for your change if possible.

Documentation changes

Edit the README_TEMPLATE, or update the docstrings inside the src folder, and run:

`sh
yarn docs
``

[build-badge]: https://img.shields.io/circleci/build/github/PedroBern/react-native-collapsible-segmented-view/main.svg?style=flat-square
[build]: https://app.circleci.com/pipelines/github/PedroBern/react-native-collapsible-segmented-view
[version-badge]: https://img.shields.io/npm/v/react-native-collapsible-segmented-view.svg?style=flat-square
[package]: https://www.npmjs.com/package/react-native-collapsible-segmented-view
[license-badge]: https://img.shields.io/npm/l/react-native-collapsible-segmented-view.svg?style=flat-square
[license]: https://opensource.org/licenses/MIT
[expo-badge]: https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000
[expo]: https://github.com/expo/expo