'How can we create custom entry to fill the OTP automatically. like this in xamarin form cross paltfrom

enter image description here

the entry box accepts only 1 character .ui design should be like this

xamlxamarin.formsxamarin.android


Solution 1:[1]

This will solve your problem.

Add the following NuGet package: Xamarin Forms Pin View

 // iOS:
 public override bool FinishedLaunching(UIApplication app, NSDictionary options)
 {
     ...
     global::Xamarin.Forms.Forms.Init();
     PinItemViewRenderer.Init();
 }

 // Android:

 protected override void OnCreate(Bundle bundle)
 {
     ...
     global::Xamarin.Forms.Forms.Init(this, bundle);
     PinItemViewRenderer.Init();
 }

Add PinView to your page:

  ...
 xmlns:local="clr-namespace:FormsPinView.Core;assembly=FormsPinView.Core"
 ...
     <local:PinView
         HorizontalOptions="CenterAndExpand"
         VerticalOptions="CenterAndExpand"
         TargetPinLength="4"
         Validator="{Binding ValidatorFunc}"
         Success="Handle_Success" />

Solution 2:[2]

You can use this NuGet package:
https://www.nuget.org/packages/OTPEntryControl/1.0.6

Implementation:
namespace: xmlns:otpcontrol="clr-namespace:OTPControl;assembly=OTPControl"

<otpcontrol:CustomOtpControl x:Name="otpControlName"  OtpLength="5" FillBorderColor="Orange"   HorizontalOptions="Center"  />  
<Button Text="Get Otp"  Command="{Binding GetOtpCommand}" CommandParameter="{Binding Source={x:Reference otpControlName},Path=SelectedOtp}" />

Sources

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

Source: Stack Overflow

Solution Source
Solution 1 Krunal Bagadia
Solution 2

Related Questions