react-native-immersive-mode

Getting started

$ npm install @kichiyaki/react-native-immersive-mode --save

Mostly automatic installation

Note. react-native >0.60 no need to link

$ react-native link @kichiyaki/react-native-immersive-mode

Manual installation

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
• setBarMode
• setBarStyle
• setBarTranslucent
• setBarColor
• addEventListener

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 |

// 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 |

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 |

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 | |

ImmersiveMode.setBarTranslucent(true);

setBarColor

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

| name | type | description | | ---- | ---- | ------------| | color | string | #rgb, #rrggbb, #rrggbbaa. if color is null will set default color |

default color is color before changed by setBarColor

ImmersiveMode.setBarColor('#ff0000');

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) | description |

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

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