Pagerview

The PagerView component is that is designed to create a tab-based view with a sliding indicator on top of it. It uses the "react-native-pager-view" library to handle animations.

Import

import { PagerView } from '@tra-tech/react-native-kitra';
 

Usage

import { PagerView } from '@tra-tech/react-native-kitra';

import { Text, View, StyleSheet } from 'react-native';

const App = () => (
  <View style={{  flex: 1 }}>
    <PagerView containerStyle={{ marginTop: 10 }} >
      <View key="React" style={style.itemContainer}>
        <Text>Pager</Text>
      </View>
      <View key="Native" style={style.itemContainer}>
        <Text>View</Text>
      </View>
      <View key="Kitra" style={style.itemContainer}>
        <Text>Component</Text>
      </View>
    </PagerView>
  </View>
);

const style = StyleSheet.create({
  itemContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
});

export default App;
 

Props

Prop name	Type	Required	Description
children	React.ReactNode	Yes	A required prop that represents the content to display within the PagerView component.
containerStyle	StyleProp<ViewStyle>	No	Additional styles to apply to the pager view container.
pageContainerStyle	StyleProp<ViewStyle>	No	Additional styles to apply to the page container.
headerSliderStyle	StyleProp<ViewStyle>	No	Style of header slider.
headerContainerStyle	StyleProp<ViewStyle>	No	Style of header slider container.
headerLabelStyle	StyleProp<TextStyle>	No	Text style of header text.
injectPagerRef	boolean	No	An optional boolean prop that determines whether to inject the PagerView reference into each child component's props. Default value: false
showDivider	boolean	No	Determines whether the divider is shown or not. Default value:true
dividerStyle	StyleProp<ViewStyle>	No	Style of divider
dividerColor	string	No	Color of divider
icons	React.ReactElement<typeof Icon> []	No	Icon list for header texts.
theme	UITheme	No	The theme to use for the component.
typography	UITypography	No	The typography to use for the component.