1.0.0 • Published 3 years ago
native-x-paginated-view v1.0.0
native-x-paginated-view
This component will help you to implement a tab with a horizontal scroll to toggle between content.
Install
Yarn
yarn add native-x-paginated-view
NPM
npm install native-x-paginated-view
Usage
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>(HomeScreenTab.HOME)
const paginatedViewRef = useRef<PaginatedViewRef>()
useEffect(() => {
paginatedViewRef?.current?.goto(tab)
}, [tab])
return (
<Screen scrollable>
<PaginatedView ref={paginatedViewRef} onIndexChange={setTab}>
<HomeScreen />
<DiscoverScreen />
<UserProfileScreen />
</PaginatedView>
<TabHeader tab={tab} onChange={setTab} />
</Screen>
)
}
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 |
1.0.0
3 years ago