- Notifications
You must be signed in to change notification settings - Fork11
A cross-platform Collapsible Segmented View component for React Native
License
PedroBern/react-native-collapsible-segmented-view
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Collapsible Segmented View for React Native.
- View it with Expo.
- Checkout theexamples for the source code of the Expo app.
Credits
Thereact-native-tab-view example app was used as template for the demos.
| ios | android |
|---|---|
 |  |
- ImplementsSegmentedControl andFixed Material Tab Bar
- Lazy support
- Highly customizable
- Fully typed withTypeScript
Open a Terminal in the project root and run:
yarn add react-native-collapsible-segmented-viewexpo install @react-native-community/segmented-control
importReactfrom'react'import{View,StyleSheet,ListRenderItem,Text}from'react-native'import{Segmented}from'react-native-collapsible-segmented-view'constHeader=()=>{return(<Viewstyle={styles.box}pointerEvents="box-none"><Textstyle={styles.text}>Collapsible Header</Text></View>)}constExample:React.FC=()=>{return(<Segmented.Viewheader={Header}><Segmented.Segmentlabel="A"component={SegmentA}/><Segmented.Segmentlabel="B"component={SegmentB}/><Segmented.Segmentlabel="C"component={SegmentC}/></Segmented.View>)}constbuildRenderItem=(color0:string,color1:string)=>{constrenderItem:ListRenderItem<number>=(data)=>{constbackgroundColor=data.index%2===0 ?color0 :color1constcolor=data.index%2===0 ?color1 :color0return(<Viewstyle={[styles.box,{ backgroundColor}]}><Textstyle={[{ color},styles.text]}>{data.index}</Text></View>)}returnrenderItem}constbuildSegment=(data:number[],color0:string,color1:string)=>{constSegment=()=>{return(<Segmented.FlatListdata={data}renderItem={buildRenderItem(color0,color1)}keyExtractor={(v)=>v+''}/>)}returnSegment}constdata0=[0,1,2,3,4,5,6,7,8,9,10]constdata1=[0,1]constSegmentA=buildSegment(data0,'#FBC02D','#FFF9C4')constSegmentB=buildSegment(data0,'#0097A7','#B2EBF2')constSegmentC=buildSegment(data1,'#D32F2F','#FFCDD2')conststyles=StyleSheet.create({box:{justifyContent:'center',alignItems:'center',height:250,width:'100%',},text:{fontSize:32,},})exportdefaultExample
Basic usage looks like this:
import{Segmented}from'react-native-collapsible-segmented-view'constExample=()=>{return(<Segmented.Viewhader={MyHeader}><Segmented.Segmentlabel="A"component={ScreenA}/><Segmented.Segmentlabel="B"component={ScreenB}/><Segmented.Segmentlabel="C"component={ScreenC}/></Tabs.Container>)}
| 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 |
Wrap your screens withSegmented.Segment. Basic usage looks like this:
<Segmented.View...><Segmented.Segmentlabel="A"component={ScreenA}/><Segmented.Segmentlabel="B"component={ScreenB}/><Segmented.Segmentlabel="C"component={ScreenC}/></Segmented.Container>
| name | type |
|---|---|
| component | () => React.ReactElement |
| label | string |
Use like a regular flatlist.
Use like a regular ScrollView.
Default iOS control. Props are passed down to the originalSegmentedControl.
Example usage:
import{Segmented,SegmentedControl}from'react-native-collapsible-segmented-view...<Segmented.Viewcontrol={(props)=><SegmentedControl{...props}appearance='dark'/>}> ...
| name | type |
|---|---|
| containerStyle | ViewStyle | undefined |
Default android control.
Example usage:
import{Segmented,MaterialTabBar}from'react-native-collapsible-segmented-view...<Segmented.Viewcontrol={(props)=><MaterialTabBar{...props}indicatorStyle='red'/>}> ...
| 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 |
Returns true if the segment is focused, else returns false.
constisFocused=useIsFocused()
Returns the current segment selected index.
constselectedIndex=useSelectedIndex()
ReturnstranslateY interpolation and the height of the header. See the animated header example.
const{ translateY, height}=useHeaderMeasurements()
If you are looking for a full-featured tab bar with swiping, scrollable tabs, dynamic rendering, snapping and diffClamp:
While developing, you can run theexample app to test your changes.
Please follow theangular commit message format.
Make sure your code passes TypeScript and ESLint. Run the following to verify:
yarn typescriptyarn lint
To fix formatting errors, run the following:
yarn lint -- --fix
Remember to add tests for your change if possible.
Edit theREADME_TEMPLATE, or update the docstrings inside thesrc folder, and run:
yarn docs
About
A cross-platform Collapsible Segmented View component for React Native
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.