# SwiftUI SDK Integration

**URL:** <https://community.sendbird.com/t/swiftui-sdk-integration/10082>\
**Category:** iOS\
**Created:** [September 17, 2024, 11:01am UTC](https://community.sendbird.com/t/swiftui-sdk-integration/10082 "2024-09-17T11:01:59Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![GetChivy](https://avatars.discourse-cdn.com/v4/letter/g/a6a055/32.png) [@GetChivy](https://community.sendbird.com/u/GetChivy)\
**Post date:** [September 17, 2024, 11:02am UTC](https://community.sendbird.com/t/swiftui-sdk-integration/10082/1 "2024-09-17T11:02:00Z")

</div>

**[Problem/Question]**  
NavigationBar issue with SwiftUI SDK when a TabView is used.

We found out there is an issue while launching a a the ChannelGroupView using the .groupChannelView method from the GroupChannelListView when it is inside a TabView.

The TabView + HostedController (embedded in the SDK) is provoking the navbar to be added twice resulting in an unwanted top margin (cf screenshot).  
Processing: Screenshot 2024-09-17 at  
  ![Screenshot 2024-09-17 at 12.59.13](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/c/cac8fe607ae3bf6a73cb389f3e403a969d5d7046.jpeg)  
12.45.52.png…

* * *

**[SwiftUI SDK Version]**  
1.0.0-beta.1

**[Reproduction Steps]**

```auto
        var body: some View {
            TabView {
                GroupChannelListView(
                    headerItem: {
                        .init()
                        .rightView { _ in }
                        .titleView { viewConfig in
                            Text("Messages")
                        }
                    }
                )
                .groupChannelView { channelURL, startingPoint, messageListParams in
                    GroupChannelView(
                        channelURL: channelURL,
                        startingPoint: startingPoint,
                        messageListParams: messageListParams,
                        headerItem: {
                            .init()
                            .rightView { _ in }
                        }
                    )
                }
                .tabItem {
                    Image(systemName: "person")
                }
            }
        }

```

**[Frequency]**  
Reproducible 100%

**[Current impact]**  
The navigationbar is messed up.

---

<div class="post-metadata">

**Author:** ![Tez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tez/32/146_2.png) [@Tez](https://community.sendbird.com/u/Tez)\
**Post date:** [September 19, 2024, 4:41am UTC](https://community.sendbird.com/t/swiftui-sdk-integration/10082/2 "2024-09-19T04:41:47Z")

</div>

Hi @GetChivy  
I just checked this issue.  
Could you check the following to try to resolve the issue?

- Sendbird SwiftUI is provided by hosting viewControllers of Sendbird UIKit.  
During this process, the navigation settings are also set in UIKit, and Sendbird SwiftUI should use the navigationBar configured in Sendbird UIKit.  
When using Sendbird SwiftUI functionality, multiple navigationBars can be exposed if the navigationBar exposed by the SwiftUI is not hidden.
- To work around this issue in the current version, you can add the following options to `View`.

```swift
var body: some View {
    TabView {
        GroupChannelListView()
        .tabItem {
            Image(systemName: "person")
        }
    }
    .navigationBarHidden(true) // <-- Add this logic
}

```

### Result

| **As-is** | **To-be** |
| --- | --- |
| ![](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/c/ca213a41a24b51da201e546a46a5c22aa20b3bb5.jpeg) | ![](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/d/debbdcae5f7a097b70fcfd842f370aaf3f2889ec.jpeg) |

[[Github discussion] How do I fix the multiple navigation bars showing up?](https://github.com/sendbird/sendbird-swiftui-ios/discussions/7)

---

<div class="post-metadata">

**Author:** ![GetChivy](https://avatars.discourse-cdn.com/v4/letter/g/a6a055/32.png) [@GetChivy](https://community.sendbird.com/u/GetChivy)\
**Post date:** [September 21, 2024, 10:28am UTC](https://community.sendbird.com/t/swiftui-sdk-integration/10082/3 "2024-09-21T10:28:34Z")

</div>

Hello @Tez

Thanks for you reply.

I tried your fix, but it does not fix the Navigationbar appearing on the **GroupChannelView**

You can see in the reproducible code below I added the navigationBarHidden(true) directly on the TabView.

```auto
import SwiftUI

extension CustomGroupChannelList.SubView.Builder {
    struct groupChannel: View {
        var body: some View {
            TabView {
                GroupChannelListView(
                    headerItem: {
                        .init()
                        .rightView { _ in }
                        .titleView { viewConfig in
                            Text("Messages")
                        }
                    }
                )
                .groupChannelView({ channelURL, startingPoint, messageListParams in
                    if #available(iOS 16.0, *) {
                        self.toolbar(.hidden, for: .tabBar)
                    } else {
                        // Fallback on earlier versions
                    }
                    return GroupChannelView(
                        channelURL: channelURL,
                        startingPoint: startingPoint,
                        messageListParams: messageListParams,
                        headerItem: {
                            .init()
                            .rightView { _ in }
                        }
                    )
                })
                .onDisappear(perform: {
                    if #available(iOS 16.0, *) {
                        self.toolbar(.hidden, for: .tabBar)
                    } else {
                        // Fallback on earlier versions
                    }
                })
                .tabItem {
                    Image(systemName: "person")
                }
            }.navigationBarHidden(true)
        }
    }
}

#Preview {
    CustomGroupChannelList.SubView.Builder.groupChannel()
}

```

But i’s still showing the same on the **GroupChannelView**.

 ![Screenshot 2024-09-21 at 12.27.56](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/3/301ef84ae22ec68dbc9242638c53e9459d5ba7d3.jpeg)

The use case is very simple : we want our messenger to be accessible from our app’s main navigation which is a Tabbar with 4 major screens.

---

<div class="post-metadata">

**Author:** ![Tez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tez/32/146_2.png) [@Tez](https://community.sendbird.com/u/Tez)\
**Post date:** [September 25, 2024, 7:41pm UTC](https://community.sendbird.com/t/swiftui-sdk-integration/10082/4 "2024-09-25T19:41:04Z")

</div>

Hi @GetChivy,  
Sorry for the late check!  
I found the problem when using it as a modal type and reproduced the same as you.  
I have done some rough testing on this and will be releasing a new version with the fix.  
And I will comment back when it’s released.

 ![Simulator Screenshot - iPhone 16 Pro - 2024-09-26 at 04.40.19](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/2X/c/ce668bc4fac672852d953019c4d667e04d92732e.jpeg)

---

<div class="post-metadata">

**Author:** ![GetChivy](https://avatars.discourse-cdn.com/v4/letter/g/a6a055/32.png) [@GetChivy](https://community.sendbird.com/u/GetChivy)\
**Post date:** [September 25, 2024, 8:10pm UTC](https://community.sendbird.com/t/swiftui-sdk-integration/10082/5 "2024-09-25T20:10:59Z")

</div>

Awesome Tez ! Thanks for the feedback, really appreciate.

To help debugging :

I used the modal in the QuickStartSwiftUI project to have a separated Tabbar independent from the main navigation of this project.  
However, the issue is _not_ related to the “modal”, but it’s definitely related to the “tabbar”.  
Also, with a simple regular tabbar as the main navigation, this double navbar appears just like on the previous screenshot.

---

<div class="post-metadata">

**Author:** ![Tez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tez/32/146_2.png) [@Tez](https://community.sendbird.com/u/Tez)\
**Post date:** [September 25, 2024, 8:47pm UTC](https://community.sendbird.com/t/swiftui-sdk-integration/10082/6 "2024-09-25T20:47:22Z")

</div>

Thanks for the quick reply.  
I said modal, but it meant presented style.  
In the screenshot in question, a tabview based screen is being presented as a modal style.  
Sendbird SwiftUI are using uikit’s viewController hosted, and if it is displayed in a modal style in SwiftUi, we will need to modify internal hierarchy search logic.  
I’d like to test this a bit more thoroughly, so could you share the your test code to show how you got the tabview based screen to draw the modal style on the screen?

---

<div class="post-metadata">

**Author:** ![GetChivy](https://avatars.discourse-cdn.com/v4/letter/g/a6a055/32.png) [@GetChivy](https://community.sendbird.com/u/GetChivy)\
**Post date:** [September 26, 2024, 6:01pm UTC](https://community.sendbird.com/t/swiftui-sdk-integration/10082/7 "2024-09-26T18:01:30Z")

</div>

Hi @Tez ,

The sample code is in my first message above (including the TabView being presented).

And, in order to present this TabView, I modified this view from your test project, by commenting the .backgroun() method, and adding a .sheet method.

```auto
struct CustomSampleSubView: View {
    var keyfunction: CustomSampleInfo.KeyFunction
    @StateObject var viewModel: CustomSampleSubViewModel
    @State private var isActive = false
    @State private var destinationView: AnyView? = nil
    
    init(keyfunction: CustomSampleInfo.KeyFunction) {
        self.keyfunction = keyfunction
        _viewModel = StateObject(wrappedValue: CustomSampleSubViewModel(with: keyfunction))
    }
    
    var body: some View {
        List {
            ForEach(keyfunction.viewItems, id: \.viewFullPath) { viewItem in
                Button(action: {
                    Task {
                        await viewModel.loadEnvironment(for: viewItem)
                        self.destinationView = AnyView(
                            CustomSampleManager.viewForName(viewItem)
                                .environmentObject(viewModel)
                        )
                        
                        self.isActive = true
                    }
                }) {
                    CustomCell(viewItem: viewItem)
                }
                .sheet(isPresented: $isActive, content: {
                    return destinationView
                })
// .background(
// NavigationLink(
// destination: destinationView,
// isActive: $isActive,
// label: { EmptyView() }
// )
// .hidden()
// )
            }
        }
        .navigationTitle(keyfunction.name)
    }
}

```

Hope this helps. Let me know if you want to setup a call and discuss it further.

---

<div class="post-metadata">

**Author:** ![Tez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tez/32/146_2.png) [@Tez](https://community.sendbird.com/u/Tez)\
**Post date:** [September 29, 2024, 3:20pm UTC](https://community.sendbird.com/t/swiftui-sdk-integration/10082/8 "2024-09-29T15:20:38Z")

</div>

Hi @GetChivy  
I have done a lot of internal testing and fixed the issues, including the one you commented on at the end.  
I will be releasing a new version within the next week or so.  
Thanks for the feedback!

---

<div class="post-metadata">

**Author:** ![Tez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/tez/32/146_2.png) [@Tez](https://community.sendbird.com/u/Tez)\
**Post date:** [October 2, 2024, 2:57am UTC](https://community.sendbird.com/t/swiftui-sdk-integration/10082/9 "2024-10-02T02:57:27Z")

</div>

@GetChivy The fixed version has been released. please use [1.0.0-beta.2 version.](https://github.com/sendbird/sendbird-swiftui-ios/releases)