# 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](#expo-app) - [Demo](#demo) - [Features](#features) - [Installation](#installation) - [Quick Start](#quick-start) - [API reference](#api-reference) - [Core](#core) - [Segmented.View](#segmentedview) - [Segmented.Segment](#segmentedsegment) - [Segmented.FlatList](#segmentedflatlist) - [Segmented.ScrollView](#segmentedscrollview) - [Controls](#controls) - [SegmentedControl](#segmentedcontrol) - [MaterialTabBar](#materialtabbar) - [Hooks](#hooks) - [useIsFocused](#useisfocused) - [useSelectedIndex](#useselectedindex) - [useHeaderMeasurements](#useheadermeasurements) - [Alternative libraries](#alternative-libraries) - [Contributing](#contributing) - [Documentation changes](#documentation-changes) # Expo app Collapsible Segmented View for React Native. - [View it with Expo](https://expo.io/@pedrobern/react-native-collapsible-segmented-view-demos). - Checkout the [examples](https://github.com/PedroBern/react-native-collapsible-segmented-view/tree/main/example) for the source code of the Expo app.

**Credits** The [react-native-tab-view](https://github.com/satya164/react-native-tab-view) example app was used as template for the demos. # Demo | ios | android | | :----------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------: | |

| # Features - Implements [SegmentedControl](https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/) and [Fixed Material Tab Bar](https://material.io/components/tabs) - Lazy support - Highly customizable - Fully typed with [TypeScript](https://typescriptlang.org) # 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 ( 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 ### Segmented.View 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`|| ### Segmented.Segment Wrap your screens with `Segmented.Segment`. Basic usage looks like this: ```tsx ``` #### Props |name|type| |:----:|:----:| |component|`() => React.ReactElement`| |label|`string`| ### Segmented.FlatList Use like a regular flatlist. ### Segmented.ScrollView Use like a regular ScrollView. ## Controls ### SegmentedControl Default iOS control. Props are passed down to the original [SegmentedControl](https://github.com/react-native-segmented-control/segmented-control#react-native-segmented-controlsegmented-control). Example usage: ```tsx import { Segmented, SegmentedControl } from 'react-native-collapsible-segmented-view ... } > ... ``` #### Props |name|type| |:----:|:----:| |containerStyle|`ViewStyle \| undefined`| ### MaterialTabBar Default android control. Example usage: ```tsx import { Segmented, MaterialTabBar } from 'react-native-collapsible-segmented-view ... } > ... ``` #### 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 ### useIsFocused Returns true if the segment is focused, else returns false. ```tsx const isFocused = useIsFocused() ``` ### useSelectedIndex Returns the current segment selected index. ```tsx const selectedIndex = useSelectedIndex() ``` ### useHeaderMeasurements 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](https://github.com/PedroBern/react-native-collapsible-tab-view) # Contributing While developing, you can run the [example app](/example/README.md) to test your changes. Please follow the [angular commit message format](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-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](https://github.com/PedroBern/react-native-collapsible-segmented-view/tree/main/documentation/README_TEMPLATE.md), 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

			Stars	Issues	Version	Updated	Created	Size
	react-native-collapsible-container		0	1	1.0.2	3 years ago	3 years ago
	react-native-collapsible-segmented-view		49	6	1.2.1	3 years ago	3 years ago

react-native-collapsible-container vs react-native-collapsible-segmented-view

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past