Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@siocraft/bottom-tabs
Advanced tools
A simple and customizable React Native component that implements an animated bottom tab bar for React Navigation v6.
👋 If your app is deployed to AppStore/GooglePlay and you're using this package, send me a DM on Twitter @torgeadelin
In order to use the component, you need to have React Navigation v6 installed. You also need styled-components.
If using yarn
yarn add react-native-animated-nav-tab-bar
If using npm
npm install react-native-animated-nav-tab-bar
If you updated the package to a new version, don't forget to run npm run start -- --reset-cache
to have the latest version.
// Javascript
import { AnimatedTabBarNavigator } from "react-native-animated-nav-tab-bar";
// Typescript
import {
AnimatedTabBarNavigator,
DotSize, // optional
TabElementDisplayOptions, // optional
TabButtonLayout, // optional
IAppearanceOptions // optional
} from 'react-native-animated-nav-tab-bar'
Then create a navigator using the navigation builder that you imported, and create your navigation! Look at the example below.
...
const Tabs = AnimatedTabBarNavigator();
export default () => (
<Tabs.Navigator
// default configuration from React Navigation
tabBarOptions={{
activeTintColor: "#2F7C6E",
inactiveTintColor: "#222222"
}}
>
// Home Screen
<Tabs.Screen name="Home" component={Home} />
// Other screens go here.
...
</Tabs.Navigator>
)
If you'd like to add icons to your Bottom Navigation you can use react-native-vector-icons. Look at an example of how to add icons to your tab bar.
Example
import Icon from 'react-native-vector-icons/Feather';
...
export default () =>
<Tabs.Navigator
tabBarOptions={{
activeTintColor: "#2F7C6E",
inactiveTintColor: "#222222"
}}
>
<Tabs.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({ focused, color, size }) => (
<Icon
name="Home"
size={size ? size : 24}
color={focused ? color : "#222222"}
focused={focused}
color={color}
/>
)
}}
/>
</Tabs.Navigator>
...
The navigation component takes two main props which help you customize your navigation. tabBarOptions
is the default prop from React Navigation which you can use to specify different tint colors and more (see available options below). for all the details. The second prop is appearance
. Here you'll be able to adjust several properties of the tab bar as you wish. See the available properties above.
tabBarOptions
activeTintColor
- Label and icon color of the active tab item.inactiveTintColor
- Label and icon color of the inactive tab item.activeBackgroundColor
- Background color of the active tab item.tabStyle
- Style object for the tab wrapper (Note! it overrides the properties in appearance
prop (see below).labelStyle
- Style object for the tab label text.appearance
✅topPadding
(default: 20) - Space between the tab button and the wrapper (top)
✅horizontalPadding
(default: 20) - Vertical space between for the tab buttons
✅tabBarBackground
(default: "white") - Background color for the wrapper that contains the navigation tabs
✅shadow
(default: true) - If set to true, the wrapper has a light shadow
✅activeTabBackgrounds
- Array of hex colours for the background of each tab when active. (if not specified, falls back to the activeBackgroundColor
from tabBarOptions
)
✅activeColors
- Array of hex colours for the tint of each tab when active. (if not specified, falls back to the activeTintColor
from tabBarOptions
)
✅floating
(default: false) - If set to true, the nav bar will float on top of the current screen. Look at examples above.
✅whenActiveShow
(default: "both") Configure the appearance of the active tab. Available values both
, label-only
, icon-only
.
✅whenInactiveShow
(default: "icon-only") Configure the appearance of the inactive tabs. Available values both
, label-only
, icon-only
.
✅tabButtonLayout
(default: "horizontal") Configure the layout of the tab button. Available values vertical
, horizontal
.
✅dotCornerRadius
(default: 100) Corner radius for the active background / dot.
✅dotSize
(default: "medium") Size of dot for the active tab. Available values small
, medium
, large
.
Note! Make sure you reload your view after changing the props. The animation might be stuck while changing them dynamically.
tabStyle
object when I set paddingTop
. Solution: You must provide the same value for paddingTop
in both tabStyle
object and topPadding
property from appearance
. This is due to the fact that the dot / active background uses position absolute, and the parent's padding top does not affect it.Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.
If you raise an issue, please add proper steps to reproduce it and proper logs. Thanks!
Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub
Catalin Torge @torgeadelin
FAQs
Animated React Native TabBar Navigator for React Navigation
We found that @siocraft/bottom-tabs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.