React-native-useful-screens NPM

About

A set of screens with headers for React Native.

Installation

npm install react-native-useful-screens

yarn add react-native-useful-screens

Usage

Import

import Screen from 'react-native-useful-screens'

Screen props

props	description	default	type	headerType
headerType	Type of header	Screen.headerTypes.NONE	oneOf(Screen.headerTypes.NONE, Screen.headerTypes.SINGLE, Screen.headerTypes.FLOATING, Screen.headerTypes.IMAGED)	all
title	Header title	undefined	string	all
height	height of header	ios: 44, android: 56	number	all
color	Header color	undefined	string	all
children	Screen content	undefined	React.Node	all
topComponent	Component above content	undefined	React.Node	all
footerComponent	Component below content	undefined	React.Node	all
floatingRatio	speed of expand header	3	number	'floating'
expandedHeight	height of expanded header	ios: 44, android: 56	number	'imaged'
imageSrc	image source for header	undefined	required image	'imaged'

Header types

'none' - Screen.headerTypes.NONE
'single' - Screen.headerTypes.SINGLE
'floating' - Screen.headerTypes.FLOATING
'imaged' - Screen.headerTypes.IMAGED

Example

<Screen
	// Screen props
	headerType={Screen.headerTypes.IMAGED}
	topComponent={TabBar}
	footerComponent={Footer}
	// Single header props
	title="Screen title"
	color="orange"
	leftComponent={DrawerMenuButton}
	rightComponent={AppNavMenu}
	// Imaged header props
	imageSrc={require('./images/header-bg')}
	expandedHeight={240}
>
	<Text>Content</Text>
</Screen>

Demo

Screen.headerTypes.FLOATING	Screen.headerTypes.IMAGED

License

MIT

Changelog

0.0.5 - rename .jsx files to .js
0.0.4 - update docs
0.0.3 - fixed collapsing bug in FloatingNavBar
0.0.2 - fixed imports in ImagedNavBar component, adding demo gifs, update docs
0.0.1 - created module.