react-native-collapsible-with-infinite-scroll
v1.0.1
Published
Collapsible tab view component for React Native with tab infinite scrolling
Downloads
11
Maintainers
Readme
react-native-collapsible-tab-view-with-infinite-scroll
Courtesy
extended version of the react-native-collapsible-tab-view with a bug fix and new feature.
Features
- support infinite scrolling in tab contents
- support multiple
onScroll
- Animations and interactions on the UI thread
- Highly customizable
- Fully typed with TypeScript
Installation
Open a Terminal in the project root and run:
yarn add react-native-collapsible-tab-with-scroll
Quick Start
import React from 'react'
import { View, StyleSheet, ListRenderItem } from 'react-native'
import { Tabs } from 'react-native-collapsible-tab-view'
const HEADER_HEIGHT = 250
const Header = () => {
return <View style={styles.header} />
}
return (
<Tabs.Container
renderHeader={Header}
headerHeight={HEADER_HEIGHT} // optional
>
<Tabs.Tab name="A">
<Tabs.ScrollView
onScroll={({nativeEvent})=>console..log(nativeEvent)}>
<View style={[styles.box, styles.boxA]} />
<View style={[styles.box, styles.boxB]} />
</Tabs.ScrollView>
<Tabs.Tab name="B">
<Tabs.ScrollView
onScroll={({nativeEvent})=>console..log(nativeEvent)}>
<View style={[styles.box, styles.boxA]} />
<View style={[styles.box, styles.boxB]} />
</Tabs.ScrollView>
</Tabs.Tab>
</Tabs.Container>
)
}
const styles = StyleSheet.create({
box: {
height: 250,
width: '100%',
},
boxA: {
backgroundColor: 'white',
},
boxB: {
backgroundColor: '#D8D8D8',
},
header: {
height: HEADER_HEIGHT,
width: '100%',
backgroundColor: '#2196f3',
},
})
export default Example
Props
- support all props provided in
react-native-collapsible-tab-view
Tabs.Tab
Wrap your screens with Tabs.Tab
. Basic usage looks like this:
<Tabs.Container ...>
<Tabs.Tab name="A" label="First Tab">
<ScreenA />
</Tabs.Tab>
<Tabs.Tab name="B">
<ScreenA />
</Tabs.Tab>
</Tabs.Container>
Tabs.FlatList
Use like a regular FlatList.
Tabs.ScrollView
Use like a regular ScrollView.
Props
| name | type |
| :------: | :------------------: |
| onScroll | event \| undefined
|
Tabs.SectionList
Use like a regular SectionList.
Ref
You can pass a ref to Tabs.Container
.
const ref = React.useRef()
<Tabs.Container ref={ref}>
| method | type |
| :-------------: | :--------------------------: |
| jumpToTab | (name: T) => boolean
|
| setIndex | (index: number) => boolean
|
| getFocusedTab | () => T
|
| getCurrentIndex | () => number
|
Hooks
- support all hooks provided by
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:
yarn typescript
yarn lint
To fix formatting errors, run the following:
yarn lint -- --fix
Remember to add tests for your change if possible.