SwiftUI custom OTP View, Firebase OTP authentication-Part 03
In this last part of mini series, we will show how to create reusable swift package that consists of OTP view from part 2.
First thins first, lets oopen XCode and create new package. Open XCode and go to File -> New -> Package…
Save our package in selected folder and create local Git repository.
Now lets add some code. In order to use this package, we need to add some parameters that will allow us to dynamically use this control as package.
Now lets add some fields and constructor.
First lets explain our variables. We use 4 parameters where one is Binding as we will need to update property that stores data and use it later.
otpCode is our Binding var that will hold otp code that user enters. We use it later for user authentication so that why it must be Binding.
otpCodeLength is parameter that is setting number of dashes for out otp code.
textColor is parameter that sets the color of our text and dashes.
textSize is setting text size.
Now lets add body of our view.
As we can see, we have used same code from part 02 of our tutorial, with defined parameters of course. Last lets add missing functions that limit user input length depending on otpCodeLength and function that is getting otp code digit at desired index.
Now lets create new tag from our code. In XCode open Source Control Navigator.
Then commit the changes of our source code. Then commit will be shown in right panel. Now right click on lates commit and click tag. Enter desired revision number and click create. We will end up with next result.
Now go to Source Control and choose Push. Check “Include Tags” and click on Push.
Now, next step is to add created package to our app. Open up the OtpView app and in package dependencies right click and choose Add packages...
In search paste the url of our Git repository.
You can choose either branch or exact version like 1.0.3 and click Add package.
Now lets update our ActivateAccountView.swift. First import our new package then change the codeDigits view as following.
That is it, hope you have enjoyed this tutorial, and stay tuned for more content.
As always, the code is available in the GitHub repository:
And custom package also.
