Ray-rn-scrolltab NPM

ray-rn-scrolltab

author

ilex.h

Basic usage

import RnScrolltabView from 'ray-rn-scrolltab';

<RnScrolltabView>
  <Page01 tabLabel="page1" />
  <Page02 tabLabel="page2" />
  <Page03 tabLabel="page3" />
</RnScrolltabView>

// not render tab bar
<RnScrolltabView renderTabBar={false}>
  <Page01 tabLabel="page1" />
  <Page02 tabLabel="page2" />
  <Page03 tabLabel="page3" />
</RnScrolltabView>

Custom Tab Bar

Suppose we had a custom tab bar called CustomTabBar or use DefaultTabBar, we would inject it into our RnScrolltabView like this:

import RnScrolltabView, { DefaultTabBar, ScrollTabBar } from 'ray-rn-scrolltab';

<RnScrolltabView renderTabBar={() => <DefaultTabBar />}>
  <Page01 tabLabel="page1" />
  <Page02 tabLabel="page2" />
  <Page03 tabLabel="page3" />
</RnScrolltabView>

// or
// import CustomTabBar from './CustomTabBar';
<RnScrolltabView renderTabBar={() => <CustomTabBar {...yourProp} />}>
  <Page01 tabLabel="page1" />
  <Page02 tabLabel="page2" />
  <Page03 tabLabel="page3" />
</RnScrolltabView>

more example

import RnScrolltabView, { ScrollTabBar } from 'ray-rn-scrolltab';

export default () => {
  return <RnScrolltabView
    style={{marginTop: 20, }}
    initialPage={0}
    renderTabBar={() => <ScrollTabBar />}
  >
    <Text tabLabel='Tab#1'>My</Text>
    <Text tabLabel='Tab#2 word word'>favorite</Text>
    <Text tabLabel='Tab#3 word word word'>project</Text>
    <Text tabLabel='Tab#4 word word word word'>favorite</Text>
    <Text tabLabel='Tab#5'>project</Text>
  </RnScrolltabView>;
}

// Overlay
import { ScrollView } from 'react-native';
export default () => {
  return <RnScrolltabView
    style={styles.container}
    renderTabBar={()=><DefaultTabBar backgroundColor='rgba(255, 255, 255, 0.7)' />}
    tabBarPosition='overlayTop'
  >
    <ScrollView tabLabel='iOS'>
      <Image source={require('./1.png')}/>
      <Image source={require('./2.png')}/>
      <Image source={require('./3.png')}/>
      <Image source={require('./4.png')}/>
    </ScrollView>
    <ScrollView tabLabel='Android'>
      <Image source={require('./1.png')}/>
      <Image source={require('./2.png')}/>
      <Image source={require('./3.png')}/>
      <Image source={require('./4.png')}/>
    </ScrollView>
  </ScrollableTabView>;
}

Props

Prop	Type	Default	description
renderTabBar	function: return ReactComponent	-	accept 1 argument `props` and should return a component to use as the tab bar. The component has `goToPage`, `tabs`, `activeTab` and `ref` added to the props, and should implement `setAnimationValue` to be able to animate itself along with the tab content. You can manually pass the `props` to the TabBar component. also if `renderTabBar = false`, will not render tab bar
tabBarPosition	string	top	tab bar position `bottom \| overlayTop \| overlayBottom`, Custom tab bars must consume a style prop on their outer element to support this feature: `style={this.props.style}`
onChangeTab	function	-	function to call when tab changes, should accept 1 argument which is an Object containing two keys: `i`: the index of the tab that is selected, `ref`: the ref of the tab that is selected
onScroll	function	-	function to call when the pages are sliding, should accept 1 argument which is an Float number representing the page position in the slide frame.
locked	boolean	false	disables horizontal dragging to scroll between tabs, default is false
initialPage	Integer	-	the index of the initially selected tab, defaults to 0 === first tab.
page	Integer	-	set selected tab
children	ReactComponents	-	each top-level child component should have a `tabLabel` prop that can be used by the tab bar component to render out the labels. The default tab bar expects it to be a string, but you can use anything you want if you make a custom tab bar.
tabBarUnderlineStyle	View.propTypes.style		style of the default tab bar's underline.
tabBarBackgroundColor	String		color of the default tab bar's background, defaults to `white`
tabBarActiveTextColor	String		color of the default tab bar's text when active, defaults to `'#fb3500'`
tabBarInactiveTextColor	String		color of the default tab bar's text when inactive, defaults to `black`
tabBarTextStyle	Object		Additional styles to the tab bar's text. Example: `{fontFamily: 'Roboto', fontSize: 15}`
style	View.propTypes.style
contentProps	Bool		props that are applied to root `ScrollView`/`ViewPagerAndroid`. Note that overriding defaults set by the library may break functionality; see the source for details.
scrollWithoutAnimation	Bool		on tab press change tab without animation.
prerenderingSiblingsNumber	Integer		pre-render nearby # sibling, `Infinity` === render all the siblings, default to 0 === render current page.

License

MIT

@everything-registry/sub-chunk-2533 @infinitebrahmanuniverse/nolb-ray

1.0.2

7 years ago

1.0.1

8 years ago

1.0.0

8 years ago