Native-x-paginated-view NPM

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

tachyons-react-native

@infinitebrahmanuniverse/nolb-native-@everything-registry/sub-chunk-2247 @vikalp_p/native-x

1.0.0

5 years ago