react-native-full-screen's Introduction

React native full screen functionality Android

There is plenty of room for improvment by adding additional react bindings for props and callbacks.

Props: ToggleView

  <ToggleView style={{flex:1,alignItems:'center', justifyContent:'center'}}>
    <Image style={{height:500,width:500}} source={{uri:"http://placehold.it/500"}}></Image>

  </ToggleView>

Property	Type	Default	Description
delay	number	3000	how long to delay hide
delayHide	boolean	true	if there should be a delayed hide event

Android Installation

Install the npm package react-native-full-screen. Inside your React Native project, run (example):

npm install --save react-native-full-screen

# RN >= 0.60
No action needed

# RN < 0.60
react-native link react-native-full-screen

Manual installation

In android/settings.gradle, remove the line include ':app' and add the following lines

include ':react-native-full-screen'
project(':react-native-full-screen').projectDir = file('../node_modules/react-native-full-screen/android')

NOTE : If you have included other libraries in your project, the include line will contain the other dependencies too.

In android/app/build.gradle, add a dependency to ':react-native-full-screen'

dependencies {
    compile project(':react-native-full-screen')
}

Next, you need to change the MainActivity of your app to register FullScreenModule :

import com.rn.full.screen.FullScreenModule; // add this import

public class MainActivity extends ReactActivity {
    //...

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new FullScreenModule() // add this manager
      );
    }