@mindinventory/react-native-tab-bar-interaction

v2.2.3

An animated bottom tabbar component for React Native. For more information about how to use this package see README

Latest version published 2 years ago

License: MIT

NPM

GitHub

Package Health Score

46 / 100

security
Security review needed
popularity
Limited
maintenance
Inactive
community
Sustainable

Explore Similar Packages

Security

Security review needed

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
2.2.3	\|	05/2022	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.1.4	\|	08/2021		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.0.3	\|	08/2018		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Limited

Weekly Downloads (62)

GitHub Stars: 779
Forks: 171
Contributors: 20

Direct Usage Popularity

The npm package @mindinventory/react-native-tab-bar-interaction receives a total of 62 downloads a week. As such, we scored @mindinventory/react-native-tab-bar-interaction popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package @mindinventory/react-native-tab-bar-interaction, we found that it has been starred 779 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 20
Funding: No

With more than 10 contributors for the @mindinventory/react-native-tab-bar-interaction repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like @mindinventory/react-native-tab-bar-interaction is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

No Recent Commits

Open Issues: 0
Open PR: 0
Last Release: 2 years ago
Last Commit: 2 years ago

Further analysis of the maintenance status of @mindinventory/react-native-tab-bar-interaction based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for @mindinventory/react-native-tab-bar-interaction is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 6 years
Dependencies: 2 Direct
Versions: 24
Install Size: 21.2 kB
Dist-tags: 1
# of Files: 7
Maintainers: 10
TS Typings: No

@mindinventory/react-native-tab-bar-interaction has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

React Native Tabbar Interaction

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)

Installation

using npm:

npm install @mindinventory/react-native-tab-bar-interaction

using yarn:

yarn add @mindinventory/react-native-tab-bar-interaction

Dependencies

react-native-svg
react-native-svg-transformer

Configure dependencies in file metro.config.js update this module export.

const { getDefaultConfig } = require("metro-config");

module.exports = (async () =&gt; {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext =&gt; ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

create one declarations.d.ts in your root directory.

declare module "*.svg" {
  import React from 'react';
  import { SvgProps } from "react-native-svg";
  const content: React.FC;
  export default content;
}

Supported platform

Android
Ios

Usage


import Tabbar from "@mindinventory/react-native-tab-bar-interaction";
...

const tabs = [
  {
    name: 'Home',
    activeIcon: ,
    inactiveIcon: 
  },
  {
    name: 'list',
    activeIcon: ,
    inactiveIcon: 
  },
  {
    name: 'camera',
    activeIcon: ,
    inactiveIcon: 
  },
  {
    name: 'Notification',
    activeIcon: ,
    inactiveIcon: 
  },
  {
    name: 'Profile',
    activeIcon: ,
    inactiveIcon: 
  },

];
...

return (
   console.log('Tab changed')}
  /&gt;
);

Component props

Tabbar

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
defaultActiveTabIndex	number	optional	Use to set default active tab
transitionSpeed	number	optional	Use to set transition speed

tabs

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.

Version Migration

Version: 2.2.2

How to migrate version 1.0.0 to 2.1.2+.

LICENSE!

React-native-tabbar-interaction is MIT-licensed.

Let us know!

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.

@mindinventory/react-native-tab-bar-interaction dependencies

d3-shape react-native-svg

@mindinventory/react-native-tab-bar-interaction development dependencies

@types/node @types/react-native @types/d3-shape

FAQs

What is @mindinventory/react-native-tab-bar-interaction?

An animated bottom tabbar component for React Native. Visit Snyk Advisor to see a full health score report for @mindinventory/react-native-tab-bar-interaction, including popularity, security, maintenance & community analysis.

Is @mindinventory/react-native-tab-bar-interaction popular?

The npm package @mindinventory/react-native-tab-bar-interaction receives a total of 62 weekly downloads. As such, @mindinventory/react-native-tab-bar-interaction popularity was classified as limited. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is @mindinventory/react-native-tab-bar-interaction well maintained?

We found indications that @mindinventory/react-native-tab-bar-interaction is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is @mindinventory/react-native-tab-bar-interaction safe to use?

While scanning the latest version of @mindinventory/react-native-tab-bar-interaction, we found that a security review is needed. A total of 0 vulnerabilities or license issues were detected. See the full security scan results.

Last updated on 6 May-2024, at 11:32 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP