Hello, I have the below simple code where a custom pickerView integrated from UIKit to swift UI. Simply, there is a multi PickerView consisting of 3 components. i used the UIPickerview from UIKit in order to customize the viewForRow to be able to manipulate the rowHeight and text adjustment. i have to issues need your help in there:

FIRST) when you run the code, The total width of the picker doesn't fit the screen width, although I defined the component width as UIScreen.main.bounds.width/3. so, three components shall be 100%.

SECOND) How can we make the text size to be dynamic to fit inside its view, if it is long. Take example the row # 0 in component # 1. And the other alternative to make the row height to be dynamic to fit the text size. & what is the best practice for such case where you have long text.

import SwiftUI
import UIKit

struct ContentView: View {
    @State private var selectedArray = [
        ["1", "2", "3", "4", "5"],
        ["Consider long text her: word1, word2, word3, word4, word5", "7", "8", "9", "10"],
        ["11", "12", "13", "14", "15"]
    ]

    var body: some View {
        CustomPicker(dataArrays: $selectedArray)
    }
}

struct CustomPicker: UIViewRepresentable {
    @Binding var dataArrays : [[String]]

    //makeCoordinator()
    func makeCoordinator() -> CustomPicker.Coordinator {
        return CustomPicker.Coordinator(self)
    }

    //makeUIView(context:)
    func makeUIView(context: UIViewRepresentableContext<CustomPicker>) -> UIPickerView {
        let picker = UIPickerView(frame: .zero)
        picker.dataSource = context.coordinator
        picker.delegate = context.coordinator
        return picker
    }

    //updateUIView(_:context:)
    func updateUIView(_ view: UIPickerView, context: UIViewRepresentableContext<CustomPicker>) {
    }

    class Coordinator: NSObject, UIPickerViewDataSource, UIPickerViewDelegate {
        var parent: CustomPicker
        init(_ pickerView: CustomPicker) {
            self.parent = pickerView
        }

        //Number Of Components:
        func numberOfComponents(in pickerView: UIPickerView) -> Int {
            return parent.dataArrays.count
        }

        //Number Of Rows In Component:
        func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
            return parent.dataArrays[component].count
        }

        //Width for component:
        func pickerView(_ pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat {
            return UIScreen.main.bounds.width/3
        }

        //Row height:
        func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
            return 60
        }

        //View for Row
        func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {

            let view = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width/3, height: 60))

            let pickerLabel = UILabel(frame: view.bounds)

            pickerLabel.text = parent.dataArrays[component][row]

            pickerLabel.adjustsFontSizeToFitWidth = true
            pickerLabel.textAlignment = .center
            pickerLabel.lineBreakMode = .byWordWrapping
            pickerLabel.numberOfLines = 0

            view.addSubview(pickerLabel)

            view.clipsToBounds = true
            view.layer.cornerRadius = view.bounds.height * 0.1
            view.layer.borderWidth = 0.5
            view.layer.borderColor = UIColor.black.cgColor

            return view
        }
    }
}