Skip to content

Status Bar Overlap on Android with React Native PayTabs SDK - Payment Screen starts under status bar #36

@Libinvincent

Description

@Libinvincent
Image

Hello,

I am encountering an issue with the PayTabs React Native SDK on Android where the payment screen overlaps with the status bar at the top of the device. When I call RNPaymentSDKLibrary.startCardPayment with my configuration, the payment screen content starts beneath the status bar, causing part of the UI to be hidden or clipped.

🔍 Steps to Reproduce:

Integrate PayTabs React Native SDK (@paytabs/react-native-paytabs) in a React Native project.

Configure and call the payment as shown below:

const resolvedMerchantLogo = Image.resolveAssetSource(merchantLogo);
theme.merchantLogo = resolvedMerchantLogo;
configuration.theme = theme;
configuration.billingDetails = billingDetails;

RNPaymentSDKLibrary.startCardPayment(JSON.stringify(configuration))
  .then(result => console.log(result))
  .catch(error => console.log('PAYMENT ERROR', error));

🎨 styles.xml:
 `
<resources>
        <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
            <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        </style>

      <color name="payment_sdk_primary_color">#5C13DF</color>
      <color name="payment_sdk_secondary_color">#FFC107</color>
      <color name="payment_sdk_primary_font_color">#111112</color>
      <color name="payment_sdk_secondary_font_color">#6D6C70</color>
      <color name="payment_sdk_separators_color">#FFC107</color>
      <color name="payment_sdk_stroke_color">#673AB7</color>
      <color name="payment_sdk_button_text_color">#FFF</color>
      <color name="payment_sdk_title_text_color">#FFF</color>
      <color name="payment_sdk_button_background_color">#3F51B5</color>
      <color name="payment_sdk_background_color">#F9FAFD</color>
      <color name="payment_sdk_card_background_color">#F9FAFD</color>

      <dimen name="payment_sdk_primary_font_size">17sp</dimen>
      <dimen name="payment_sdk_secondary_font_size">15sp</dimen>
      <dimen name="payment_sdk_separator_thickness">10dp</dimen>
      <dimen name="payment_sdk_stroke_thickness">.5dp</dimen>
      <dimen name="payment_sdk_input_corner_radius">8dp</dimen>
      <dimen name="payment_sdk_button_corner_radius">8dp</dimen>

</resources>

`
| Property                      | Version              |
| ----------------------------- | ------------------ |
| React                         | 19.1.0             |
| React Native                  | 0.80.0             |
| @paytabs/react-native-paytabs | 2.6.9              |

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions