React Native SDK UI Customization API

new TextConfig(text, color, font)
new TextConfig(text, gradientColorArray, font)

new TextConfig(undefined, color, font) // text remains static customization
new TextConfig(text, undefined, undefined) // color and font remain static customization

  const map = new Map()
  map.set(TextsKey.securityQuestionHeaders, [
    new TextConfig('Choose your 1st question'),
    new TextConfig('Choose your 2nd question')
  ])

  WalletSdk.setTextConfigsMap(map)

new IconTextConfig(
      require('../assets/image/local_icon.png'),
      new TextConfig(text, color, font)
    )

new IconTextConfig(
      {uri: 'https://remote_image'}
      new TextConfig(text, color, font)
    )

 const map = new Map()
 map.set(IconTextsKey.securityConfirmationItems, [
    new IconTextConfig(
      require('../assets/image/local_icon.png'),
      new TextConfig(text, color, font),
    ),
  ])
  WalletSdk.setIconTextConfigsMap(map)

   const map = new Map()
  map.set(
    TextKey.circlepw_recover_pincode_answer_input_placeholder,
    new TextConfig(
      'Type your answer here',
      colors.placeholder,
      'Inter-Regular',
    ),
  )
  WalletSdk.setTextConfigMap(map)

<resources>
    <!--    [General]-->
    <string name="circlepw_continue">Continue</string>
    <string name="circlepw_next">Next</string>
  <string name="circlepw_skip">Skip</string>
    <string name="circlepw_question_label">Question:</string>
    <string name="circlepw_answer_label">Answer:</string>
    <string name="circlepw_hint_label">Hint:</string>
    <string name="circlepw_hint_tag">Hint</string>
    <string name="circlepw_empty"></string>
    <string name="circlepw_empty_placeholder">-</string>
    <string name="circlepw_confirm">Confirm</string>
    <string name="circlepw_pin_remain_attemps_template">You have %s attempts left.</string>
    <string name="circlepw_pin_lock_period_template">You’ve used up all PIN attempts. Please wait for %s mins to retry later.</string>
    <string name="circlepw_answer_remain_attemps_template">You have %s attempts left.</string>
    <string name="circlepw_answer_lock_period_template">Please wait for %s mins to retry later.</string>

    <!--    [Page] EnterPINCode-->
    <string name="circlepw_enter_pincode_subhead">Let us know if it’s really you.</string>
    <string name="circlepw_enter_pincode_forgot_pin">Forgot PIN?</string>
  <string name="circlepw_enter_pincode_use_biometrics">Use Biometrics</string>

    <!-- [Page] NewPINCode   -->
    <string name="circlepw_new_pincode_subhead">Your PIN can’t have repeating (e.g. 000000) or consecutive (e.g. 123456) numbers.</string>
    <!--  [Page] ConfirmPINCode  -->
    <string name="circlepw_confirm_pincode_headline">Re-enter your PIN to confirm</string>
    <string name="circlepw_confirm_pincode_subhead"></string>
    <!--  [Page] SecurityIntros  -->
    <string name="circlepw_security_intros_description">This is the only way to recover wallet access if you forget your PIN. Pick 2 security questions and provide answers for access recovery.</string>

    <!--  [Page] SecurityQuestions  -->
    <string name="circlepw_security_questions_title">Recovery method</string>
    <string name="circlepw_security_questions_required_mark">*</string>
    <string name="circlepw_security_questions_question_placeholder">Select one question</string>
    <string name="circlepw_security_questions_answer_header">Provide an answer</string>
    <string name="circlepw_security_questions_answer_placeholder">Type your answer here</string>
    <string name="circlepw_security_questions_answer_hint_header">Provide an answer hint (optional)</string>
    <string name="circlepw_security_questions_answer_hint_placeholder">Type your hint here</string>
    
    <!-- [Page] SelectQuestion   -->
    <string name="circlepw_select_question_title">Select one question</string>
    <!-- [Page] SecuritySummary   -->
    <string name="circlepw_security_summary_title">Summary</string>
    
    <!-- [Page] SecurityConfirm  -->
    <string name="circlepw_security_confirm_title">Confirmation</string>
    <string name="circlepw_security_confirm_headline">Keep your questions safe</string>
    <string name="circlepw_security_confirm_input_headline">Type \"I agree\" to proceed:</string>
    <string name="circlepw_security_confirm_input_placeholder">Type \"I agree\" here</string>
    <string name="circlepw_security_confirm_input_match">I agree</string>
    
    <!-- [Page] RecoverPINCode  -->
    <string name="circlepw_recover_pincode_answer_input_header">Enter your answer here</string>
    <string name="circlepw_recover_pincode_answer_input_placeholder">Type your answer here</string>

  <!--    [PageBiometricsAllowFragment]-->
    <string name="circlepw_pin_biometrics_allow_title">Allow Biometrics for Web3 Access</string>
    <string name="circlepw_pin_biometrics_allow_subtitle">Elevate your experience with effortless biometrics  recognition</string>
    <string name="circlepw_pin_biometrics_disable">Don\'t ask me again</string>
    <string name="circlepw_pin_biometrics_encrypt_title">Verify It\'s Youe</string>
    <string name="circlepw_pin_biometrics_encrypt_negative_text">Cancel</string>
    <string name="circlepw_pin_biometrics_encrypt_subtitle"></string>
    <string name="circlepw_pin_biometrics_encrypt_desc"></string>
    <string name="circlepw_pin_biometrics_decrypt_title">Verify It\'s Youe</string>
    <string name="circlepw_pin_biometrics_decrypt_negative_text">Cancel</string>
    <string name="circlepw_pin_biometrics_decrypt_subtitle"></string>
    <string name="circlepw_pin_biometrics_decrypt_desc"></string>

    <string name="circlepw_pin_biometrics_update_title">Update Biometrics for Web3 Access</string>
    <string name="circlepw_pin_biometrics_update_subtitle">Please update your biometrics</string>
</resources>

/*
 * Loco ios export: iOS Localizable.strings
 * Project: strings.xml conversion
 * Release: Working copy
 * Locale: en, English
 * Exported by: Circle
 * Exported at: Tue, 27 Jun 2023 23:35:22 +0800
 */


// [General]
"circlepw_show_pin" = "Show PIN";
"circlepw_hide_pin" = "Hide PIN";
"circlepw_continue" = "Continue";
"circlepw_next" = "Next";
"circlepw_confirm" = "Confirm";
"circlepw_skip" = "Skip";


"circlepw_question" = "Question";
"circlepw_answer" = "Answer";
"circlepw_hint" = "Hint";
"circlepw_empty_placeholder" = "-";


// [Page] EnterPINCode
"circlepw_enter_pincode_headline" = "Enter your";
"circlepw_enter_pincode_headline_2" = "PIN";
"circlepw_enter_pincode_subhead" = "Let us know if it’s really you.";
"circlepw_enter_pincode_forgot_pin" = "Forgot PIN?";
"circlepw_enter_pincode_use_biometrics" = "Use Biometrics";


// [Page] NewPINCode
"circlepw_new_pincode_headline" = "Enter your";
"circlepw_new_pincode_headline_2" = "New PIN";
"circlepw_new_pincode_subhead" = "Your PIN can’t have repeating (e.g. 000000) or consecutive (e.g. 123456) numbers.";


// [Page] ConfirmPINCode
"circlepw_confirm_pincode_headline" = "Re-enter your PIN to confirm";
"circlepw_confirm_pincode_headline_2" = "";
"circlepw_confirm_pincode_subhead" = "";


// [Page] SecurityIntros
"circlepw_security_intros_title" = "Recovery Method";
"circlepw_security_intros_headline" = "Set up your";
"circlepw_security_intros_headline_2" = "Recovery Method";
"circlepw_security_intros_description" = "This is the only way to recover wallet access if you forget your PIN. Pick 2 security questions and provide answers for access recovery.";
"circlepw_security_intros_link" = "Learn more";


// [Page] SecurityQuestions
"circlepw_security_questions_title" = "Recovery method";
"circlepw_security_questions_question_header" = "Choose your %@ question";
"circlepw_security_questions_question_placeholder" = "Select one question";
"circlepw_security_questions_required_mark" = "*";
"circlepw_security_questions_answer_header" = "Provide an answer";
"circlepw_security_questions_answer_placeholder" = "Type your answer here";
"circlepw_security_questions_answer_hint_header" = "Provide an answer hint (optional)";
"circlepw_security_questions_answer_hint_placeholder" = "Type your hint here";


// [Page] SelectQuestion
"circlepw_select_question_title" = "Select one question";


// [Page] SecuritySummary
"circlepw_security_summary_title" = "Summary";


// [Page] SecurityConfirm
"circlepw_security_confirm_title" = "Confirmation";
"circlepw_security_confirm_headline" = "Keep your questions safe";
"circlepw_security_confirm_input_headline" = "Type “I agree” to proceed:";
"circlepw_security_confirm_input_placeholder" = "Type “I agree” here";
"circlepw_security_confirm_input_match" = "I agree";


// [Page] RecoverPINCode
"circlepw_recover_pincode_headline" = "Recover your";
"circlepw_recover_pincode_headline_2" = "Web3 PIN";
"circlepw_recover_pincode_subhead" = "Please enter the answer of the security questions provided below.";
"circlepw_recover_pincode_answer_input_header" = "Enter your answer here";
"circlepw_recover_pincode_answer_input_placeholder" = "Type your answer here";


// [Page] BiometricsPrompt
"circlepw_pin_biometrics_allow_title" = "Allow Biometrics for Web3 Access";
"circlepw_pin_biometrics_allow_subtitle" = "Elevate Your Experience with Effortless Biometrics";
"circlepw_pin_biometrics_failed_title" = "Failed Biometrics for Web3 Access";
"circlepw_pin_biometrics_update_title" = "Update Biometrics for Web3 Access";
"circlepw_pin_biometrics_update_subtitle" = "Please update your biometrics";
"circlepw_pin_biometrics_disable" = "Don't ask me again";
"circlepw_pin_touch_id_dialog_subtitle" = "Using Touch ID protect PIN";

<resources> 
<color name="circlepw_text_main">#1A1A1A</color> 
<color name="circlepw_text_auxiliary">#3D3D3D</color> <color name="circlepw_text_action">#136FD8</color> <color name="circlepw_text_action_pressed">#B3136FD8</color> <color name="circlepw_placeholder">#A3A3A3</color> <color name="circlepw_error">#F55538</color> <color name="circlepw_error_background">#FDF2F2</color> <color name="circlepw_text_main2">#1C1C1C</color> <color name="circlepw_text_auxiliary2">#707070</color> <color name="circlepw_text_summary">#0073C3</color> <color name="circlepw_disabled_main_bt_text">#80FFFFFF</color> <color name="circlepw_disabled_main_bt_background">#800073C3</color> <color name="circlepw_main_bt_text">#ffffff</color> <color name="circlepw_main_bt_background">#0073C3</color> <color name="circlepw_main_bt_text_pressed">#ffffff</color> <color name="circlepw_main_bt_background_pressed">#1AA3FF</color> 
<color name="circlepw_second_bt_text">#0073C3</color>
    <color name="circlepw_second_bt_text_disabled">#800073C3</color>
    <color name="circlepw_second_bt_border">#0073C3</color>
    <color name="circlepw_second_bt_border_disabled">#800073C3</color>
    <color name="circlepw_second_bt_background">#FFFFFF</color>
    <color name="circlepw_second_bt_background_pressed">#F1F9FE</color>
    <color name="circlepw_second_bt_background_disabled">#80F1F9FE</color>
    <color name="circlepw_plain_bt_text">#0073C3</color>
    <color name="circlepw_plain_bt_text_disabled">#800073C3</color>
    <color name="circlepw_plain_bt_background">#FFFFFF</color>
    <color name="circlepw_plain_bt_background_pressed">#F1F9FE</color>
    <color name="circlepw_plain_bt_background_disabled">#80F1F9FE</color>
<color name="circlepw_success">#0B9C4A</color> <color name="circlepw_input_boarder">#E8E8E8</color> <color name="circlepw_input_boarder_focused">#46B5FF</color> <color name="circlepw_tag_text">#005339</color> <color name="circlepw_tag_background">#E1F2FF</color> <color name="circlepw_tag_following_text">#0073C3</color> <color name="circlepw_divider">#F0EFEF</color> <color name="circlepw_pin_dot_base">#ffffff</color> <color name="circlepw_pin_dot_base_boarder">#707070</color> 
<color name="circlepw_pin_dot_activated">#0073C3</color>
<color name="circlepw_background">#FFFFFF</color> <color name="circlepw_security_confirm_main_bg">#E9EEFE</color> <color name="circlepw_disabled_input_background">#F5F5F5</color> </resources>

<item name="colorControlActivated">@color/circlepw_input_boarder_focused</item>

<resources>
    <style name="circlepw_heading3">
        <item name="android:textSize">24sp</item>
    </style>
    <style name="circlepw_heading4">
        <item name="android:textSize">20sp</item>
    </style>
    <style name="circlepw_heading5">
        <item name="android:textSize">18sp</item>
    </style>
    <style name="circlepw_body1">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_body2">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_caption1">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_caption2">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_metadata1">
        <item name="android:textSize">12sp</item>
    </style>
    <style name="circlepw_metadata2">
        <item name="android:textSize">10sp</item>
    </style>
    <style name="circlepw_actionText">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_pinDigitText">
        <item name="android:textSize">40sp</item>
    </style>
    <style name="circlepw_mainButtonText">
        <item name="android:textSize">16sp</item>
    </style>
 <style name="circlepw_secondButtonText">
       <item name="android:textSize">16sp</item>
 </style>
 <style name="circlepw_plainButtonText">
       <item name="android:textSize">16sp</item>
 </style>
    <style name="circlepw_toolbarTitle">
        <item name="android:textSize">18sp</item>
    </style>

    <style name="circlepw_datePicker" parent="Theme.AppCompat.Light.Dialog">
        <!-- Top background-->
        <item name="colorAccent">@color/circlepw_main_bt_background</item>
        <!--selected Item color-->
        <item name="colorControlActivated">@color/circlepw_main_bt_background</item>
        <!-- arrow bordercolor(<>)-->
        <item name="android:selectableItemBackgroundBorderless">@color/circlepw_background</item>
        <!--Calender Background color -->
        <item name="android:windowBackground">@color/circlepw_background</item>
        <!-- Ok Cancel Color-->
        <item name="colorOnPrimary">@color/circlepw_main_bt_background</item>
        <!-- Week TextColor-->
        <item name="android:textColorSecondary">@color/circlepw_text_main</item>
        <!-- Calender Number color arrow color (< >) -->
        <item name="android:textColorPrimary">@color/circlepw_text_main</item>
        <!--day , month-->
        <item name="android:textColorPrimaryInverse">@color/circlepw_background</item>
        <!-- year-->
        <item name="android:textColorSecondaryInverse">@color/circlepw_background</item>
    </style>

</resourc

<item name="colorControlActivated">@color/circlepw_input_boarder_focused</item>

<resources>
    <style name="circlepw_heading3">
        <item name="android:textSize">24sp</item>
    </style>
    <style name="circlepw_heading4">
        <item name="android:textSize">20sp</item>
    </style>
    <style name="circlepw_heading5">
        <item name="android:textSize">18sp</item>
    </style>
    <style name="circlepw_body1">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_body2">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_caption1">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_caption2">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_metadata1">
        <item name="android:textSize">12sp</item>
    </style>
    <style name="circlepw_metadata2">
        <item name="android:textSize">10sp</item>
    </style>
    <style name="circlepw_actionText">
        <item name="android:textSize">14sp</item>
    </style>
    <style name="circlepw_pinDigitText">
        <item name="android:textSize">40sp</item>
    </style>
    <style name="circlepw_mainButtonText">
        <item name="android:textSize">16sp</item>
    </style>
    <style name="circlepw_toolbarTitle">
        <item name="android:textSize">18sp</item>
    </style>

    <style name="circlepw_datePicker" parent="Theme.AppCompat.Light.Dialog">
        <!-- Top background-->
        <item name="colorAccent">@color/circlepw_main_bt_background</item>
        <!--selected Item color-->
        <item name="colorControlActivated">@color/circlepw_main_bt_background</item>
        <!-- arrow bordercolor(<>)-->
        <item name="android:selectableItemBackgroundBorderless">@color/circlepw_background</item>
        <!--Calender Background color -->
        <item name="android:windowBackground">@color/circlepw_background</item>
        <!-- Ok Cancel Color-->
        <item name="colorOnPrimary">@color/circlepw_main_bt_background</item>
        <!-- Week TextColor-->
        <item name="android:textColorSecondary">@color/circlepw_text_main</item>
        <!-- Calender Number color arrow color (< >) -->
        <item name="android:textColorPrimary">@color/circlepw_text_main</item>
        <!--day , month-->
        <item name="android:textColorPrimaryInverse">@color/circlepw_background</item>
        <!-- year-->
        <item name="android:textColorSecondaryInverse">@color/circlepw_background</item>
    </style>

</resources>

{
  "font": {
    "ultraLight": "",
    "thin": "",
    "light": "",
    "regular": "CustomFont-Regular",
    "medium": "CustomFont-Medium",
    "semibold": "",
    "bold": "",
    "heavy": "",
    "black": ""
  },
  "color": {
    "background": "#FFFFFF",
    "divider": "#F0EFEF",
    "success": "#0B9C4A",
    "error": "#F55538",
    "error_background": "#FDF2F2",


    "text_main": "#1A1A1A",
    "text_main2": "#1C1C1C",
    "text_auxiliary": "#3D3D3D",
    "text_auxiliary2": "#707070",
    "text_summary": "#0073C3",
    "text_summary_highlight": "#0073C3",
    "text_placeholder": "#A3A3A3",
    "text_action": "#136FD8",
    "text_action_pressed": "#B3136FD8",
    "text_prompt": "#29233B",
    "text_prompt2": "#6B6580",




    "pin_dot_base": "#FFFFFF",
    "pin_dot_base_border": "#707070",
    "pin_dot_activated": "#3D3D3D",
    "pin_dot_focused": "#0073C3",


    "input_border": "#E8E8E8",
    "input_border_focused": "#46B5FF",
    "input_background_disabled": "#F5F5F5",


    "main_bt_text": "#FFFFFF",
    "main_bt_text_pressed": "#80FFFFFF",
    "main_bt_text_disabled": "#BFBFBF",
    "main_bt_background": "#0073C3",
    "main_bt_background_pressed": "#1AA3FF",
    "main_bt_background_disabled": "#F5F5F5",


    "second_bt_text": "#0073C3",
    "second_bt_border": "#0073C3",
    "second_bt_background": "#FFFFFF",
    "second_bt_background_pressed": "#F1F9FE",


    "plain_bt_text": "#0073C3",
    "plain_bt_background": "#FFFFFF",
    "plain_bt_background_pressed": "#F1F9FE",


    "recover_pin_hint_title": "#3D3652",
    "recover_pin_hint_title_bg": "#E1F2FF",
    "recover_pin_hint": "#0073C3",


    "security_confirm_main_bg": "#E9EEFE",


    "title_gradients": ["#0073C3", "#0073C3"],
  }
}