Template version: v0.4.0

react-native-theme-switch-animation

This project is based on react-native-theme-switch-animation。

This third-party library has been migrated to Gitcode and is now available for direct download from npm, the new package name is: @react-native-ohos/react-native-theme-switch-animation, The version correspondence details are as follows:

1.Installation and Usage

Go to the project directory and execute the following instruction:

npm

npm install @react-native-ohos/react-native-theme-switch-animation

yarn

yarn add @react-native-ohos/react-native-theme-switch-animation

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

import * as React from "react";
import { StyleSheet, View, Button, Text } from "react-native";
import switchTheme from "react-native-theme-switch-animation";

export function ReactNativeThemeSwitchAnimationDemo() {
  const [theme, setTheme] = React.useState("light");

  return (
    <View
      style={{
        ...styles.container,
        backgroundColor: theme === "light" ? "white" : "black",
      }}
    >
      <View
        style={{
          borderWidth: 1,
          borderColor: theme === "light" ? "black" : "white",
          borderRadius: 1.4,
          padding: 50,
        }}
      >
        <Text
          style={{
            color: theme === "light" ? "black" : "white",
          }}
        >
          tests
        </Text>
      </View>

      <View style={{ marginTop: 10 }}>
        <Button
          title="start"
          onPress={() => {
            switchTheme({
              switchThemeFunction: () => {
                setTheme(theme === "light" ? "dark" : "light");
              },
              animationConfig: {
                type: "inverted-circular",
                duration: 2000,
                startingPoint: {
                  cxRatio: 0.5,
                  cyRatio: 0.5,
                },
              },
            });
          }}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

export default ReactNativeThemeSwitchAnimationDemo;

2.Link

Using AutoLink need to be configured according to this document, Autolink Framework Guide Documentation: https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

If the version you use supports Autolink and the project has been connected to Autolink, skip the ManualLink configuration.

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

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",

    "@react-native-ohos/react-native-theme-switch-animation": "file:../../node_modules/@react-native-ohos/react-native-theme-switch-animation/harmony/react_native_theme_switch.har"
  }

cd entry
ohpm install

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
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")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)

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

# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-theme-switch-animation/src/main/cpp" ./theme-switch-animation)
# RNOH_END: manual_package_linking_1

file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")

add_library(rnoh_app SHARED
    ${GENERATED_CPP_FILES}
    "./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_theme_switch_animation)
# RNOH_END: manual_package_linking_2

#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
#include "SamplePackage.h"
+ #include "ThemeSwitchAnimationPackage.h"

using namespace rnoh;

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

...
+ import { RNThemeSwitchPackage } from "@react-native-ohos/react-native-theme-switch-animation/ts";

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

2.5Running

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.

3.Constraints

3.1Precautions

The HarmonyOS implementation of this library depends on the native code from @react-native-ohos/react-native-safe-area-context. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.

If it is not included, follow the guide provided in @react-native-ohos/react-native-safe-area-context to add it to your project.

3.2Compatibility

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.

Verified in the following versions.

1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71;
3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
4. RNOH: 0.82.7; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.328 SP26;

4.Properties

switchTheme Function Props

animationConfig options

startingPoint options

5.Known Issues

• circular 动画效果动画开始前有一个闪屏的问题，后续需要提供在图片上剪裁出一个圆形，透过圆形可以看到下方节点的接口或方法。issue#6

6.Others

The captureType attribute is not supported by HarmonyOS because this attribute is designed to handle the issue of certain elements being invisible during the inverted circular animation on the iOS end, but this problem does not exist on the HarmonyOS end.

7.License

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