Enter and exit full screen & bindings for system UI/bars manipulation.

• @untitled/expo-full-screen
  • API reference
    • Constants
      • SDK_INT
    • Methods
      • enterFullScreen
      • enterFullScreenSync
      • exitFullScreen
      • exitFullScreenSync
      • getSystemUiVisibility
      • setSystemUiVisibility
      • setSystemUiVisibilitySync
      • getSystemBarsAppearance
      • setSystemBarsAppearance
      • setSystemBarsAppearanceSync
      • getSystemUiFlag
      • setSystemUiFlag
      • setSystemUiFlagSync
  • Installation
    • Managed Expo projects
    • Bare React Native projects
      • Add the package to your npm dependencies
      • Configure for Android
  • Usage
  • Contributing

NOTE: mixed usage of setSystemUiVisibility and setSystemBarsAppearance may lead to undefined system UI/bars states.

import {
  SDK_INT,
  enterFullScreen,
  exitFullScreen,
  enterFullScreenSync,
  exitFullScreenSync,
  getSystemUiVisibility,
  setSystemUiVisibility,
  setSystemUiVisibilitySync,
  getSystemBarsAppearance,
  setSystemBarsAppearance,
  setSystemBarsAppearanceSync,
  getSystemUiFlag,
  setSystemUiFlag,
  setSystemUiFlagSync
} from '@untitled/expo-full-screen'

The Android SDK version of the software system currently running on this hardware device. Alias of android.os.Build.VERSION#SDK_INT. When it is larger than or equal to 30, getSystemBarsAppearance, setSystemBarsAppearance and setSystemBarsAppearanceSync are available.

Enter full screen mode by doing the following:

1. Set decor view to render edge-to-edge.
2. Hide all system bars, including status bars, caption bar as well as navigation bars, but not IME.
3. Allow showing transient system bars when users swipe the edge of the screen (BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE).

Synchronous version of enterFullScreen.

Exit full screen mode by reversing what enterFullScreen does:

1. Set decor view to not render under status bar and navigation bars.
2. Show all system bars, including status bars, caption bar as well as navigation bars, but not IME.
3. Reset system bars behavior (BEHAVIOR_SHOW_BARS_BY_TOUCH).

Synchronous version of exitFullScreen.

Get system UI visibility. Alias of getSystemUiVisibility.

Set system UI visibility. Alias of setSystemUiVisibility.

Synchronous version of setSystemUiVisibility.

Retrieve the requested appearance of system bars. Alias of getSystemBarsAppearance.

Control the appearance of system bars. Alias of setSystemBarsAppearance.

Synchronous version of setSystemBarsAppearance.

Alias of getSystemUiVisibility when SDK_INT is lower than 30, or getSystemBarsAppearance otherwise. Useful when you will set the same flag value back later, so effectively you don't care what the SDK version really is.

Alias of setSystemUiVisibility when SDK_INT is lower than 30, or setSystemBarsAppearance otherwise. Useful when you will set back the same flag value that you retrieved via getSystemUiFlag, so effectively you don't care what the SDK version really is.

Synchronous version of setSystemUiFlag.

For managed Expo projects, simply install the package:

npm install git+https://github.com/Luluno01/expo-full-screen.git

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

npm install git+https://github.com/Luluno01/expo-full-screen.git

Optionally add the following content to your styles.xml:

<item name="android:windowLayoutInDisplayCutoutMode" tools:targetApi="o_mr1">shortEdges</item>

So that it looks like

<resources xmlns:tools="http://schemas.android.com/tools">
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColor">@android:color/black</item>
    <item name="android:editTextStyle">@style/ResetEditText</item>
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="android:windowLayoutInDisplayCutoutMode" tools:targetApi="o_mr1">shortEdges</item>
  </style>
  <style name="ResetEditText" parent="@android:style/Widget.EditText">
    <item name="android:padding">0dp</item>
    <item name="android:textColorHint">#c8c8c8</item>
    <item name="android:textColor">@android:color/black</item>
  </style>
  <style name="Theme.App.SplashScreen" parent="AppTheme">
    <item name="android:windowBackground">@drawable/splashscreen</item>
  </style>
</resources>

See example for a working example.

Contributions are very welcome! Simply open an issue or a pull request.