{"id":17004316,"url":"https://github.com/pedrobern/react-native-collapsible-segmented-view","last_synced_at":"2025-03-17T09:31:08.184Z","repository":{"id":39862278,"uuid":"342024204","full_name":"PedroBern/react-native-collapsible-segmented-view","owner":"PedroBern","description":"A cross-platform Collapsible Segmented View component for React Native","archived":false,"fork":false,"pushed_at":"2022-05-24T09:48:10.000Z","size":43849,"stargazers_count":54,"open_issues_count":6,"forks_count":11,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-27T22:10:51.910Z","etag":null,"topics":["expo","human-interface-guidelines","material-design","react-native","segmented-controls","tabbar"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PedroBern.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-24T20:16:46.000Z","updated_at":"2024-12-31T02:13:23.000Z","dependencies_parsed_at":"2022-09-01T11:51:42.420Z","dependency_job_id":null,"html_url":"https://github.com/PedroBern/react-native-collapsible-segmented-view","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroBern%2Freact-native-collapsible-segmented-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroBern%2Freact-native-collapsible-segmented-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroBern%2Freact-native-collapsible-segmented-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PedroBern%2Freact-native-collapsible-segmented-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PedroBern","download_url":"https://codeload.github.com/PedroBern/react-native-collapsible-segmented-view/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243858929,"owners_count":20359260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo","human-interface-guidelines","material-design","react-native","segmented-controls","tabbar"],"created_at":"2024-10-14T04:43:20.315Z","updated_at":"2025-03-17T09:31:05.233Z","avatar_url":"https://github.com/PedroBern.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-collapsible-segmented-view\n\n[![Build Status][build-badge]][build]\n[![Version][version-badge]][package]\n[![MIT License][license-badge]][license]\n[![runs with expo][expo-badge]][expo]\n\n- [Expo app](#expo-app)\n- [Demo](#demo)\n- [Features](#features)\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n- [API reference](#api-reference)\n  - [Core](#core)\n    - [Segmented.View](#segmentedview)\n    - [Segmented.Segment](#segmentedsegment)\n    - [Segmented.FlatList](#segmentedflatlist)\n    - [Segmented.ScrollView](#segmentedscrollview)\n  - [Controls](#controls)\n    - [SegmentedControl](#segmentedcontrol)\n    - [MaterialTabBar](#materialtabbar)\n  - [Hooks](#hooks)\n    - [useIsFocused](#useisfocused)\n    - [useSelectedIndex](#useselectedindex)\n    - [useHeaderMeasurements](#useheadermeasurements)\n- [Alternative libraries](#alternative-libraries)\n- [Contributing](#contributing)\n  - [Documentation changes](#documentation-changes)\n\n# Expo app\n\nCollapsible Segmented View for React Native.\n\n- [View it with Expo](https://expo.io/@pedrobern/react-native-collapsible-segmented-view-demos).\n- Checkout the [examples](https://github.com/PedroBern/react-native-collapsible-segmented-view/tree/main/example) for the source code of the Expo app.\n\n\u003ca href=\"https://expo.io/@pedrobern/react-native-collapsible-segmented-view-demos\"\u003e\u003cimg src=\"https://api.qrserver.com/v1/create-qr-code/?size=400x400\u0026data=exp://exp.host/@pedrobern/react-native-collapsible-segmented-view-demos\" height=\"200px\" width=\"200px\"\u003e\u003c/a\u003e\n\n**Credits**\n\nThe [react-native-tab-view](https://github.com/satya164/react-native-tab-view) example app was used as template for the demos.\n\n# Demo\n\n|                                                        ios                                                         |                                                        android                                                         |\n| :----------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------: |\n| \u003cimg src=\"https://github.com/PedroBern/react-native-collapsible-segmented-view/raw/main/demo/ios.gif\" width=\"360\"\u003e | \u003cimg src=\"https://github.com/PedroBern/react-native-collapsible-segmented-view/raw/main/demo/android.gif\" width=\"360\"\u003e |\n\n# Features\n\n- Implements [SegmentedControl](https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/) and [Fixed Material Tab Bar](https://material.io/components/tabs)\n- Lazy support\n- Highly customizable\n- Fully typed with [TypeScript](https://typescriptlang.org)\n\n# Installation\n\nOpen a Terminal in the project root and run:\n\n```sh\nyarn add react-native-collapsible-segmented-view\n\nexpo install @react-native-community/segmented-control\n```\n\n# Quick Start\n\n```tsx\nimport React from 'react'\nimport { View, StyleSheet, ListRenderItem, Text } from 'react-native'\nimport { Segmented } from 'react-native-collapsible-segmented-view'\n\nconst Header = () =\u003e {\n  return (\n    \u003cView style={styles.box} pointerEvents=\"box-none\"\u003e\n      \u003cText style={styles.text}\u003eCollapsible Header\u003c/Text\u003e\n    \u003c/View\u003e\n  )\n}\n\nconst Example: React.FC = () =\u003e {\n  return (\n    \u003cSegmented.View header={Header}\u003e\n      \u003cSegmented.Segment label=\"A\" component={SegmentA} /\u003e\n      \u003cSegmented.Segment label=\"B\" component={SegmentB} /\u003e\n      \u003cSegmented.Segment label=\"C\" component={SegmentC} /\u003e\n    \u003c/Segmented.View\u003e\n  )\n}\n\nconst buildRenderItem = (color0: string, color1: string) =\u003e {\n  const renderItem: ListRenderItem\u003cnumber\u003e = (data) =\u003e {\n    const backgroundColor = data.index % 2 === 0 ? color0 : color1\n    const color = data.index % 2 === 0 ? color1 : color0\n    return (\n      \u003cView style={[styles.box, { backgroundColor }]}\u003e\n        \u003cText style={[{ color }, styles.text]}\u003e{data.index}\u003c/Text\u003e\n      \u003c/View\u003e\n    )\n  }\n  return renderItem\n}\n\nconst buildSegment = (data: number[], color0: string, color1: string) =\u003e {\n  const Segment = () =\u003e {\n    return (\n      \u003cSegmented.FlatList\n        data={data}\n        renderItem={buildRenderItem(color0, color1)}\n        keyExtractor={(v) =\u003e v + ''}\n      /\u003e\n    )\n  }\n  return Segment\n}\n\nconst data0 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]\nconst data1 = [0, 1]\n\nconst SegmentA = buildSegment(data0, '#FBC02D', '#FFF9C4')\nconst SegmentB = buildSegment(data0, '#0097A7', '#B2EBF2')\nconst SegmentC = buildSegment(data1, '#D32F2F', '#FFCDD2')\n\nconst styles = StyleSheet.create({\n  box: {\n    justifyContent: 'center',\n    alignItems: 'center',\n    height: 250,\n    width: '100%',\n  },\n  text: {\n    fontSize: 32,\n  },\n})\n\nexport default Example\n\n```\n\n# API reference\n\n## Core\n\n### Segmented.View\n\nBasic usage looks like this:\n\n```tsx\nimport { Segmented } from 'react-native-collapsible-segmented-view'\n\nconst Example = () =\u003e {\n   return (\n     \u003cSegmented.View hader={MyHeader}\u003e\n       \u003cSegmented.Segment label=\"A\" component={ScreenA} /\u003e\n       \u003cSegmented.Segment label=\"B\" component={ScreenB} /\u003e\n        \u003cSegmented.Segment label=\"C\" component={ScreenC} /\u003e\n     \u003c/Tabs.Container\u003e\n   )\n}\n```\n\n#### Props\n\n|name|type|default|\n|:----:|:----:|:----:|\n|animatedValue|`Value \\| undefined`|`new Animated.Value(0)`|\n|containerHeight|`number \\| undefined`|`0`|\n|containerStyle|`ViewStyle \\| undefined`||\n|control|`(props: ControlProps) =\u003e React.ReactElement`|`IS_IOS ? SegmentedControl : MaterialTabBar`|\n|controlHeight|`number \\| undefined`|`48`|\n|disableFadeIn|`boolean \\| undefined`|`false`|\n|header|`() =\u003e React.ReactElement`||\n|headerHeight|`number \\| undefined`||\n|initialIndex|`number \\| undefined`|`0`|\n|lazy|`boolean \\| undefined`|`false`|\n|topStyle|`ViewStyle \\| undefined`||\n\n### Segmented.Segment\n\nWrap your screens with `Segmented.Segment`. Basic usage looks like this:\n\n```tsx\n\u003cSegmented.View ...\u003e\n  \u003cSegmented.Segment label=\"A\" component={ScreenA} /\u003e\n  \u003cSegmented.Segment label=\"B\" component={ScreenB} /\u003e\n  \u003cSegmented.Segment label=\"C\" component={ScreenC} /\u003e\n\u003c/Segmented.Container\u003e\n```\n\n#### Props\n\n|name|type|\n|:----:|:----:|\n|component|`() =\u003e React.ReactElement`|\n|label|`string`|\n\n### Segmented.FlatList\n\nUse like a regular flatlist.\n\n### Segmented.ScrollView\n\nUse like a regular ScrollView.\n\n\n\n## Controls\n\n### SegmentedControl\n\nDefault iOS control. Props are passed down to the original [SegmentedControl](https://github.com/react-native-segmented-control/segmented-control#react-native-segmented-controlsegmented-control).\n\nExample usage:\n\n```tsx\nimport {\n  Segmented,\n  SegmentedControl\n} from 'react-native-collapsible-segmented-view\n\n...\n\n\u003cSegmented.View\n  control={(props) =\u003e \u003cSegmentedControl {...props} appearance='dark' /\u003e}\n\u003e\n  ...\n```\n\n#### Props\n\n|name|type|\n|:----:|:----:|\n|containerStyle|`ViewStyle \\| undefined`|\n\n\n\n### MaterialTabBar\n\nDefault android control.\n\nExample usage:\n\n```tsx\nimport {\n  Segmented,\n  MaterialTabBar\n} from 'react-native-collapsible-segmented-view\n\n...\n\n\u003cSegmented.View\n  control={(props) =\u003e \u003cMaterialTabBar {...props} indicatorStyle='red' /\u003e}\n\u003e\n  ...\n```\n\n#### Props\n\n|name|type|default|\n|:----:|:----:|:----:|\n|containerStyle|`ViewStyle \\| undefined`||\n|inactiveOpacity|`number \\| undefined`|`0.7`|\n|indicatorStyle|`ViewStyle \\| undefined`||\n|labelStyle|`TextStyle \\| undefined`||\n|pressColor|`string \\| undefined`|`DDDDDD`|\n|pressOpacity|`number \\| undefined`|`IS_IOS ? 0.2 : 1`|\n|tabStyle|`ViewStyle \\| undefined`||\n\n\n\n## Hooks\n\n### useIsFocused\n\nReturns true if the segment is focused, else returns false.\n\n```tsx\nconst isFocused = useIsFocused()\n```\n\n### useSelectedIndex\n\nReturns the current segment selected index.\n\n```tsx\nconst selectedIndex = useSelectedIndex()\n```\n\n### useHeaderMeasurements\n\nReturns `translateY` interpolation and the height of the header. See the animated header example.\n\n```tsx\nconst { translateY, height } = useHeaderMeasurements()\n```\n\n# Alternative libraries\n\nIf you are looking for a full-featured tab bar with swiping, scrollable tabs, dynamic rendering, snapping and diffClamp:\n\n- [react-native-collapsible-tab-view](https://github.com/PedroBern/react-native-collapsible-tab-view)\n\n# Contributing\n\nWhile developing, you can run the [example app](/example/README.md) to test your changes.\n\nPlease follow the [angular commit message format](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format).\n\nMake sure your code passes TypeScript and ESLint. Run the following to verify:\n\n```sh\nyarn typescript\nyarn lint\n```\n\nTo fix formatting errors, run the following:\n\n```sh\nyarn lint -- --fix\n```\n\nRemember to add tests for your change if possible.\n\n## Documentation changes\n\nEdit 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:\n\n```sh\nyarn docs\n```\n\n\u003c!-- badges --\u003e\n\n[build-badge]: https://img.shields.io/circleci/build/github/PedroBern/react-native-collapsible-segmented-view/main.svg?style=flat-square\n[build]: https://app.circleci.com/pipelines/github/PedroBern/react-native-collapsible-segmented-view\n[version-badge]: https://img.shields.io/npm/v/react-native-collapsible-segmented-view.svg?style=flat-square\n[package]: https://www.npmjs.com/package/react-native-collapsible-segmented-view\n[license-badge]: https://img.shields.io/npm/l/react-native-collapsible-segmented-view.svg?style=flat-square\n[license]: https://opensource.org/licenses/MIT\n[expo-badge]: https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square\u0026logo=EXPO\u0026labelColor=f3f3f3\u0026logoColor=000\n[expo]: https://github.com/expo/expo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedrobern%2Freact-native-collapsible-segmented-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpedrobern%2Freact-native-collapsible-segmented-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedrobern%2Freact-native-collapsible-segmented-view/lists"}