Different UI after upgrade to Xcode 12

[wong-kene]

Hello,,
I develope apps on xcode 11, this library is running well. then i switch project to Xcode 12. after build project and run on device, UI look like on my screenshoot.

Any wrong on my source code?

Thanks

[Badarinath Venkatnarayansetty]

Thank you @wong-kene for checking out the library. I have fixed the issue, pleaseuse the latest version ofStepperView`

pod 'StepperView','~> 1.6.4'

[Badarinath Venkatnarayansetty]

As the latest version has the fix closing this issue.

[wong-kene]

thank for your response, i try to update library, the result look like below.
how to remove outside border?

[Badarinath Venkatnarayansetty]

Can you share the snippet u are using for indicators ?

[wong-kene]

this is my code, still same with my first post

[wong-kene]

struct stepperView: View {

@State var stepPosition = 2
var body: some View {

VStack {
    StepperView()
        .addSteps(
            [
                Text("Data").font(.system(size: self.stepPosition == 1 ? 12 : 12)).foregroundColor(self.stepPosition == 1 ? Color(#colorLiteral(red: 0.7411132455, green: 0.7412185669, blue: 0.7410798669, alpha: 1)) : Color(#colorLiteral(red: 0.7411132455, green: 0.7412185669, blue: 0.7410798669, alpha: 1))),
                Text("Statement").font(.system(size: self.stepPosition == 2 ? 12 : 12)).foregroundColor(self.stepPosition == 2 ? Color(#colorLiteral(red: 0.7411132455, green: 0.7412185669, blue: 0.7410798669, alpha: 1)) : Color(#colorLiteral(red: 0.7411132455, green: 0.7412185669, blue: 0.7410798669, alpha: 1))),
                Text("Signature").font(.system(size: self.stepPosition == 3 ? 12 : 12)).foregroundColor(self.stepPosition == 3 ? Color(#colorLiteral(red: 0.7411132455, green: 0.7412185669, blue: 0.7410798669, alpha: 1)) : Color(#colorLiteral(red: 0.7411132455, green: 0.7412185669, blue: 0.7410798669, alpha: 1)))
            ]
    )
        .indicators([
            StepperIndicationType.custom(CircledIconView(image: Image(systemName: self.stepPosition >= 1 ? "circle.fill" : "circle"),
                                                         width: 30,
                                                         color: Color(#colorLiteral(red: 0, green: 0.7745513916, blue: 0.7372067571, alpha: 1)),
                                                         strokeColor: Color(#colorLiteral(red: 0, green: 0.7745513916, blue: 0.7372067571, alpha: 1)))
                .eraseToAnyView()),
            StepperIndicationType.custom(CircledIconView(image: Image(systemName: self.stepPosition >= 2 ? "circle.fill" : "circle"),
                                                         width: 30,
                                                         color: Color(#colorLiteral(red: 0, green: 0.7745513916, blue: 0.7372067571, alpha: 1)),
                                                         strokeColor: Color(#colorLiteral(red: 0, green: 0.7745513916, blue: 0.7372067571, alpha: 1)))
                .eraseToAnyView()),
            StepperIndicationType.custom(CircledIconView(image: Image(systemName: self.stepPosition >= 3 ? "circle.fill" : "circle"),
                                                         width: 30,
                                                         color: Color(#colorLiteral(red: 0, green: 0.7745513916, blue: 0.7372067571, alpha: 1)),
                                                         strokeColor: Color(#colorLiteral(red: 0, green: 0.7745513916, blue: 0.7372067571, alpha: 1)))
                .eraseToAnyView())])
        .stepIndicatorMode(StepperMode.horizontal)
        .spacing(110)
        .lineOptions(StepperLineOptions.custom(3, Color(#colorLiteral(red: 0.9489398599, green: 0.949072659, blue: 0.948897779, alpha: 1))))
}
.frame(maxWidth:.infinity)
.edgesIgnoringSafeArea(.top)
.padding(.top,30)
}

}`

[Badarinath Venkatnarayansetty]

@wong-kene Please use the below code, IF you are using StepperIndicationType.custom( u can place and customize any SwiftUI View/

    @State var stepPosition = 2
    var body: some View {

    VStack {
        StepperView()
            .addSteps(
                [
                    Text("Data").font(.system(size: self.stepPosition == 1 ? 12 : 12)).foregroundColor(self.stepPosition == 1 ? Color(#colorLiteral(red: 0.7411132455, green: 0.7412185669, blue: 0.7410798669, alpha: 1)) : Color(#colorLiteral(red: 0.7411132455, green: 0.7412185669, blue: 0.7410798669, alpha: 1))),
                    Text("Statement").font(.system(size: self.stepPosition == 2 ? 12 : 12)).foregroundColor(self.stepPosition == 2 ? Color(#colorLiteral(red: 0.7411132455, green: 0.7412185669, blue: 0.7410798669, alpha: 1)) : Color(#colorLiteral(red: 0.7411132455, green: 0.7412185669, blue: 0.7410798669, alpha: 1))),
                    Text("Signature").font(.system(size: self.stepPosition == 3 ? 12 : 12)).foregroundColor(self.stepPosition == 3 ? Color(#colorLiteral(red: 0.7411132455, green: 0.7412185669, blue: 0.7410798669, alpha: 1)) : Color(#colorLiteral(red: 0.7411132455, green: 0.7412185669, blue: 0.7410798669, alpha: 1)))
                ]
        )
            .indicators([
                StepperIndicationType.custom(
                    Image(systemName: self.stepPosition >= 1 ? "circle.fill" : "circle")
                        .frame(width: 30, height: 30)
                        .foregroundColor(Color(#colorLiteral(red: 0, green: 0.7745513916, blue: 0.7372067571, alpha: 1)))
                ),
                StepperIndicationType.custom( Image(systemName: self.stepPosition >= 2 ? "circle.fill" : "circle")
                                                .frame(width: 30, height: 30)
                                                .foregroundColor(Color(#colorLiteral(red: 0, green: 0.7745513916, blue: 0.7372067571, alpha: 1)))
                ),
                StepperIndicationType.custom(Image(systemName: self.stepPosition >= 3 ? "circle.fill" : "circle")
                                                .frame(width: 30, height: 30)
                                                .foregroundColor(Color(#colorLiteral(red: 0, green: 0.7745513916, blue: 0.7372067571, alpha: 1)))
                )
            ])
            .stepIndicatorMode(StepperMode.horizontal)
            .spacing(110)
            .lineOptions(StepperLineOptions.custom(3, Color(#colorLiteral(red: 0.9489398599, green: 0.949072659, blue: 0.948897779, alpha: 1))))
    }
    .frame(maxWidth:.infinity)
    .edgesIgnoringSafeArea(.top)
    .padding(.top, 30)
    }

[Badarinath Venkatnarayansetty]

Solution have been provided above. Please let me know if above one works. Thanks.