ExpoNavigationBar.default.setVisibilityAsync is not a function

Expo Development Tools
1

I installed expoNavigationBar as per the Expo documents.
Importing as follows -
import * as NavigationBar from “expo-navigation-bar”;

function App() {
NavigationBar.setVisibilityAsync(“hidden”);
…
…
}

Am I using it wrong?
I checked the package.json and I have the following under “dependencies” -
“expo-navigation-bar”: “~1.0.0”,

I am getting the following alert -

[Unhandled promise rejection: TypeError: _ExpoNavigationBar.default.setVisibilityAsync is not a function. (In ‘_ExpoNavigationBar.default.setVisibilityAsync(visibility)’,

2

Hi @amirlamdan,

Since setVisibilityAsync is an async method and returns a promise, you will have to wait for it to resolve (or reject). In this case, you can use async/await syntax with try/catch so that the promise reject is handled.

3

Would you be so kind as to show an example?

4 
import * as React from 'react';
import { Button, Platform, StyleSheet, Text, View } from 'react-native';
import Constants from 'expo-constants';
import * as NavigationBar from 'expo-navigation-bar';

/* One way to call setVisibilityAsync(). An async function with "await" in try/catch */
async function hideNavBar() {
  try {
    await NavigationBar.setVisibilityAsync('hidden');
    console.log('Hiding: No error');
  } catch (err) {
    console.log('ERROR: Could not hide navigation bar!');
  }
}

/* Another way to call setVisibilityAsync(). .then(), .catch() */
function showNavBar() {
  NavigationBar.setVisibilityAsync('visible')
    .then(() => {
      console.log('Showing: No error');
    })
    .catch((err) => {
      console.log('ERROR: Could not show navigation bar!');
    });
}

export default function App() {
  const visibility = NavigationBar.useVisibility();

  return (
    <View style={styles.container}>
      <Button title="Hide Nav Bar" onPress={hideNavBar} />
      <Button title="Show Nav Bar" onPress={showNavBar} />
      <Text>Visibility: {visibility}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});
1 Like