react-native-jellytoolbar

React Native component for creating jelly-like toolbar.
Inspired by Yalantis' JellyToolbar with Kotlin.

Installation

1. Install this library and react-native-svg.

npm install react-native-jellytoolbar react-native-svg --save

1. Link react-native-svg with native code.

react-native link react-native-svg

For more information about react-native-svg, check this repository.

Usage

1. Import JellyToolbar:

import JellyToolbar from 'react-native-jellytoolbar';

1. Use as follows:

<JellyToolbar
  isStatusBarTranslucent = {true}
  height = {80}
  tabWidth = {64}
  primaryColor = '#5B86E5'
  secondaryColor = '#36D1DC'
  headerText = {'Menu'}
  headerTextSize = {20}
  placeholder = {'Search'}
  inputTextSize = {20}
  menuIcon={<Icon.../>}
  openTabIcon={<Icon.../>}
  closeTabIcon={<Icon.../>}
/>

Properties

Prop	Type	Description	Default	Required
isStatusBarTranslucent	boolean	Note: For Android Whether StatusBar is translucent or not	false
height	number	Height of toolbar. If you set isStatusBarTranslucent = {true}, this value should contain height of StatusBar.	None	O
tabWidth	number	Width of views that contain menuIcon, openTabIcon and closeTabIcon	None	O
primaryColor	string	Color of header and final color of searchbar gradient	None	O
secondaryColor	string	Initial Color of searchbar gradient	None	O
headerText	string	Text used in header section	Header Text
headerTextSize	number	fontSize of hederText	None	O
placeholder	string	Text used as placeholder of textinput	Search...
inputTextSize	number	fontSize of placeholder and typed text	None	O
menuIcon	element	Component used in menu section(left side of header)	None
openTabIcon	element	Component used in open tab	None
closeTabIcon	element	Component used in close tab	None

License

MIT