BottomNavBar Component

[PrajwalK44]

Summary

I propose adding a new component to this repository: BottomNavBar. This component would represent a bottom navigation bar, a common UI pattern in mobile applications, allowing users to navigate between various sections such as "Home," "History," "Explore," and "Settings."

Why the BottomNavBar Component?

• Essential for Mobile Apps: Bottom navigation bars are an essential and widely-used pattern in mobile applications, making navigation between primary app screens intuitive and consistent.
• Alignment with the Project Scope:
  • This component can be implemented using the TabsPrimitive from @rn-primitives.
  • It fits the updated scope of this project by being built on primitives and avoiding external third-party library dependencies.
• Accessible by Design: Utilizing TabsPrimitive ensures accessibility, as it already aligns with React Native's accessibility features.
• Style-Agnostic: The BottomNavBar will focus on functionality while allowing users to customize styles and icons based on their requirements.

Features of BottomNavBar

The proposed BottomNavBar will include the following:

• Customizable Tabs: Support for dynamic creation of tabs with icons, labels, and callbacks for select/deselect behaviors.
• State Management: Utilize TabsPrimitive.Root for managing active state.
• Lightweight and Flexible: Focus on simplicity and keeping the component style-agnostic.
• Usage of RN Primitives:
  • TabsPrimitive.Trigger for tab buttons.
  • TabsPrimitive.Content for individual tab content.

Example-

Next Steps

If the idea aligns with the maintainers' vision for this project, I would be excited to:

1. Implement the BottomNavBar component by adhering to CONTRIBUTING.md guidelines.
2. Document the usage of the component, including best practices.
3. Write tests to ensure stability.

Looking forward to feedback, and I’m happy to iterate on the idea.