Hide StatusBar using setStatusBarHidden and button click

[mikelopez37]

Please provide the following:

1. SDK Version: 4.7.2
2. Platforms(Android/iOS/web/all): iOS
3. Add the appropriate “Tag” based on what Expo library you have a question on.

I created a basic Expo blank project. It uses the StatusBar component from “expo-status-bar”.
I added a button and in the “onPress” event added a call to “setStatusBarHidden”. When I run the app and click the button I get the error: “Can’t find variable setStatusBarHidden.”

Here’s the code. Any help is appreciated.

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Button } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
      <Button
        onPress={() => {
         setStatusBarHidden(true, 'slide');
        }}
        title="Click Me"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

[adamjnav]

Hey @mikelopez37,

You’ll need to import the method you want to use via import { setStatusBarHidden } from "expo-status-bar". Right now you’ve imported the component from the library but not the method which is why you are seeing the error.

Cheers,
Adam

[mikelopez37]

Thank you, Adam.

Mike