en.md

Template version: v0.2.0

react-native-keep-awake

[!TIP] GitHub address

Installation and Usage

Find the matching version information in the release address of a third-party library: @react-native-oh-tpl/react-native-keep-awake Releases. For older versions that are not published to npm, please refer to the installation guide to install the tgz package.

Go to the project directory and execute the following instruction:

npm

npm install @react-native-oh-tpl/react-native-keep-awake

yarn

yarn add @react-native-oh-tpl/react-native-keep-awake

The following code shows the basic use scenario of the repository:

[!WARNING] The name of the imported repository remains unchanged.

import React, { useState, useEffect } from "react";
import { Text, Button } from "react-native";

import KeepAwake, {
  activateKeepAwake,
  deactivateKeepAwake,
  useKeepAwake,
} from "react-native-keep-awake";

export function KeepAwakeExample() {
  useKeepAwake();

  const handleClick = (buttonId: number) => {
    switch (buttonId) {
      case 1:
        deactivateKeepAwake();
        break;
      case 2:
        activateKeepAwake();
        break;
      case 3:
        deactivateKeepAwake();
        break;
      case 4:
        KeepAwake.activate();
        break;
      case 5:
        KeepAwake.deactivate();
        break;
      default:
        break;
    }
  };

  return (
    <>
      <Text style={{ color: "blue" }}>
        Button 1: Hook default method enabled (always
        on),----useKeepAwake(),Click button 1 to turn off the constant light
      </Text>
      <Button title="Button 1" onPress={() => handleClick(1)}></Button>

      <Text style={{ color: "blue" }}>
        Button 2: Enable functions method----activateKeepAwake()
      </Text>
      <Button title="Button 2" onPress={() => handleClick(2)}></Button>

      <Text style={{ color: "blue" }}>
        Button 3: Close the function method----deactivateKeepAwake()
      </Text>
      <Button title="Button 3" onPress={() => handleClick(3)}></Button>

      <Text style={{ color: "blue" }}>
        Button 4: Old interface method----KeepAwake.activate()
      </Text>
      <Button title="Button 4" onPress={() => handleClick(4)}></Button>

      <Text style={{ color: "blue" }}>
        Button 5: Old interface method----KeepAwake.deactivate()
      </Text>
      <Button title="Button 5" onPress={() => handleClick(5)}></Button>
    </>
  );
}

Link

Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking.

Open the harmony directory of the HarmonyOS project in DevEco Studio.

Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

2. Introducing Native Code

Currently, two methods are available:

Method 1 (recommended): Use the HAR file.

[!TIP] The HAR file is stored in the harmony directory in the installation path of the third-party library.

Open entry/oh-package.json5 file and add the following dependencies:

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-oh-tpl/react-native-keep-awake": "file:../../node_modules/@react-native-oh-tpl/react-native-keep-awake/harmony/keep_awake.har"
  }

Click the sync button in the upper right corner.

Alternatively, run the following instruction on the terminal:

cd entry
ohpm install

Method 2: Directly link to the source code.

[!TIP] The source code is stored in the harmony folder in the installation path of the third-party library.

Open entry/oh-package.json5 file and add the following dependencies:

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-oh-tpl/react-native-keep-awake": "file:../../node_modules/@react-native-oh-tpl/react-native-keep-awake/harmony/keep_awake"
  }

run the following instruction on the terminal:

cd entry
ohpm install --no-link

3. Introducing RNKeepAwakePackage to ArkTS

Open the entry/src/main/ets/RNPackagesFactory.ts file and add the following code:

  ...
+ import { RNKeepAwakePackage } from "@react-native-oh-tpl/react-native-keep-awake/ts";

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new RNKeepAwakePackage(ctx)
  ];
}

4. Running

Click the sync button in the upper right corner.

Alternatively, run the following instruction on the terminal:

cd entry
ohpm install

Then build and run the code.

Constraints

Compatibility

To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.

Check the release version information in the release address of the third-party library: @react-native-oh-tpl/react-native-keep-awake Releases

This document is verified based on the following versions:

1. RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1 B.0.18, HarmonyOS NEXT Developer Preview0 B.0.60, HarmonyOS NEXT Developer Preview2 B.0.73; IDE: DevEco Studio 5.0.3.200; ROM: 2.0.0.18;

Usage

[!tip] The Platform column indicates the platform where the properties are supported in the original third-party library.

[!tip] Both old and new APIs can be used in the form of functions.

[!tip] If the value of HarmonyOS Support is yes, it means that the HarmonyOS platform supports this property; no means the opposite; partially means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.

Name	Description	Required	Platform	HarmonyOS Support
<KeepAwake/>	Component that activates the current screen-on mode.	No	All	yes
KeepAwake.activate()	Function that deactivates the current screen-on mode (old API).	No	All	yes
KeepAwake.deactivate()	Function that deactivates the current screen-on mode (old API).	No	All	yes
useKeepAwake()	Hook.	No	All	yes
activateKeepAwake()	Function that activates the current screen-on mode (new API).	No	All	yes
deactivateKeepAwake()	Function that deactivates the current screen-on mode (new API).	No	All	yes

Known Issues

Others

License

This project is licensed under The MIT License (MIT).