How to hide the statusBar when react-native modal shown?

DORSETRIGS

2 min read

·

07-10-2024

13

0

Share

Say Goodbye to the Status Bar: Mastering Modal Visibility in React Native

React Native's modals are a powerful way to overlay information and interaction on top of your app. But sometimes, the status bar can clash with the aesthetic or functionality of your modal. In this article, we'll dive into how to seamlessly hide the status bar when your React Native modal is displayed.

Scenario:

Let's say you're building a login modal that requires the user's full focus. The status bar, with its battery indicator, time, and signal strength, can be a distracting element. You want to create a more immersive experience by temporarily concealing the status bar when the modal is active.

The Code:

import React, { useState } from 'react';
import { View, Text, Button, Modal, StyleSheet, StatusBar } from 'react-native';

const MyModal = () => {
  const [showModal, setShowModal] = useState(false);

  const toggleModal = () => {
    setShowModal(!showModal);
  };

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={toggleModal} />

      <Modal
        animationType="slide"
        transparent={true}
        visible={showModal}
        onRequestClose={() => {
          setShowModal(false);
        }}
      >
        <View style={styles.modalView}>
          <Text>This is a modal!</Text>
          <Button title="Close Modal" onPress={toggleModal} />
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalView: {
    backgroundColor: 'white',
    padding: 20,
    margin: 20,
    borderRadius: 5,
    elevation: 5,
  },
});

export default MyModal;

The Solution:

The key to hiding the status bar lies within the StatusBar component provided by React Native. By using the setHidden method within the Modal's lifecycle, we can ensure the status bar's visibility is managed effectively.

import React, { useState } from 'react';
import { View, Text, Button, Modal, StyleSheet, StatusBar } from 'react-native';

const MyModal = () => {
  const [showModal, setShowModal] = useState(false);

  const toggleModal = () => {
    setShowModal(!showModal);
    // Hide status bar when modal is visible
    if (showModal) {
      StatusBar.setHidden(true);
    } else {
      // Show status bar when modal is hidden
      StatusBar.setHidden(false);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={toggleModal} />

      <Modal
        animationType="slide"
        transparent={true}
        visible={showModal}
        onRequestClose={() => {
          setShowModal(false);
        }}
      >
        <View style={styles.modalView}>
          <Text>This is a modal!</Text>
          <Button title="Close Modal" onPress={toggleModal} />
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  // ... (styles from previous example)
});

export default MyModal;

Explanation:

1. Import StatusBar: Begin by importing the StatusBar component.
2. toggleModal Function: Inside the toggleModal function, which handles modal visibility, we use StatusBar.setHidden(true) to hide the status bar when the modal is displayed (showModal is true).
3. Show Status Bar on Close: Conversely, when the modal is hidden, StatusBar.setHidden(false) is used to restore the status bar.

Additional Considerations:

• StatusBar.setBarStyle: You can also adjust the status bar's appearance (e.g., light content) with StatusBar.setBarStyle.
• StatusBar.setBackgroundColor: Customize the background color of the status bar to blend it with your modal design.
• StatusBar.setTranslucent: Make the status bar translucent to subtly blend with your modal content.

Conclusion:

By understanding how to control the status bar's visibility in your React Native modals, you can enhance your app's user experience. This simple yet effective technique allows you to create a more immersive and visually appealing interface.