https://github.com/rintoj/native-x-paginated-view
https://github.com/rintoj/native-x-paginated-view
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/rintoj/native-x-paginated-view
- Owner: rintoj
- Created: 2021-02-08T08:23:51.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-02-08T08:43:57.000Z (over 5 years ago)
- Last Synced: 2025-07-08T10:37:41.256Z (12 months ago)
- Language: TypeScript
- Size: 144 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# native-x-paginated-view
[](https://github.com/semantic-release/semantic-release)
This component will help you to implement a tab with a horizontal scroll to toggle between content.
## Install
### Yarn
```sh
yarn add native-x-paginated-view
```
### NPM
```sh
npm install native-x-paginated-view
```
## Usage
```tsx
import { Screen } from 'native-x-screen'
import React, { useEffect, useRef, useState } from 'react'
import { PaginatedView, PaginatedViewRef } from 'native-x-paginated-view'
import { DiscoverScreen, HomeScreen, UserProfileScreen } from '../screens'
export enum HomeScreenTab {
HOME,
DISCOVER,
PROFILE,
}
export function MainScreen() {
const [tab, setTab] = useState(HomeScreenTab.HOME)
const paginatedViewRef = useRef()
useEffect(() => {
paginatedViewRef?.current?.goto(tab)
}, [tab])
return (
)
}
```
## API
| Property | Default Value | Usage |
| ---------------------------------------- | ------------- | ----------------------------------------------------------------------------------- |
| children: ReactNode[] | | Content of the paginated view |
| style?: ViewStyle | | Container style |
| scrollEnabled?: boolean | true | Set to true to enable scroll |
| animated?: boolean | true | Animate transition between views |
| showsHorizontalScrollIndicator?: boolean | false | Set to true to show indicator |
| onIndexChange?: (index: number) => void | | Callback for index change |
| keepAlreadyRendered?: boolean | true | If set to true, all paged once rendered will be cached |
| cachePageCount?: number | 3 | Number of pages to cache at any time (works only if `keepAlreadyRendered` is false) |
| containerWidth?: number | Screen Size | Width of the container. By default this is set to screen size |
| dynamicWidth?: boolean | false | Set this to true for the component to calculate width of the content as it changes |
## Automatic Release
Here is an example of the release type that will be done based on a commit messages:
| Commit message | Release type |
| ------------------- | --------------------- |
| fix: [comment] | Patch Release |
| feat: [comment] | Minor Feature Release |
| perf: [comment] | Major Feature Release |
| doc: [comment] | No Release |
| refactor: [comment] | No Release |
| chore: [comment] | No Release |