react-native-jellytoolbar

1.1.1 • Public • Published

react-native-jellytoolbar

license Version

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

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

Install

npm i react-native-jellytoolbar

DownloadsWeekly Downloads

0

Version

1.1.1

License

MIT

Unpacked Size

2.72 MB

Total Files

8

Last publish

Collaborators

  • jaeheyk