How to create immersive fullscreen application in React Native (Expo)?

Question

I want to create Immersive Fullscreen application with React Native (Expo). After many hour's of research online, I only got solutions which are applicable for bare react native project only which include editing MainActivity.java file.

From the Documentation for app.json - expo, I changed the app.json by adding following lines

    "androidNavigationBar": {
        "visible": "immersive",
    }

Before Adding the above lines, my application would look like this

However, after adding the lines and recompiling the application it looks like this (Changed Black Color into Red)

Unedited Image ↑

What I want is to remove the black part (Red in second image) - replacement of StatusBar with the <View /> of my application.

app.json

{
  "expo": {
    "name": "Fullscreen",
    "slug": "Fullscreen",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "androidStatusBar": {
        "translucent": true,
        "backgroundColor": "#ffffff"
    },
    "androidNavigationBar": {
        "visible": "immersive",
        "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

Answer 1

You can use expo-full-screen by simply installing it into your expo managed project without needing to modify native files:

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

Here is the API Reference here