Skip to content

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

@Libinvincent

Description

@Libinvincent
Image 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:
`

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
@drawable/rn_edit_text_material
</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>

`

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