React Native Curved Bottom Bar

Overview

The react-native-curved-bottom-bar is a high-performance, beautifully designed, and fully customizable curved bottom navigation bar for React Native. It is implemented using react-native-svg and @react-navigation/bottom-tabs, offering a visually appealing UI for React Native applications.

Features

• Customizable Design: Fully customizable curved bottom navigation bar.
• High Performance: Implemented using react-native-svg for optimal performance.
• Easy Integration: Works seamlessly with @react-navigation/bottom-tabs.
• Unique Tab Options: Choose between downward or upward curve for the center tab item.
• Flexible Styling: Customize width, height, background color, and border radius of the container view.
• Interactive Elements: Includes functions to render circle button and center tab item.

Installation

To install the react-native-curved-bottom-bar, you need to first install react-native-svg and @react-navigation/bottom-tabs:

npm install react-native-svg @react-navigation/bottom-tabs

After installing the dependencies, you can incorporate the curved bottom bar into your project by following the provided guidelines and utilizing the available props for customization.

Summary

The react-native-curved-bottom-bar offers developers a sleek and performant solution for implementing a curved bottom navigation bar in their React Native applications. With its customizable features and easy integration with @react-navigation/bottom-tabs, this component provides a visually appealing and functional UI element for mobile app development.