'How do you display the AudioKit BluetoothMIDIButton in a SwiftUI app?

I built an app using AudioKit (5.3.3) to receive MIDI sysEx messages and then also send sysEx messages and notes. This works very well, but I have 2 issues I don't know how to implement. I only know SwiftUI at the moment and have not learned UIKit. I want to use the BluetoothMIDIButton to have the app connect to a bluetooth MIDI device. Since it is UIKit, I don't know how to call it? Does anyone have a wrapper for this? Also, I'm not sure how to refresh the MIDI inputs and outputs options when they change. This is what I have for an Input selection picker.

        Picker(selection: $model.midiInSelected , label: Text("Midi Input")) {
            ForEach (0..<model.midi.inputNames.count) { index in
                Text(model.midi.inputNames[index])
                    .tag(index)
            }
        }.onChange(of: model.midiInSelected){ value in
            model.stop()
            model.start(index:model.midiInSelected)
        }

This can crash the app if a MIDI input device disappears. For some reason the inputNames.count is correct, but it seems to try to index past that? In my MIDI Listener I have implemented a receiveMIDiSetupChange, but doesn't seem to help. The List does not seem to rebuild until I close the app and restart it. (if I added a device)

func receivedMIDISetupChange() {
    stop() //Stops Inputs
    midi.closeOutput() // Close Outputs.
    self.midiInSelected = 0
    self.midiOutSelected = 0
    start(index: self.midiInSelected)
    midi.openOutput(index: midiOutSelected)
}

Thank you for the comment, here is the result:

struct blueView: UIViewRepresentable {
    func makeUIView(context: Context) -> BluetoothMIDIButton {
        let v = BluetoothMIDIButton()
        return v
    }
    
    func updateUIView(_ bluetoothButton: BluetoothMIDIButton, context: Context){
        
    }
    
}

struct blueToothSwift: View {
    var body: some View {
        ZStack{
            Rectangle()
                .cornerRadius(10)
                .shadow(color: .black, radius: 1, x:1, y: 1)
                .foregroundColor(.white)
        HStack{
            Image("bluetooth")
                .resizable(resizingMode: .stretch)
                .frame(width: 50, height: 50, alignment: .center)
            Text("Search for Bluetooth")
        }
        blueView()
        }.frame(width: 160, height: 50, alignment: .center)
    }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source