React-native-jellytoolbar NPM

react-native-jellytoolbar

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

Installation

Install this library and react-native-svg.

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

Link react-native-svg with native code.

react-native link react-native-svg

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

Usage

Import JellyToolbar:

import JellyToolbar from 'react-native-jellytoolbar';

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.../>}
/>

react-native-jellytoolbar-result

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

react react-native jelly toolbar header jellytoolbar svg ui animation animated

react-native-svg prop-types

@infinitebrahmanuniverse/nolb-react-native-j @everything-registry/sub-chunk-2581 @zalastax/nolb-react-native-j

6 years ago

6 years ago

6 years ago

6 years ago