Multipage Processing

• Buttons
• Animations

Buttons

Current UI (ver 8.1+)Deprecated UI (pre 8.1)

• Show/hide the Skip Page button:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.functionality.showSkipNextPageButton = true

[RGLDocReader shared].functionality.showSkipNextPageButton = YES;

DocumentReader.Instance().functionality().edit().setShowSkipNextPageButton(true).apply()

DocumentReader.Instance().functionality().edit().setShowSkipNextPageButton(true).apply();

DocumentReader.instance.functionality.showSkipNextPageButton = true;

DocumentReader.instance.functionality.showSkipNextPageButton = true

DocumentReader.setFunctionality({
    showSkipNextPageButton: true,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setFunctionality({
    showSkipNextPageButton: true
});

DocumentReader.setFunctionality({
    showSkipNextPageButton: true,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Functionality().Edit().SetShowSkipNextPageButton(true).Apply();

// iOS
RGLDocReader.Shared.Functionality.ShowSkipNextPageButton = true;

• Set the vertical position (for the portrait mode) and the horizontal position (for the landscape mode) of the Skip Page button:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.multipageButtonPositionMultiplier = 0.5

[RGLDocReader shared].customization.multipageButtonPositionMultiplier = 0.5;

DocumentReader.Instance().customization().edit().setMultipageButtonPositionMultiplier(0.5F).apply()

DocumentReader.Instance().customization().edit().setMultipageButtonPositionMultiplier(0.5F).apply();

DocumentReader.instance.customization.multipageButtonPositionMultiplier = .5;

DocumentReader.instance.customization.multipageButtonPositionMultiplier = 0.5

DocumentReader.setCustomization({
    multipageButtonPositionMultiplier: 0.5,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    multipageButtonPositionMultiplier: 0.5
});

DocumentReader.setCustomization({
    multipageButtonPositionMultiplier: 0.5,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetMultipageButtonPositionMultiplier((Java.Lang.Float)0.5F).Apply();

// iOS
RGLDocReader.Shared.Customization.MultipageButtonPositionMultiplier = 0.5F;

• Set the custom image for the Skip Page button (by default, the right arrow is used):

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.multipageButtonImage = UIImage(named: "icon")

[RGLDocReader shared].customization.multipageButtonImage = [UIImage imageNamed:@"icon"];

DocumentReader.Instance().customization().edit().setMultipageButtonImage(getDrawable(R.drawable.icon)).apply()

DocumentReader.Instance().customization().edit().setMultipageButtonImage(getResources().getDrawable(R.drawable.icon)).apply();

DocumentReader.instance.customization.multipageButtonImage = await rootBundle.load("icon");

DocumentReader.instance.customization.multipageButtonImage = "Base64String"

DocumentReader.setCustomization({
    multipageButtonImage: "Base64String",
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    multipageButtonImage: "Base64String"
});

DocumentReader.setCustomization({
    multipageButtonImage: "Base64String",
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetMultipageButtonImage(GetDrawable(Resource.Drawable.icon)).Apply();

// iOS
RGLDocReader.Shared.Customization.MultipageButtonImage = UIImage.FromBundle("icon.png");

• Set the hex color code for the Skip Page button background:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.multipageButtonBackgroundColor = UIColor.red

[RGLDocReader shared].customization.multipageButtonBackgroundColor = [UIColor redColor];

DocumentReader.Instance().customization().edit().setMultipageButtonBackgroundColor("#ff0000").apply()

DocumentReader.Instance().customization().edit().setMultipageButtonBackgroundColor("#ff0000").apply();

DocumentReader.instance.customization.multipageButtonBackgroundColor = Colors.red;

DocumentReader.instance.customization.multipageButtonBackgroundColor = 0xffff0000

DocumentReader.setCustomization({
    multipageButtonBackgroundColor: 0xffff0000,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    multipageButtonBackgroundColor: 0xffff0000
});

DocumentReader.setCustomization({
    multipageButtonBackgroundColor: 0xffff0000,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetMultipageButtonBackgroundColor("#4287f5").Apply();

// iOS
RGLDocReader.Shared.Customization.MultipageButtonBackgroundColor = UIColor.Red;

• Set the custom text for the Skip Page button (if not set, only the right arrow is displayed):

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.multipageButtonText = "Next"

[RGLDocReader shared].functionality.multipageButtonText = @"Next";

DocumentReader.Instance().customization().edit().setMultipageButtonText("Next").apply()

DocumentReader.Instance().customization().edit().setMultipageButtonText("Next").apply();

DocumentReader.instance.customization.multipageButtonText = "Next";

DocumentReader.instance.customization.multipageButtonText = "Next"

DocumentReader.setCustomization({
    multipageButtonText: "Next",
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    multipageButtonText: "Next"
});

DocumentReader.setCustomization({
    multipageButtonText: "Next",
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetMultipageButtonText("Next").Apply();

// iOS
RGLDocReader.Shared.Customization.MultipageButtonText = "Next";

• Set the custom font for the Skip Page button's text:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.multipageButtonTextFont = UIFont.italicSystemFont(ofSize: 14)

[RGLDocReader shared].customization.multipageButtonTextFont = [UIFont italicSystemFontOfSize:14];

val typeface = Typeface.create("serif", Typeface.ITALIC)
DocumentReader.Instance().customization().edit().setMultipageButtonTextFont(typeface).apply()

Typeface typeface = Typeface.create("serif", Typeface.ITALIC);
DocumentReader.Instance().customization().edit().setMultipageButtonTextFont(typeface).apply();

 DocumentReader.instance.customization.multipageButtonTextFont = Font(
      "sans-serif-thin",
      size: 14,
      style: FontStyle.ITALIC,
    );

DocumentReader.instance.customization.multipageButtonTextFont = {
  name: "sans-serif-thin",
  size: 14,
  style: FontStyle.ITALIC,
}

DocumentReader.setCustomization({
      multipageButtonTextFont: {
        name: "sans-serif-thin",
        size: 14,
        style: Enum.FontStyle.ITALIC,
      },
}, _ => { }, _ => { });

DocumentReader.setCustomization({
    multipageButtonTextFont: {
        name: "sans-serif-thin",
        size: 14,
        style: Enum.FontStyle.ITALIC,
    },
});

DocumentReader.setCustomization({
    multipageButtonTextFont: {
        name: "sans-serif-thin",
        size: 14,
        style: Enum.FontStyle.ITALIC,
    },
}, function (m) { }, function (e) { });

// Android
DocumentReader.Instance().Customization().Edit().SetMultipageButtonTextFont(Typeface.Serif).Apply();

// iOS
RGLDocReader.Shared.Customization.MultipageButtonTextFont = UIFont.PreferredBody.WithSize(14);

• Set the custom size for the Skip Page button's font:

Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocumentReader.Instance().customization().edit().setMultipageButtonTextSize(24).apply()

DocumentReader.Instance().customization().edit().setMultipageButtonTextSize(24).apply();

DocumentReader.instance.customization.multipageButtonTextFont = Font(
      "sans-serif-thin",
      size: 14,
      style: FontStyle.ITALIC,
);

DocumentReader.instance.customization.multipageButtonTextFont = {
  name: "sans-serif-thin",
  size: 14,
  style: FontStyle.ITALIC,
}

DocumentReader.setCustomization({
      multipageButtonTextFont: {
        name: "sans-serif-thin",
        size: 14,
        style: Enum.FontStyle.ITALIC,
      },
}, _ => { }, _ => { });

DocumentReader.setCustomization({
    multipageButtonTextFont: {
        name: "sans-serif-thin",
        size: 14,
        style: Enum.FontStyle.ITALIC,
    },
});

DocumentReader.setCustomization({
    multipageButtonTextFont: {
        name: "sans-serif-thin",
        size: 14,
        style: Enum.FontStyle.ITALIC,
    },
}, function (m) { }, function (e) { });

```csharp // Android DocumentReader.Instance().Customization().Edit().SetMultipageButtonTextSize((Java.Lang.Integer)24).Apply();

• Set the custom color for the Skip Page button's text:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.multipageButtonTextColor = UIColor.green

[RGLDocReader shared].functionality.multipageButtonTextColor = [UIColor greenColor];

DocumentReader.Instance().customization().edit().setMultipageButtonTextColor("#32a852").apply()

DocumentReader.Instance().customization().edit().setMultipageButtonTextColor("#32a852").apply();

DocumentReader.instance.customization.multipageButtonTextColor = Colors.green;

DocumentReader.instance.customization.multipageButtonTextColor = 0xff00ff00

DocumentReader.setCustomization({
    multipageButtonTextColor: 0xff00ff00,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    multipageButtonTextColor: 0xff00ff00
});

DocumentReader.setCustomization({
    multipageButtonTextColor: 0xff00ff00,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetMultipageButtonTextColor("#32a852").Apply();

// iOS
RGLDocReader.Shared.Customization.MultipageButtonTextColor = UIColor.Green;

Animations

Document Reader SDK provides animation customization for two document types:

• ID Card
• Passport

To enable/disable the expecting page turn animation (enabled by default):

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.showNextPageAnimation = true

[RGLDocReader shared].customization.showNextPageAnimation = YES;

DocumentReader.Instance().customization().edit().setShowNextPageAnimation(true).apply()

DocumentReader.Instance().customization().edit().setShowNextPageAnimation(true).apply();

DocumentReader.instance.customization.showNextPageAnimation = true;

DocumentReader.instance.customization.showNextPageAnimation = true

DocumentReader.setCustomization({
    showNextPageAnimation: true,
}, (str) => { console.log(str) }, (error) => { console.log(error) });

DocumentReader.setCustomization({
    showNextPageAnimation: true
});

DocumentReader.setCustomization({
    showNextPageAnimation: true,
}, function (m) { }, function (e) { console.log(e); });

// Android
DocumentReader.Instance().Customization().Edit().SetShowNextPageAnimation(true).Apply();

// iOS
RGLDocReader.Shared.Customization.ShowNextPageAnimation = true;

See the details and examples further.

ID Card

Current UI (ver 8.1+)Deprecated UI (pre 8.1)

• Image
• Color
• Scaling
• Delay

Image

You can apply the custom images to the front/back side of the ID card animation. If not set, the default images are used:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setImage(UIImage(named: "id_card_rb_front")!.withRenderingMode(.alwaysTemplate), forItem: .nextPageIdCardFront)
    $0.setImage(UIImage(named: "id_card_rb_back")!.withRenderingMode(.alwaysTemplate), forItem: .nextPageIdCardBack)
}

UIImage *idCardFront = [[UIImage imageNamed:@"id_card_rb_front"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setImage:idCardFront forItem:RGLCustomizationImageNextPageIdCardFront];
}];

UIImage *idCardBack = [[UIImage imageNamed:@"id_card_rb_back"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setImage:idCardBack forItem:RGLCustomizationImageNextPageIdCardBack];
}];    

DocumentReader.Instance().customization().edit()
    .setImage(CustomizationImage.NEXT_PAGE_ID_CARD_FRONT, getDrawable(R.drawable.id_card_rb_front))
    .setImage(CustomizationImage.NEXT_PAGE_ID_CARD_BACK, getDrawable(R.drawable.id_card_rb_back))
    .apply()

DocumentReader.Instance().customization().edit()
    .setImage(CustomizationImage.NEXT_PAGE_ID_CARD_FRONT, getDrawable(R.drawable.id_card_rb_front))
    .setImage(CustomizationImage.NEXT_PAGE_ID_CARD_BACK, getDrawable(R.drawable.id_card_rb_back))
    .apply();

DocumentReader.instance.customization.images.nextPageIdCardFront = frontImage;
DocumentReader.instance.customization.images.nextPageIdCardBack = backImage;

DocumentReader.instance.customization.images.nextPageIdCardFront = frontBase64;
DocumentReader.instance.customization.images.nextPageIdCardBack = backBase64;

DocumentReader.setCustomization({
  images: {
    nextPageIdCardFront: frontBase64,
    nextPageIdCardBack: backBase64,
  }
}, _ => { }, _ => { });

DocumentReader.setCustomization({
  images: {
    nextPageIdCardFront: frontBase64,
    nextPageIdCardBack: backBase64,
  }
})

DocumentReader.setCustomization({
  images: {
    nextPageIdCardFront: frontBase64,
    nextPageIdCardBack: backBase64,
  }
}, function (m) { }, function (e) { });

// Android
DocumentReader.Instance().Customization().Edit().SetImage(CustomizationImage.NextPageIdCardFront, frontImage).Apply();
DocumentReader.Instance().Customization().Edit().SetImage(CustomizationImage.NextPageIdCardBack, backImage).Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetImage(frontImage, Constants.RGLCustomizationImageNextPageIdCardFront);
    builder.SetImage(backImage, Constants.RGLCustomizationImageNextPageIdCardBack);
});

Color

You can apply a custom color tinting to the front/back side of the ID card animation:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setColor(.yellow, forItem: .RGLCustomizationColorNextPageIdCardFront)
    $0.setColor(.green, forItem: .RGLCustomizationColorNextPageIdCardBack)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor yellowColor] forItem:RGLCustomizationColorNextPageIdCardFront];
    [builder setColor:[UIColor greenColor] forItem:RGLCustomizationColorNextPageIdCardBack];
}];

DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.NEXT_PAGE_ID_CARD_FRONT, Color.YELLOW)
    .setColor(CustomizationColor.NEXT_PAGE_ID_CARD_BACK, Color.GREEN)
    .apply()

DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.NEXT_PAGE_ID_CARD_FRONT, Color.YELLOW)
    .setColor(CustomizationColor.NEXT_PAGE_ID_CARD_BACK, Color.GREEN)
    .apply()

DocumentReader.instance.customization.colors.nextPageIdCardFront = Colors.yellow;
DocumentReader.instance.customization.colors.nextPageIdCardBack = Colors.green;

DocumentReader.instance.customization.colors.nextPageIdCardFront = 0xffff0000;
DocumentReader.instance.customization.colors.nextPageIdCardBack = 0xff00ff00;

DocumentReader.setCustomization({
  colors: {
    nextPageIdCardFront: 0xffff0000,
    nextPageIdCardBack: 0xff00ff00,
  }
}, _ => { }, _ => { });

DocumentReader.setCustomization({
  colors: {
    nextPageIdCardFront: 0xffff0000,
    nextPageIdCardBack: 0xff00ff00,
  }
})

DocumentReader.setCustomization({
  colors: {
    nextPageIdCardFront: 0xffff0000,
    nextPageIdCardBack: 0xff00ff00,
  }
}, function (m) { }, function (e) { });

// Android
DocumentReader.Instance().Customization().Edit().SetColor(CustomizationColor.NextPageIdCardFront, Color.Yellow).Apply();
DocumentReader.Instance().Customization().Edit().SetColor(CustomizationColor.NextPageIdCardBack, Color.Green).Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.Yellow, RGLCustomizationColor.RGLCustomizationColorNextPageIdCardFront);
    builder.SetColor(UIColor.Green, RGLCustomizationColor.RGLCustomizationColorNextPageIdCardBack);
});

Scaling

You can change the scaling for the front/back image of the ID card animation:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setContentMode(UIView.ContentMode.scaleAspectFit, forItem: .RGLCustomizationContentModeNextPageIdCardFront)
    $0.setContentMode(UIView.ContentMode.scaleAspectFit, forItem: .RGLCustomizationContentModeNextPageIdCardBack)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setContentMode:UIViewContentModeScaleAspectFit forItem:RGLCustomizationContentModeNextPageIdCardFront];
    [builder setContentMode:UIViewContentModeScaleAspectFit forItem:RGLCustomizationContentModeNextPageIdCardBack];
}];

DocumentReader.Instance().customization().edit().setScaleType(CustomizationScaleType.NEXT_PAGE_ID_CARD_FRONT, ImageView.ScaleType.MATRIX).apply()
val matrixFront = Matrix() // define the matrix parameters
DocumentReader.Instance().customization().edit().setMatrix(CustomizationMatrix.NEXT_PAGE_ID_CARD_FRONT, matrixFront).apply()

DocumentReader.Instance().customization().edit().setScaleType(CustomizationScaleType.NEXT_PAGE_ID_CARD_BACK, ImageView.ScaleType.MATRIX).apply()
val matrixBack = Matrix() // define the matrix parameters
DocumentReader.Instance().customization().edit().setMatrix(CustomizationMatrix.NEXT_PAGE_ID_CARD_BACK, matrixBack).apply()

DocumentReader.Instance().customization().edit().setScaleType(CustomizationScaleType.NEXT_PAGE_ID_CARD_FRONT, ImageView.ScaleType.MATRIX).apply();
Matrix matrixFront = new Matrix(); // define the matrix parameters
DocumentReader.Instance().customization().edit().setMatrix(CustomizationMatrix.NEXT_PAGE_ID_CARD_FRONT, matrixFront).apply();

DocumentReader.Instance().customization().edit().setScaleType(CustomizationScaleType.NEXT_PAGE_ID_CARD_BACK, ImageView.ScaleType.MATRIX).apply();
val matrixBack = Matrix(); // define the matrix parameters
DocumentReader.Instance().customization().edit().setMatrix(CustomizationMatrix.NEXT_PAGE_ID_CARD_BACK, matrixBack).apply();

DocumentReader.instance.customization.matrices.nextPageIdCardFront = matrixFront;
DocumentReader.instance.customization.matrices.nextPageIdCardBack = matrixBack;

DocumentReader.instance.customization.matrices.nextPageIdCardFront = matrixFront;
DocumentReader.instance.customization.matrices.nextPageIdCardBack = matrixBack;

DocumentReader.setCustomization({
  matrices: {
    nextPageIdCardFront: matrixFront,
    nextPageIdCardBack: matrixBack,
  }
}, _ => { }, _ => { });

DocumentReader.setCustomization({
  matrices: {
    nextPageIdCardFront: matrixFront,
    nextPageIdCardBack: matrixBack,
  }
})

DocumentReader.setCustomization({
  matrices: {
    nextPageIdCardFront: matrixFront,
    nextPageIdCardBack: matrixBack,
  }
}, function (m) { }, function (e) { });

// Android
DocumentReader.Instance().Customization().Edit().SetScaleType(CustomizationScaleType.NextPageIdCardFront, ImageView.ScaleType.Matrix).Apply();
Matrix matrixFront = new Matrix(); // define the matrix parameters
DocumentReader.Instance().Customization().Edit().SetMatrix(CustomizationMatrix.NextPageIdCardFront, matrixFront).Apply();

DocumentReader.Instance().Customization().Edit().SetScaleType(CustomizationScaleType.NextPageIdCardBack, ImageView.ScaleType.Matrix).Apply();
var matrixBack = new Matrix(); // define the matrix parameters
DocumentReader.Instance().Customization().Edit().SetMatrix(CustomizationMatrix.NextPageIdCardBack, matrixBack).Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetContentMode(UIViewContentMode.ScaleAspectFit, RGLCustomizationContentMode.Front);
    builder.SetContentMode(UIViewContentMode.ScaleAspectFit, RGLCustomizationContentMode.Back);
});

Delay

You can set the delay before the start / after the end of the multipage animation. By default, no delay is applied:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setTiming(1.5, forItem: .RGLCustomizationTimingNextPageIdCardStartDelay)
    $0.setTiming(1.5, forItem: .RGLCustomizationTimingNextPageIdCardEndDelay)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setTiming:1.5 forItem:RGLCustomizationTimingNextPageIdCardStartDelay];
    [builder setTiming:1.5 forItem:RGLCustomizationTimingNextPageIdCardEndDelay];
}];

DocumentReader.Instance().customization().edit()
    .setTiming(CustomizationTiming.NEXT_PAGE_ID_CARD_START_DELAY, 1500)
    .setTiming(CustomizationTiming.NEXT_PAGE_ID_CARD_END_DELAY, 1500)
    .apply()

DocumentReader.Instance().customization().edit()
    .setTiming(CustomizationTiming.NEXT_PAGE_ID_CARD_START_DELAY, 1500)
    .setTiming(CustomizationTiming.NEXT_PAGE_ID_CARD_END_DELAY, 1500)
    .apply();

DocumentReader.instance.customization.timings.nextPageIdCardStartDelay = 1500;
DocumentReader.instance.customization.timings.nextPageIdCardEndDelay = 1500;

DocumentReader.instance.customization.timings.nextPageIdCardStartDelay = 1500;
DocumentReader.instance.customization.timings.nextPageIdCardEndDelay = 1500;

DocumentReader.setCustomization({
  timings: {
    nextPageIdCardStartDelay: 1500,
    nextPageIdCardEndDelay: 1500,
  }
}, _ => { }, _ => { });

DocumentReader.setCustomization({
  timings: {
    nextPageIdCardStartDelay: 1500,
    nextPageIdCardEndDelay: 1500,
  }
})

DocumentReader.setCustomization({
  timings: {
    nextPageIdCardStartDelay: 1500,
    nextPageIdCardEndDelay: 1500,
  }
}, function (m) { }, function (e) { });

// Android
DocumentReader.Instance().Customization().Edit().SetTiming(CustomizationTiming.NextPageIdCardStartDelay, 1500).Apply();
DocumentReader.Instance().Customization().Edit().SetTiming(CustomizationTiming.NextPageIdCardEndDelay, 1500).Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetTiming(1.5, RGLCustomizationTiming.IdCardStartDelay);
    builder.SetTiming(1.5, RGLCustomizationTiming.IdCardEndDelay);
});

Passport

• Image
• Color
• Delay

Image

For passports, two animation types are available: downward shift of the opened passport and page flip. You can apply custom images to the following animation steps:

• Flip Start
• Flip Top
• Flip Clean
• Flip Bottom
• Page Shift

If not set, the default images are used.

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setImage(UIImage(named: "passport_flip_start")!.withRenderingMode(.alwaysTemplate), forItem: .RGLCustomizationImageNextPagePassportFlipStart)
    $0.setImage(UIImage(named: "passport_flip_top")!.withRenderingMode(.alwaysTemplate), forItem: .RGLCustomizationImageNextPagePassportFlipTop)
    $0.setImage(UIImage(named: "passport_flip_clean")!.withRenderingMode(.alwaysTemplate), forItem: .RGLCustomizationImageNextPagePassportFlipClean)
    $0.setImage(UIImage(named: "passport_flip_bottom")!.withRenderingMode(.alwaysTemplate), forItem: .RGLCustomizationImageNextPagePassportFlipBottom)
    $0.setImage(UIImage(named: "passport_shift")!.withRenderingMode(.alwaysTemplate), forItem: .RGLCustomizationImageNextPagePassportShift)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setImage:[[UIImage imageNamed:@"passport_flip_start"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] forItem:RGLCustomizationImageNextPagePassportFlipStart];
    [builder setImage:[[UIImage imageNamed:@"passport_flip_top"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] forItem:RGLCustomizationImageNextPagePassportFlipTop];
    [builder setImage:[[UIImage imageNamed:@"passport_flip_clean"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] forItem:RGLCustomizationImageNextPagePassportFlipClean];
    [builder setImage:[[UIImage imageNamed:@"passport_flip_bottom"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] forItem:RGLCustomizationImageNextPagePassportFlipBottom];
    [builder setImage:[[UIImage imageNamed:@"passport_shift"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] forItem:RGLCustomizationImageNextPagePassportShift];
}];

DocumentReader.Instance().customization().edit()
    .setImage(CustomizationImage.NEXT_PAGE_PASSPORT_FLIP_START, getDrawable(R.drawable.passport_flip_start))
    .setImage(CustomizationImage.NEXT_PAGE_PASSPORT_FLIP_TOP, getDrawable(R.drawable.passport_flip_top))
    .setImage(CustomizationImage.NEXT_PAGE_PASSPORT_FLIP_CLEAN, getDrawable(R.drawable.passport_flip_clean))
    .setImage(CustomizationImage.NEXT_PAGE_PASSPORT_FLIP_BOTTOM, getDrawable(R.drawable.passport_flip_bottom))
    .setImage(CustomizationImage.NEXT_PAGE_PASSPORT_SHIFT, getDrawable(R.drawable.passport_shift))
    .apply()

DocumentReader.Instance().customization().edit()
    .setImage(CustomizationImage.NEXT_PAGE_PASSPORT_FLIP_START, getDrawable(R.drawable.passport_flip_start))
    .setImage(CustomizationImage.NEXT_PAGE_PASSPORT_FLIP_TOP, getDrawable(R.drawable.passport_flip_top))
    .setImage(CustomizationImage.NEXT_PAGE_PASSPORT_FLIP_CLEAN, getDrawable(R.drawable.passport_flip_clean))
    .setImage(CustomizationImage.NEXT_PAGE_PASSPORT_FLIP_BOTTOM, getDrawable(R.drawable.passport_flip_bottom))
    .setImage(CustomizationImage.NEXT_PAGE_PASSPORT_SHIFT, getDrawable(R.drawable.passport_shift))
    .apply();

DocumentReader.instance.customization.images.nextPagePassportFlipStart = startImage
DocumentReader.instance.customization.images.nextPagePassportFlipTop = topImage;
DocumentReader.instance.customization.images.nextPagePassportFlipClean = cleanImage;
DocumentReader.instance.customization.images.nextPagePassportFlipBottom = bottomImage;
DocumentReader.instance.customization.images.nextPagePassportShift = shiftImage;

DocumentReader.instance.customization.images.nextPagePassportFlipStart = startBase64
DocumentReader.instance.customization.images.nextPagePassportFlipTop = topBase64;
DocumentReader.instance.customization.images.nextPagePassportFlipClean = cleanBase64;
DocumentReader.instance.customization.images.nextPagePassportFlipBottom = bottomBase64;
DocumentReader.instance.customization.images.nextPagePassportShift = shiftBase64;

DocumentReader.setCustomization({
  images: {
    nextPagePassportFlipStart: startBase64,
    nextPagePassportFlipTop: topBase64,
    nextPagePassportFlipClean: cleanBase64,
    nextPagePassportFlipBottom: bottomBase64,
    nextPagePassportShift: shiftBase64,
  }
}, _ => { }, _ => { });

DocumentReader.setCustomization({
  images: {
    nextPagePassportFlipStart: startBase64,
    nextPagePassportFlipTop: topBase64,
    nextPagePassportFlipClean: cleanBase64,
    nextPagePassportFlipBottom: bottomBase64,
    nextPagePassportShift: shiftBase64,
  }
})

DocumentReader.setCustomization({
  images: {
    nextPagePassportFlipStart: startBase64,
    nextPagePassportFlipTop: topBase64,
    nextPagePassportFlipClean: cleanBase64,
    nextPagePassportFlipBottom: bottomBase64,
    nextPagePassportShift: shiftBase64,
  }
}, function (m) { }, function (e) { });

// Android
DocumentReader.Instance().Customization().Edit().SetImage(CustomizationImage.NextPagePassportFlipStart, startImage).Apply();
DocumentReader.Instance().Customization().Edit().SetImage(CustomizationImage.NextPagePassportFlipTop, topImage).Apply();
DocumentReader.Instance().Customization().Edit().SetImage(CustomizationImage.NextPagePassportFlipClean, cleanImage).Apply();
DocumentReader.Instance().Customization().Edit().SetImage(CustomizationImage.NextPagePassportFlipBottom, bottomImage).Apply();
DocumentReader.Instance().Customization().Edit().SetImage(CustomizationImage.NextPagePassportShift, shiftImage).Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetImage(startImage, Constants.RGLCustomizationImageNextPagePassportFlipStart);
    builder.SetImage(topImage, Constants.RGLCustomizationImageNextPagePassportFlipTop);
    builder.SetImage(cleanImage, Constants.RGLCustomizationImageNextPagePassportFlipClean);
    builder.SetImage(bottomImage, Constants.RGLCustomizationImageNextPagePassportFlipBottom);
    builder.SetImage(shiftImage, Constants.RGLCustomizationImageNextPagePassportShift);
});

Color

You can apply a custom color tinting to the page shift/flip of the passport animation:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setColor(.yellow, forItem: .RGLCustomizationColorNextPagePassportShift)
    $0.setColor(.green, forItem: .RGLCustomizationColorNextPagePassportFlip)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor yellowColor] forItem:RGLCustomizationColorNextPagePassportShift];
    [builder setColor:[UIColor greenColor] forItem:RGLCustomizationColorNextPagePassportFlip];
}];

DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.NEXT_PAGE_PASSPORT_SHIFT, Color.YELLOW)
    .setColor(CustomizationColor.NEXT_PAGE_PASSPORT_FLIP, Color.GREEN)
    .apply()

DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.NEXT_PAGE_PASSPORT_SHIFT, Color.YELLOW)
    .setColor(CustomizationColor.NEXT_PAGE_PASSPORT_FLIP, Color.GREEN)
    .apply();

DocumentReader.instance.customization.colors.nextPagePassportShift = Colors.yellow;
DocumentReader.instance.customization.colors.nextPagePassportFlip = Colors.green;

DocumentReader.instance.customization.colors.nextPagePassportShift = 0xffff0000;
DocumentReader.instance.customization.colors.nextPagePassportFlip = 0xff00ff00;

DocumentReader.setCustomization({
  colors: {
    nextPagePassportShift: 0xffff0000,
    nextPagePassportFlip: 0xff00ff00,
  }
}, _ => { }, _ => { });

DocumentReader.setCustomization({
  colors: {
    nextPagePassportShift: 0xffff0000,
    nextPagePassportFlip: 0xff00ff00,
  }
})

DocumentReader.setCustomization({
  colors: {
    nextPagePassportShift: 0xffff0000,
    nextPagePassportFlip: 0xff00ff00,
  }
}, function (m) { }, function (e) { });

// Android
DocumentReader.Instance().Customization().Edit().SetColor(CustomizationColor.NextPagePassportShift, Color.Yellow).Apply();
DocumentReader.Instance().Customization().Edit().SetColor(CustomizationColor.NextPagePassportFlip, Color.Green).Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.Yellow, RGLCustomizationColor.RGLCustomizationColorNextPagePassportShift);
    builder.SetColor(UIColor.Green, RGLCustomizationColor.RGLCustomizationColorNextPagePassportFlip);
});

Delay

You can set custom delays before the start/end of the flip/shift animations. By default, no delay is applied:

SwiftObjective-C Kotlin Java Flutter JavaScript React Native Ionic Cordova.NET MAUI

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setTiming(1.5, forItem: .RGLCustomizationTimingNextPagePassportShiftStartDelay)
    $0.setTiming(1.5, forItem: .RGLCustomizationTimingNextPagePassportShiftEndDelay)
    $0.setTiming(1.5, forItem: .RGLCustomizationTimingNextPagePassportFlipStartDelay)
    $0.setTiming(1.5, forItem: .RGLCustomizationTimingNextPagePassportFlipEndDelay)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setTiming:1.5 forItem:RGLCustomizationTimingNextPagePassportShiftStartDelay];
    [builder setTiming:1.5 forItem:RGLCustomizationTimingNextPagePassportShiftEndDelay];
    [builder setTiming:1.5 forItem:RGLCustomizationTimingNextPagePassportFlipStartDelay];
    [builder setTiming:1.5 forItem:RGLCustomizationTimingNextPagePassportFlipEndDelay];
}];

DocumentReader.Instance().customization().edit()
    .setTiming(CustomizationTiming.NEXT_PAGE_PASSPORT_FLIP_START_DELAY, 1500)
    .setTiming(CustomizationTiming.NEXT_PAGE_PASSPORT_FLIP_END_DELAY, 1500)
    .setTiming(CustomizationTiming.NEXT_PAGE_PASSPORT_SHIFT_START_DELAY, 1500)
    .setTiming(CustomizationTiming.NEXT_PAGE_PASSPORT_SHIFT_END_DELAY, 1500)
    .apply()

    DocumentReader.Instance().customization().edit()
    .setTiming(CustomizationTiming.NEXT_PAGE_PASSPORT_FLIP_START_DELAY, 1500)
    .setTiming(CustomizationTiming.NEXT_PAGE_PASSPORT_FLIP_END_DELAY, 1500)
    .setTiming(CustomizationTiming.NEXT_PAGE_PASSPORT_SHIFT_START_DELAY, 1500)
    .setTiming(CustomizationTiming.NEXT_PAGE_PASSPORT_SHIFT_END_DELAY, 1500)
    .apply();

DocumentReader.instance.customization.timings.nextPagePassportFlipStartDelay = 1500;
DocumentReader.instance.customization.timings.nextPagePassportFlipEndDelay = 1500;
DocumentReader.instance.customization.timings.nextPagePassportShiftStartDelay = 1500;
DocumentReader.instance.customization.timings.nextPagePassportShiftEndDelay = 1500;

DocumentReader.instance.customization.timings.nextPagePassportFlipStartDelay = 1500;
DocumentReader.instance.customization.timings.nextPagePassportFlipEndDelay = 1500;
DocumentReader.instance.customization.timings.nextPagePassportShiftStartDelay = 1500;
DocumentReader.instance.customization.timings.nextPagePassportShiftEndDelay = 1500;

DocumentReader.setCustomization({
  timings: {
    nextPagePassportFlipStartDelay: 1500,
    nextPagePassportFlipEndDelay: 1500,
    nextPagePassportShiftStartDelay: 1500,
    nextPagePassportShiftEndDelay: 1500,
  }
}, _ => { }, _ => { });

DocumentReader.setCustomization({
  timings: {
    nextPagePassportFlipStartDelay: 1500,
    nextPagePassportFlipEndDelay: 1500,
    nextPagePassportShiftStartDelay: 1500,
    nextPagePassportShiftEndDelay: 1500,
  }
})

DocumentReader.setCustomization({
  timings: {
    nextPagePassportFlipStartDelay: 1500,
    nextPagePassportFlipEndDelay: 1500,
    nextPagePassportShiftStartDelay: 1500,
    nextPagePassportShiftEndDelay: 1500,
  }
}, function (m) { }, function (e) { });

// Android
DocumentReader.Instance().Customization().Edit().SetTiming(CustomizationTiming.NextPagePassportFlipStartDelay, 1500).Apply();
DocumentReader.Instance().Customization().Edit().SetTiming(CustomizationTiming.NextPagePassportFlipEndDelay, 1500).Apply();
DocumentReader.Instance().Customization().Edit().SetTiming(CustomizationTiming.NextPagePassportShiftStartDelay, 1500).Apply();
DocumentReader.Instance().Customization().Edit().SetTiming(CustomizationTiming.NextPagePassportShiftEndDelay, 1500).Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetTiming(1.5, RGLCustomizationTiming.PassportFlipStartDelay);
    builder.SetTiming(1.5, RGLCustomizationTiming.PassportFlipEndDelay);
    builder.SetTiming(1.5, RGLCustomizationTiming.PassportShiftStartDelay);
    builder.SetTiming(1.5, RGLCustomizationTiming.PassportShiftEndDelay);
});

Next Steps

• Integration with Web API
• Optimize Your Application
• API Reference
• FAQ