Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pedrobern/react-native-collapsible-segmented-view

A cross-platform Collapsible Segmented View component for React Native
https://github.com/pedrobern/react-native-collapsible-segmented-view

expo human-interface-guidelines material-design react-native segmented-controls tabbar

Last synced: 17 days ago
JSON representation

A cross-platform Collapsible Segmented View component for React Native

Awesome Lists containing this project

README 

        
# 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