UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

UIPickerView integration in SwiftUI

Forums > SwiftUI

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]]

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

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

    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.clipsToBounds = true
            view.layer.cornerRadius = view.bounds.height * 0.1
            view.layer.borderWidth = 0.5
            view.layer.borderColor = UIColor.black.cgColor

            return view


Hacking with Swift is sponsored by Superwall

SPONSORED Superwall lets you build & test paywalls without shipping updates. Run experiments, offer sales, segment users, update locked features and more at the click of button. Best part? It's FREE for up to 250 conversions / mo and the Superwall team builds out 100% custom paywalls – free of charge.

Learn More

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

Unknown user

You are not logged in

Log in or create account

Link copied to your pasteboard.