en.md

Template version: v0.2.2

react-native-reanimated

[!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-reanimated 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-reanimated@3.6.0
npm install @react-native-oh-tpl/react-native-reanimated

yarn

yarn add react-native-reanimated@3.6.0
yarn add @react-native-oh-tpl/react-native-reanimated

Add react-native-reanimated/plugin to babel.config.js:

[!TIP] Why is this needed? The Reanimated Babel plugin automatically converts special JavaScript functions (called worklets) so that they can be passed and run on the UI thread.

  module.exports = {
    presets: [
      ... // don't add it here :)
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

Clear the Metro cache (recommended):

npm

npm start --reset-cache

yarn

yarn start --reset-cache

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

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

import { Button, View } from "react-native";
import Animated, { useSharedValue, withSpring } from "react-native-reanimated";

export default function App() {
  const width = useSharedValue(100);

  const handlePress = () => {
    width.value = withSpring(width.value + 50);
  };

  return (
    <View style={{ flex: 1, alignItems: "center" }}>
      <Animated.View
        style={{
          width,
          height: 100,
          backgroundColor: "violet",
        }}
      />
      <Button onPress={handlePress} title="Click me" />
    </View>
  );
}

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.

1. 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-reanimated": "file:../../node_modules/@react-native-oh-tpl/react-native-reanimated/harmony/reanimated.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] For details, see Directly Linking Source Code.

3. Configuring CMakeLists and Introducing ReanimatedPackage

Open entry/src/main/cpp/CMakeLists.txt and add the following code:

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
+ set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")

add_subdirectory("${RNOH_CPP_DIR}" ./rn)

# RNOH_END: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-reanimated/src/main/cpp" ./reanimated)
# RNOH_END: manual_package_linking_1

add_library(rnoh_app SHARED
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)

target_link_libraries(rnoh_app PUBLIC rnoh)

# RNOH_BEGIN: manual_package_linking_2
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+ target_link_libraries(rnoh_app PUBLIC rnoh_reanimated)
# RNOH_BEGIN: manual_package_linking_2

[!Tip] Note: The NODE_MODULES path refers to the installation path of the source repository. Users can define NODE_MODULES based on the path where the source repository is installed.

Openentry/src/main/cpp/PackageProvider.cpp and add the following code:

#include "RNOH/PackageProvider.h"
#include "SamplePackage.h"
+ #include "ReanimatedPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
      std::make_shared<SamplePackage>(ctx),
+     std::make_shared<ReanimatedPackage>(ctx)
    };
}

4. Introducing ReanimatedPackage to ArkTS

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

  ...
+ import { ReanimatedPackage } from '@react-native-oh-tpl/react-native-reanimated/ts';

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

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

This library is adapted based on react-native-reanimated (version=3.6.0). 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-reanimated Releases

API

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

[!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	Type	Required	Platform	HarmonyOS Support
withTiming	withTiming lets you create an animation based on duration and easing..	function	No	All	yes
withSpring	withSpring lets you create spring-based animations.	function	No	All	yes
withDecay	withDecay lets you create animations that mimic objects in motion with friction. The animation will start with the provided velocity and slow down over time according to the given deceleration rate until it stops.	function	No	All	yes
withRepeat	withRepeat is an animation modifier that lets you repeat an animation given number of times or run it indefinitely.	function	No	All	yes
useSharedValue	useSharedValue lets you define shared values in your components.	function	No	All	yes
useAnimatedStyle	useAnimatedStyle lets you create a styles object, similar to StyleSheet styles, which can be animated using shared values.	function	No	All	yes
useAnimatedRef	useAnimatedRef lets you get a reference of a view. Used alongside measure, scrollTo, and useScrollViewOffset functions.	function	No	All	yes
useDerivedValue	useDerivedValue lets you create new shared values based on existing ones while keeping them reactive.	function	No	All	yes
cancelAnimation	cancelAnimation lets you cancel a running animation paired to a shared value.	function	No	All	yes
runOnJS	runOnJS lets you asynchronously run non-workletized functions that could not otherwise run on the UI thread. This applies to most external libraries as they do not have their functions marked with "worklet"; directive.	function	No	All	yes
runOnUI	runOnUI lets you asynchronously run workletized functions on the UI thread.	function	No	All	yes
measure	measure lets you synchronously get the dimensions and position of a view on the screen, all on the UI thread.	function	No	All	yes
Easing	easing set motion trajectory	function	No	All	yes
useAnimatedKeyboard	useAnimatedKeyboard lets you create animations based on state and height of the virtual keyboard.	function	No	All	yes

Known Issues

Others

License

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