Trying to make the Android Navigation Bar transparent in Expo

Question

I'm working on a React Native project with expo and am trying to have the Android Navigation bar rest on top of my view (as shown below and described here)

However I am having difficulty getting my desired result instead I get a gray bar at the bottom.

Thus far I've tried to set the navigation bar to transparent in my app.json file or use NavigationBar.setBackgroundColorAsync(color) both ending with the same result.

//app.json
    "androidNavigationBar": {
      "backgroundColor":"#00000000"
    },

//App.js
    //also tried flex: 1
    <View style={{height: Dimensions.get("screen").height, backgroundColor: "blue"}}></View>

Answer 1

try using expo-navigation-bar

import * as NavigationBar from "expo-navigation-bar";

NavigationBar.setPositionAsync("absolute");
NavigationBar.setBackgroundColorAsync("#ffffff01");