Skip to content

Set Immersive mode for Android (hide status bar or navigation bottom bar)

License

Notifications You must be signed in to change notification settings

wrathyz/react-native-immersive-mode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-immersive-mode

npm version

Installation

Mostly automatic installation

npm install react-native-immersive-mode --save

Auto linking library (react-native < 0.60)

react-native link react-native-immersive-mode

Manual linking library

Android

  1. Append the following lines to android/settings.gradle
    include ':react-native-immersive-mode'
    project(':react-native-immersive-mode').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-immersive-mode/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle
    implementation project(':react-native-immersive-mode')
    
  3. Add it to your MainApplication.java
    import com.rnimmersivemode.RNImmersiveModePackage;	// add this
    
    public class MainActivity extends ReactActivity {
    	@Override
    	protected List<ReactPackage> getPackages() {
    		return Arrays.<ReactPackage>asList(
    			new MainReactPackage(),
    			new RNImmersiveModePackage()	// add this
    		);
    	}
    }
    

Usage

Bar Mode

  • Normal - show status and navigation
  • Full - hide status and navigation
  • FullSticky - hide status and navigation with sticky
  • Bottom - hide navigation
  • BottomSticky - hide navigation with sticky

Bar Style

  • Dark
  • Light

Methods

fullLayout

fullLayout(full: boolean): void use all area of screen

name type description
full boolean true use all area of screen, false not include status and navigation bar
import ImmersiveMode from 'react-native-immersive-mode';

// should set full layout in componentDidMount
componentDidMount() {
	ImmersiveMode.fullLayout(true);
}
// and should restore layout
componentWillUnmount() {
	ImmersiveMode.fullLayout(false);
}

setBarMode

setBarMode(mode: string): void change status and navigation bar mode

Note. mode sticky will be disabled bar color.

name type description
mode string Bar Mode
import ImmersiveMode from 'react-native-immersive-mode';

ImmersiveMode.setBarMode('Normal');

setBarStyle

setBarStyle(style: string): void chnage status and navigation style

Note. To change system Navigation(bottom) to Light, must be change bar color setBarColor to other color first.

name type description
mode string Bar Style
import ImmersiveMode from 'react-native-immersive-mode';

ImmersiveMode.setBarStyle('Dark');

setBarTranslucent

setBarTranslucent(translucent: boolean): void change status and navigation bar is transparent 50%.

Note. When true bar color will be disabled.

name type description
translucent booelan
import ImmersiveMode from 'react-native-immersive-mode';

ImmersiveMode.setBarTranslucent(true);

setBarColor

setBarColor(color: string): void change status and navigation bar is transparent 50%.

name type description
color string #rgb, #rrggbb, #rrggbbaa
import ImmersiveMode from 'react-native-immersive-mode';

ImmersiveMode.setBarColor('#ff0000');

Note. still can passing null to set default color

setBarDefaultColor

setBarDefaultColor(): void

default color is color before changed by setBarColor

import ImmersiveMode from 'react-native-immersive-mode';

ImmersiveMode.setBarDefaultColor();

addEventListener

addEventListener(callback: function): EmitterSubscription trigger event when bar visibility change (mode sticky not trigged)

name type params description
callback function (statusBar: boolean, navigationBottomBar: boolean) true: show, false: hidden
import ImmersiveMode from 'react-native-immersive-mode';

// ...

componentDidMount() {
	this.listen = ImmersiveMode.addEventListener((e) => {
		console.log(e)
	})
}

componentWillUnmount() {
	this.listen.remove();
}

About

Set Immersive mode for Android (hide status bar or navigation bottom bar)

Resources

License

Stars

Watchers

Forks

Packages

No packages published