react-native-selected-page

react-native-selected-page is a light-weight react-native tab menu library, It supports animated fading and font scaling, and it uses native animations and gestures, so it can give you the best performance experience as native apps

Features

• Support label animation fading and font scaling, making user operations smoother
• Support progress bars that follow animation and size adaptation
• Support independent use, you can use Header alone, or float Header, or animation fading Label
• Support high customization

Install

yarn add 'https://github.com/hellohublot/react-native-selected-page.git'

Usage

View Full Example

import { HTPageHeaderView, HTPageContentView, HTPageManager, HTSelectedLabel } from 'react-native-selected-page'

this.pageManager = new HTPageManager({
	data: [
		{ title: 'hello', backgroundColor: 'skyblue' },
		{ title: 'world', backgroundColor: 'coral' },
		{ title: 'ride bike', backgroundColor: 'pink' },
		{ title: 'sunbathing', backgroundColor: 'turquoise' },
		{ title: 'drink', backgroundColor: 'salmon' },
	],
	initialScrollIndex: 1,
	onSelectedPageIndex: value => {
		console.log(value)
	}
})

let Header = this.pageManager.renderHeaderView
let Content = this.pageManager.renderContentView

<Header
	style={{ height: 50, backgroundColor: 'white', borderBottomColor: '#F5F5F5', borderBottomWidth: 1 }}
	titleFromItem={ item => item.title }
	itemContainerStyle={{ paddingHorizontal: 10, marginLeft: 10 }}
	itemTitleStyle={{ fontSize: 17 }}
	itemTitleNormalStyle={{ color: '#333' }}
	itemTitleSelectedStyle= {{ color: 'orange', fontSize: 20}}
	cursorStyle={{ width: 15, height: 2, borderRadius: 1, backgroundColor: 'orange' }}
/>
<Content
	renderItem={({item, index}) => {
	return (
		<View style={{ flex: 1, backgroundColor: item.backgroundColor }}>
		</View>
	)}}
/>

Contact

hellohublot, hublot@aliyun.com