{"_id":"@deliriumproducts/react-native-animated-nav-tab-bar","_rev":"1-de0d11e8be8ed1484d20435452a525e1","name":"@deliriumproducts/react-native-animated-nav-tab-bar","dist-tags":{"latest":"2.0.1"},"versions":{"2.0.1":{"name":"@deliriumproducts/react-native-animated-nav-tab-bar","version":"2.0.1","description":"Animated React Native TabBar Component for React Navigation","main":"index.js","scripts":{"test":"test"},"repository":{"type":"git","url":"git+https://github.com/fr3fou/react-native-animated-nav-tab-bar.git"},"keywords":["react","react-native","react-component","react-navigation","navigation","ios","android","tab","tab-bar","bar","animation"],"author":{"name":"Delirium Products!"},"license":"MIT","bugs":{"url":"https://github.com/fr3fou/react-native-animated-nav-tab-bar/issues"},"homepage":"https://github.com/fr3fou/react-native-animated-nav-tab-bar#readme","devDependencies":{"metro-react-native-babel-preset":"^0.54.1"},"dependencies":{"prop-types":"^15.7.2","styled-components":"^4.3.2"},"gitHead":"ddf12fc1741eda7686c09ff1e22138c913eb4246","_id":"@deliriumproducts/react-native-animated-nav-tab-bar@2.0.1","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-ZlrHW5l1q5xRu/svMwXllpZBqWBSZ3PTKR3T2cGWzi2f8nEYxu2tb0mzWhorghcqbM5QMNFDZGBVBNERLjDKTw==","shasum":"c22f490c7a6cd28979fc3977dbcf28bc2a25ca06","tarball":"https://registry.npmjs.org/@deliriumproducts/react-native-animated-nav-tab-bar/-/react-native-animated-nav-tab-bar-2.0.1.tgz","fileCount":8,"unpackedSize":13027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRrR2CRA9TVsSAnZWagAA5koP/RiFou1lhCdHoR8enLED\nZ8JuN0Owao1NVOTXDSBNOlL1P+grKMSIK4j05EQSzVnaYjOqlaDbYmMDZJqI\nk/m7JesuGegRPJ3Oz8artBBRgnI95OdKul1rHK6J5UdPemkRFlt5EYoF5Y5c\nx3PY9MxBLrMo4WsvvQfRIhiwg+GgJSaw9dFLcS96+Xr4Jx7jBZwh1xKyn/0Y\n3aPmRiXEm6uZh5xWfdK2DuuoR+Y3R8j3KMIFH/hde492XJgjzci2+dN35GUe\nmlb6EYVhIRfQ1nfNCW4sSxicPLLOxNHo5Rl1O+Bvaw/8CxGQzdAt2pB5KLRE\nWWBrdllr7hjc007jg+rPn85xnaIkncGDvOWjqLDIA7Z7nKvA0uvmWrHtKc5Q\nrVAzpg+9A8D+CTJSvMe6jlrhrIngt0X/Q+47DQz1kb1njMyx3MNahq+71WOt\nl2+zQNBL2O6QCkfWhtzkNdEUet3/M/CLACUtRac6HNyV57JNZh7XC2pRSa2c\nNoab+phXYNnJS82LYETZy9Mg2a1vGyVTQV4F0BUW785Ue3nzOe8wprcabNbF\ncVAzFf5bb+xb0LickPSBG3tNDERnWORoJLUUdMJUWlTKzzyeHzbZCeaiCF+I\nOjAo0r9U2Ul3Sz/LkNegA7YSxUHMO3CGaFk0+1lMiVpca3KmwwphsJjPXZR9\nHq6r\r\n=gQrx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqu+V5LtzchkWWy+4fkqZwU/2HwHqYasww/o0H/f/ZMQIhANLlQzYasliUj5D1QvJWkbru4BL5Zk+wjDywMBSsb1cx"}]},"maintainers":[{"name":"impzero","email":"lyubo_2317@abv.bg"},{"name":"fr3fou","email":"simo3003@me.com"}],"_npmUser":{"name":"fr3fou","email":"simo3003@me.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-animated-nav-tab-bar_2.0.1_1581692021837_0.9040111968430313"},"_hasShrinkwrap":false}},"time":{"created":"2020-02-14T14:53:41.551Z","2.0.1":"2020-02-14T14:53:41.988Z","modified":"2022-04-05T03:41:11.284Z"},"maintainers":[{"name":"impzero","email":"lyubo_2317@abv.bg"},{"name":"fr3fou","email":"simo3003@me.com"}],"description":"Animated React Native TabBar Component for React Navigation","homepage":"https://github.com/fr3fou/react-native-animated-nav-tab-bar#readme","keywords":["react","react-native","react-component","react-navigation","navigation","ios","android","tab","tab-bar","bar","animation"],"repository":{"type":"git","url":"git+https://github.com/fr3fou/react-native-animated-nav-tab-bar.git"},"author":{"name":"Delirium Products!"},"bugs":{"url":"https://github.com/fr3fou/react-native-animated-nav-tab-bar/issues"},"license":"MIT","readme":"[![npm version](https://badge.fury.io/js/react-native-animated-nav-tab-bar.svg)](https://badge.fury.io/js/react-native-animated-nav-tab-bar)\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/esta/issues)\n[![HitCount](https://hits.dwyl.com/{username}/{project-name}.svg)](https://hits.dwyl.com/{username}/{project-name})\n![npm](https://img.shields.io/npm/dw/react-native-animated-nav-tab-bar.svg)\n\n# react-native-animated-nav-tab-bar\n\nA simple and customisable React Native component that implements an animated bottom tab bar for React Navigation.\n\n- Support for iPhoneX\n\n## Preview\n\n<img src=\"https://i.imgur.com/lRG92ds.gif\" width=\"300\">\n\n## Prerequisites\n\n❗️In order to use the component, you need to have [React Navigation](https://reactnavigation.org/) installed\n\n## Installation\n\nIf using yarn\n\n```\nyarn add react-native-animated-nav-tab-bar\n```\n\nIf using npm\n\n```\nnpm install react-native-animated-nav-tab-bar\n```\n\n## Usage\n\n```javascript\nimport { TabBar } from \"react-native-animated-nav-tab-bar\";\n```\n\nSimply place a `<TabBar />` tag in the `tabBar` in the configuration option object of the navigation function\n\n```javascript\n...\n\nconst Tabs = createBottomTabNavigator();\n\nexport default () => (\n  <Tabs.Navigator\n    tabBarOptions={{\n      activeTintColor: \"#2F7C6E\",\n      inactiveTintColor: \"#222222\"\n    }}\n    tabBar={props => (\n      <TabBar\n        activeColors={['#e6b580', '#8e87d6', '#c095c9']} // or activeColors={'#e6b580'}\n        activeTabBackgrounds={['#ede7e6', '#eae3f6', '#eae4f6']} // or activeTabBackgrounds={'#ede7e6'}\n        {...props}\n      />\n    )}\n  >\n  </Tabs.Navigator>\n```\n\nAdd icons to your Bottom Navigation\nTo use this, you need [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)\n\nExample\n\n```javascript\nimport Icon from 'react-native-vector-icons/Feather';\n...\n\nexport default () =>\n  <Tabs.Navigator\n    tabBarOptions={{\n      activeTintColor: \"#2F7C6E\",\n      inactiveTintColor: \"#222222\"\n    }}\n    tabBar={props => (\n      <TabBar\n        activeColors={\"#2F7C6E\"}\n        activeTabBackgrounds={\"#DFF7F6\"}\n        {...props}\n      />\n    )}\n  >\n    <Tabs.Screen\n      name=\"Home\"\n      component={Home}\n      options={{\n        tabBarIcon: ({ focused, color, size }) => (\n            <Icon\n                name=\"Home\"\n                size={size ? size : 24}\n                color={focused ? color : \"#222222\"}\n                focused={focused}\n                color={color}\n            />\n        )\n      }}\n    />\n    </Tabs.Navigator>\n...\n```\n\n## Documentation\n\n### TabBar Component\n\n| Name                | Description                                                        | Default | Type   |\n| ------------------- | ------------------------------------------------------------------ | ------- | ------ |\n| activeTabBackground | Color of active tab backgorund                                     | #E4F7F7 | String |\n| tabBarBackground    | Backgorund color for the wrapper that contains the navigation tabs | #FFFFFF | String |\n| shadow              | If set to true, the wrapper has a light shadow                     | true    | Bool   |\n| verticalPadding     | Vertical space between for the tab buttons                         | 10      | Number |\n| topPadding          | Space between the tab button and the wrapper (top)                 | 10      | Number |\n\n## Contributing\n\nPull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.\n\n**Working on your first Pull Request?** You can learn how from this free series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)\n\n## Author\n\nCatalin Torge [@torgeadelin](https://twitter.com/torgeadelin)\n\n## License\n\n[MIT](https://github.com/torgeadelin/react-native-animated-nav-tab-bar/blob/master/LICENSE)\n","readmeFilename":"README.md"}