Skip to content

useStallionModal modal overlaps status bar on Android #130

Description

@AsurNikul

Description

The Stallion modal (triggered via useStallionModal's showModal) does
not respect Android safe area insets. This causes UI elements to overlap
system bars in multiple places:

  1. Top: Login/PIN screen content overlaps the status bar
  2. Bottom: The environment selector ("Testing" / "Production" toggle)
    on the app info screen overlaps the Android navigation bar — the
    "Production" button is partially obscured/cut off by the nav bar

Steps to Reproduce

  1. Call showModal() from useStallionModal:
   const { showModal } = useStallionModal();
   showModal();
  1. On the PIN entry screen — observe top content overlapping status bar
  2. Enter PIN and continue to the app info screen (App Version / UID)
  3. Scroll to bottom — observe the Testing/Production selector overlapping
    the Android nav bar

Expected Behavior

All modal content should respect safe area insets (top status bar and
bottom navigation bar) on Android, consistent with edge-to-edge display
handling.

Actual Behavior

  • Status bar overlaps top content (see screenshot 1)
  • Navigation bar overlaps the environment toggle at bottom (see screenshot 2)

Additional Issue Observed (may be separate)

"invalid project id" error message appears on the PIN screen — filing
separately unless maintainers suspect it's related.

Environment

  • react-native-stallion: 2.4.1
  • react-native: 0.86.0
  • react: 19.2.3
  • Platform: Android
  • Device: moto g45 5G

Screenshot

Image Image

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions