hide status bar react native

How to Hide Status Bar in React Native?

If you're building a mobile application using React Native, you might want to hide the status bar to give your app a cleaner look. The status bar is the bar at the top of the screen that displays the time, battery level, and other system information.

Method 1: Using React Native's StatusBar Component

The easiest way to hide the status bar in React Native is to use the StatusBar component provided by React Native. You can use the hidden prop to hide the status bar.

import React from 'react';
import { StatusBar } from 'react-native';

const App = () => {
  return (
    <>
      <StatusBar hidden />
      <YourApp />
    </>
  );
}

export default App;

This will hide the status bar for the entire app. You can also use the StatusBar component in individual screens to hide or show the status bar as needed.

Method 2: Using Native Modules

If you need more control over the status bar or want to customize it further, you can use native modules to access the native status bar API. This requires some platform-specific code, but it gives you more options for customization.

Here's an example of how to hide the status bar using native modules:

iOS

#import "AppDelegate.h"
#import "RCTBridge.h"
#import "RCTRootView.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // Hide status bar
  [[UIApplication sharedApplication] setStatusBarHidden:YES withAnimation:UIStatusBarAnimationNone];

  // Set up React Native view
  NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"YourApp" initialProperties:nil];
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  rootView.backgroundColor = [UIColor whiteColor];
  self.window.rootViewController = [[UIViewController alloc] init];
  self.window.rootViewController.view = rootView;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

Android

import android.os.Bundle;
import android.view.WindowManager;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Hide status bar
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
  }

  @Override
  protected String getMainComponentName() {
    return "YourApp";
  }
}

These examples show how to hide the status bar for the entire app. You can also use native modules to control the status bar on a per-screen basis.

Conclusion

There are multiple ways to hide the status bar in React Native, depending on your needs. You can use React Native's StatusBar component for a simple solution, or use native modules for more customization. Choose the method that works best for your project.