Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@mindinventory/react-native-tab-bar-interaction
Advanced tools
Beautiful Tabbar Interaction with Sliding Inset FABs, made with React Native.
Check it out on Béhance (https://www.behance.net/gallery/68043143/Tab-bar-interaction-with-animated-icons)
Check it out on Dribbble (https://dribbble.com/shots/4844696-Tab-bar-interaction-with-animated-icons)
using yarn:
yarn add @mindinventory/react-native-tab-bar-interaction
import TabBar from "@mindinventory/react-native-tab-bar-interaction";
...
const tabs = [
{
name: 'Home',
activeIcon: <Icon name="home" color="#fff" size={25} />,
inactiveIcon: <Icon name="home" color="#4d4d4d" size={25} />
},
{
name: 'list',
activeIcon: <Icon name="list-ul" color="#fff" size={25} />,
inactiveIcon: <Icon name="list-ul" color="#4d4d4d" size={25} />
},
{
name: 'camera',
activeIcon: <Icon name="camera" color="#fff" size={25} />,
inactiveIcon: <Icon name="camera" color="#4d4d4d" size={25} />
},
{
name: 'Notification',
activeIcon: <Icon name="bell" color="#fff" size={25} />,
inactiveIcon: <Icon name="bell" color="#4d4d4d" size={25} />
},
{
name: 'Profile',
activeIcon: <Icon name="user" color="#fff" size={25} />,
inactiveIcon: <Icon name="user" color="#4d4d4d" size={25} />
},
];
...
return (
<Tabbar
tabs={tabs}
tabBarContainerBackground='#fff'
tabBarBackground='#6699ff'
activeTabBackground='#6699ff'
labelStyle={{ color: '#4d4d4d', fontWeight: '600', fontSize: 11 }}
onTabChange={() => console.log('Tab changed')}
/>
);
prop | value | required/optional | description |
---|---|---|---|
tabs | array | required | It is user for showing icon and label. |
tabBarContainerBackground | string | optional | Use for change tabBar container color. |
tabBarBackground | string | required | Use for change tabBar background color. |
activeTabBackground | string | optional | Use for change active tab background color. |
labelStyle | style | optional | Use for apply style on tab label. |
onTabChange | function | optional | Use to perform any action when click on tab. |
containerBottomSpace | number | optional | Use to add space between tabBar container and from bottom of screen. |
containerWidth | number | optional | Use for set width of tabBar container |
containerTopRightRadius | number | optional | Use for add top right radius on tabBar container |
containerTopLeftRadius | number | optional | Use for add top left radius on tabBar container |
containerBottomLeftRadius | number | optional | Use for add bottom left radius on tabBar container |
containerBottomRightRadius | number | optional | Use for add bottom right radius on tabBar container |
properties | value | required/optional | description |
---|---|---|---|
name | string | required | use for showing tab label. |
activeIcon | component | required | Use for showing tab active icon/image. |
inactiveIcon | component | required | Use for showing tab inactiveIcon icon/image. |
react-native-svg
How to migrate version 1.0.0 to 2.0.1.
React-native-tabbar-interaction is MIT-licensed.
We’d be really happy if you send us links to your projects where you use our component. Just send an email to sales@mindinventory.com And do let us know if you have any questions or suggestion regarding our work.
FAQs
An animated bottom tabbar component for React Native.
The npm package @mindinventory/react-native-tab-bar-interaction receives a total of 44 weekly downloads. As such, @mindinventory/react-native-tab-bar-interaction popularity was classified as not popular.
We found that @mindinventory/react-native-tab-bar-interaction demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.