Skip to content

A light-weight native animated tab menu react-native library

Notifications You must be signed in to change notification settings

hellohublot/react-native-selected-page

Repository files navigation

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