OCBottomNavigation

Introduction

'OCBottomNavigation' is a custom bottom navigation that can be configured for items ranging between 3 and 5.

Features

• Supports badges to notify about a tab item.
• Supports selected item indicator.
• Navigation items can be customised.
• Supports accessibility features for improved user experience.

OCBottomNavigation

'OCBottomNavigation' is a custom view that accepts 4 parameters in constructor.

• selected index for binding selection
• list of tab items- [T], T being OCBottomNavigationItemProtocol
• style for bar and items- OCBottomNavigationBarStyle
• a callback for when an item is clicked

OCBottomNavigationItemProtocol

'OCBottomNavigationItemProtocol' is a protocol for a navigation item. It comprises of

• title, for item title
• image configuration, for item image
• item configuration, for item
• badge type, for showing item badge
• content, for showing item content

Integration

import SwiftUI

struct ContentView: View {

    @State private var selectedIndex: Int = 0
    
    /// List of navigation items
        let tabItems = [
        OCBottomNavigationItem(title: "HomeExtendedTitle",
                               imageStyle: OCBottomNavigationImage(selectedImage: .home),
                               badgeType: .dot(badgeStyle: OCBadgeStyle()),
                               content: {
                                   AnyView(HomePage())
                               }
                              ),
        OCBottomNavigationItem(title: "Features",
                               imageStyle: OCBottomNavigationImage(selectedImage: .features),
                               content: {
                                   AnyView(FeaturesPage())
                               }),
        OCBottomNavigationItem(title: "Profile",
                               imageStyle: OCBottomNavigationImage(selectedImage: .user),
                               content: {
                                   AnyView(SettingsPage())
                               })]
    
    var body: some View {
        OCBottomNavigation(selectedIndex: $selectedIndex,
                           tabItems: tabItems) { _ in
            
        }
    }
}