diff --git a/CHANGELOG.md b/CHANGELOG.md
index f92fe2e1edc80f161dfe2d5d68a8a6211b508841..631ca149a88bfcdb72decb32eacf2cfe8dc11b14 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,13 @@
 # Changelog
+
+## 5.1.0.203
+- chore: update to version 0.72.57,([e10c9b86e](https://gitee.com/openharmony-sig/ohos_react_native/commit/e10c9b86e27d638261e28d8f18048bafb5ef47a1))
+- fix:crash when Animated remove native event,([62fd10343](https://gitee.com/openharmony-sig/ohos_react_native/commit/62fd10343f8061dac00ad3c0f72ccc45855b15ec))
+- fix lineHeight inconsistency,([325a3319c](https://gitee.com/openharmony-sig/ohos_react_native/commit/325a3319c642880e007aa0cffcebe8b32cc351ef))
+- chore: update to version 5.1.0.202(0.72.56),([6d5003245](https://gitee.com/openharmony-sig/ohos_react_native/commit/6d5003245109243b330adeb32156a0fe9de28575))
+- fix(codecheck): unsafe memcpy,([9b42afd1a](https://gitee.com/openharmony-sig/ohos_react_native/commit/9b42afd1aa3aa6c4200e51577aa1260fdd75479d))
+- feat(mmap): speed up bundle loading with mmap,([1451c57a5](https://gitee.com/openharmony-sig/ohos_react_native/commit/1451c57a5c5a63607a0020c1b1ca4cb861372805))
+
 ## 5.1.0.202
 - Supplement the pull third-party library dependency command,([18e052f9](https://gitee.com/openharmony-sig/ohos_react_native/commit/18e052f9e2073ab4860f1526e21ecd8c0daab360))
 - doc(performance): update performance tuning instructions and add BiSheng compiler usage,([c3ad53c3](https://gitee.com/openharmony-sig/ohos_react_native/commit/c3ad53c3dac1f260af07016e49924d5d0563e777))
diff --git a/README_zh.md b/README_zh.md
index 087337ebc1bd0c0fa9e713787d8d05755b2ad0b4..9157b9a8fdb26bdb60cd53cd86bbe2c0ac18e579 100644
--- a/README_zh.md
+++ b/README_zh.md
@@ -7,16 +7,20 @@
 ### 前提条件
 
 #### 安装了HarmonyOS NEXT的模拟器或真机
+
 该项目需要HarmonyOS NEXT上进行测试。
 
 #### 华为开发者账号
+
 运行应用程序时，需要用到华为开发者账号进行签名。
 
 #### DevEco Studio
+
 从[官网](https://developer.huawei.com/consumer/cn/deveco-studio/)下载并安装最新版本 DevEco Studio。
 
 ### 启动项目
-> 如果是编译源码，在拉取工程后需要在工程的根目录执行`git submodule update --init`命令，拉取三方库依赖。 
+
+> 如果是编译源码，在拉取工程后需要在工程的根目录执行`git submodule update --init --recursive`命令，拉取三方库依赖。
 
 1. 打开终端（命令行工具）并导航到react-native-harmony-cli目录，然后执行 `npm i && npm pack`。
 1. 在终端中导航到react-native-harmony-sample-package目录，然后执行 `npm i && npm pack`。
@@ -35,16 +39,20 @@
 - RNOH的使用问题可查阅[中文文档](./docs/zh-cn/README.md)或[英文文档](./docs/en/README.md)。
 
 ## 版本说明
+
 当前发布的最新正式版本：
+
 - [RNOH v5.0.0.813（2024-12-26）](./docs/zh-cn/release-notes/react-native-harmony-v5.0.0.813.md)
 
 历史发布的正式版本：
+
 - [RNOH v5.0.0.812（2024-12-14）](./docs/zh-cn/release-notes/react-native-harmony-v5.0.0.812.md)
 - [RNOH v5.0.0.715（2024-10-25）](./docs/zh-cn/release-notes/react-native-harmony-v5.0.0.715.md)
 - [RNOH v5.0.0.601（2024-09-26）](./docs/zh-cn/release-notes/react-native-harmony-v5.0.0.601.md)
 - [RNOH v5.0.0.500（2024-08-27）](./docs/zh-cn/release-notes/react-native-harmony-v5.0.0.500.md)
 
 ## 分支说明
+
 - 0.72.5-ohos-5.0-release分支：release分支，如需下载源码，请从此分支下载上述正式版本对应的tag点源码。
 - master分支：主分支，请勿从此分支拉取源码用于商用版本，不保证质量。
 - dev分支/partner-dev分支：开发分支，请勿从此分支拉取源码，不保证质量。
diff --git a/docs/Samples/Capture_bundle/NativeProject/AppScope/app.json5 b/docs/Samples/Capture_bundle/NativeProject/AppScope/app.json5
index cfc56cdf27a2f1e0a320f40ea3c84bb0915b502c..3d2e31a3f9f5f9084aab0dce6c5271f5d3539316 100644
--- a/docs/Samples/Capture_bundle/NativeProject/AppScope/app.json5
+++ b/docs/Samples/Capture_bundle/NativeProject/AppScope/app.json5
@@ -1,6 +1,6 @@
 {
   "app": {
-    "bundleName": "com.example.CaptureBundle",
+    "bundleName": "com.example.capturebundle",
     "vendor": "example",
     "versionCode": 1000000,
     "versionName": "1.0.0",
diff --git a/docs/Samples/Capture_bundle/NativeProject/entry/hvigorfile.ts b/docs/Samples/Capture_bundle/NativeProject/entry/hvigorfile.ts
index d0f029bd2a2858b1701bf87bf3f67c00d5630c84..6650e7217be2e794b661d45f0d373a35d0026db4 100644
--- a/docs/Samples/Capture_bundle/NativeProject/entry/hvigorfile.ts
+++ b/docs/Samples/Capture_bundle/NativeProject/entry/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { hapTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/Capture_bundle/NativeProject/entry/src/main/ets/RNPackagesFactory.ets b/docs/Samples/Capture_bundle/NativeProject/entry/src/main/ets/RNPackagesFactory.ets
index 193ab1590919086abfb7b631470f31e9d41b086b..32a1c1f885769452c41143514bf10459f08e7fc6 100644
--- a/docs/Samples/Capture_bundle/NativeProject/entry/src/main/ets/RNPackagesFactory.ets
+++ b/docs/Samples/Capture_bundle/NativeProject/entry/src/main/ets/RNPackagesFactory.ets
@@ -6,6 +6,7 @@
  */
 
 import { RNPackageContext, RNPackage } from '@rnoh/react-native-openharmony/ts';
+
 export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
   return [];
 }
\ No newline at end of file
diff --git a/docs/Samples/Capture_bundle/NativeProject/entry/src/main/ets/pages/Index.ets b/docs/Samples/Capture_bundle/NativeProject/entry/src/main/ets/pages/Index.ets
index bc6ef0a3d4b624cf3dedc9d9f98b767f60d06590..9ce6839c316aaf2635a4d9536651acf0d8befb76 100644
--- a/docs/Samples/Capture_bundle/NativeProject/entry/src/main/ets/pages/Index.ets
+++ b/docs/Samples/Capture_bundle/NativeProject/entry/src/main/ets/pages/Index.ets
@@ -20,7 +20,8 @@ import {
 import { createRNPackages } from '../RNPackagesFactory';
 
 @Builder
-export function buildCustomRNComponent(ctx: ComponentBuilderContext) {};
+export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
+};
 
 const wrappedCustomRNComponentBuilder = wrapBuilder(buildCustomRNComponent);
 
diff --git a/docs/Samples/Capture_bundle/NativeProject/hvigorfile.ts b/docs/Samples/Capture_bundle/NativeProject/hvigorfile.ts
index 549b0badab9ef99722e947c60855c7dd266ae506..15864d709a604c7a9db90b9afec84fc9f1ee044e 100644
--- a/docs/Samples/Capture_bundle/NativeProject/hvigorfile.ts
+++ b/docs/Samples/Capture_bundle/NativeProject/hvigorfile.ts
@@ -8,6 +8,11 @@
 import { appTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
+<<<<<<< HEAD
+  system: appTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
+=======
     system: appTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+    plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
+>>>>>>> 589ae80f (Format the code format of the Sample project)
 }
diff --git a/docs/Samples/Capture_bundle/ReactProject/App.tsx b/docs/Samples/Capture_bundle/ReactProject/App.tsx
index 1c91d6b69ca07dcc8a14953dc6fc2e1d6951183e..3024526b3a082e2e433bdfc5097734a753bb6d6d 100644
--- a/docs/Samples/Capture_bundle/ReactProject/App.tsx
+++ b/docs/Samples/Capture_bundle/ReactProject/App.tsx
@@ -5,94 +5,94 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React ,{useState} from 'react';
-import {View,Text,Button,Alert,StyleSheet} from 'react-native'
+import React, { useState } from 'react';
+import { View, Text, Button, Alert, StyleSheet } from 'react-native'
 
-const App:React.FC = () => {
-  const[errorMessage,setErrorMessage] = useState('');
+const App: React.FC = () => {
+  const [errorMessage, setErrorMessage] = useState('');
 
-  const handleReferenceError = () =>{
-    try{
+  const handleReferenceError = () => {
+    try {
       const erro = new ReferenceError('Some error happened');
       throw error;
-    }catch(e){
-      console.error('Caught an error:',e);
+    } catch (e) {
+      console.error('Caught an error:', e);
 
       setErrorMessage(e.message);
     }
   };
 
-  const handleStandardError = () =>{
-    try{
+  const handleStandardError = () => {
+    try {
       const error = new Error('Some error happened');
       throw error;
-    }catch(e){
-      console.error('Caught an error:',e);
+    } catch (e) {
+      console.error('Caught an error:', e);
 
       setErrorMessage(e.message);
     }
   };
 
-  const handleFrozenError = () =>{
-    try{
+  const handleFrozenError = () => {
+    try {
       const error = Object.freeze(new Error('Some error happened'));
       throw error;
-    }catch(e){
-      console.error('Caught an error:',e);
+    } catch (e) {
+      console.error('Caught an error:', e);
 
       setErrorMessage(e.message);
     }
   };
 
-  const handleWarningError = () =>{
-    try{
-      const warning = new  Error('This is a warning message') as any;
+  const handleWarningError = () => {
+    try {
+      const warning = new Error('This is a warning message') as any;
       warning.type = 'warn';
       throw warning;
-    }catch(e){
-      Alert.alert('Warning',e.message);
-      setErrorMessage('Warning displayed:'+e.message);
+    } catch (e) {
+      Alert.alert('Warning', e.message);
+      setErrorMessage('Warning displayed:' + e.message);
     }
   };
 
-  return(
+  return (
     <View style={styles.container}>
-    <Text style={styles.title}>Press a Button to trigger an error or warning:</Text>
-    <View style = {styles.buttonContainer}>
-    <Button title = "ReferenceError" onPress={handleReferenceError}/>
-    <Button title="Standard Error" onPress={handleStandardError}/>
-    <Button title="Frozen Error" onPress={handleFrozenError}/>
-    <Button title="Warning" onPress={handleWarningError}/>
-    </View>
-    {
-      errorMessage && <Text style={styles.errorMessage}>{errorMessage}</Text>
-    }
+      <Text style={styles.title}>Press a Button to trigger an error or warning:</Text>
+      <View style={styles.buttonContainer}>
+        <Button title="ReferenceError" onPress={handleReferenceError} />
+        <Button title="Standard Error" onPress={handleStandardError} />
+        <Button title="Frozen Error" onPress={handleFrozenError} />
+        <Button title="Warning" onPress={handleWarningError} />
+      </View>
+      {
+        errorMessage && <Text style={styles.errorMessage}>{errorMessage}</Text>
+      }
     </View>
   );
 
 };
 
-const styles = 
-StyleSheet.create({
-    container:{
-      flex:1,
-      justifyContent:'center',
-      alignItems:'center',
-      padding:20,
+const styles =
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: 20,
     },
-    title:{
-      fontSize:18,
-      marginBottom:20,
+    title: {
+      fontSize: 18,
+      marginBottom: 20,
     },
-    buttonContainer:{
-      width:'80%',
-      justifyContent:'space-around',
-      flexDirection:'row',
-      flexWrap:'wrap',
+    buttonContainer: {
+      width: '80%',
+      justifyContent: 'space-around',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
     },
-    errorMessage:{
-      color:'red',
-      marginTop:20,
+    errorMessage: {
+      color: 'red',
+      marginTop: 20,
     },
   });
 
diff --git a/docs/Samples/Capture_bundle/ReactProject/__tests__/App.test.tsx b/docs/Samples/Capture_bundle/ReactProject/__tests__/App.test.tsx
index 3413ac1c403683d540b3c5e46adbd7ad03460123..e8af277008cbcde75b0bc4b1652245643e519f0e 100644
--- a/docs/Samples/Capture_bundle/ReactProject/__tests__/App.test.tsx
+++ b/docs/Samples/Capture_bundle/ReactProject/__tests__/App.test.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import App from '../App';
 
 // Note: import explicitly to use the types shiped with jest.
-import {it} from '@jest/globals';
+import { it } from '@jest/globals';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
diff --git a/docs/Samples/Capture_bundle/ReactProject/index.js b/docs/Samples/Capture_bundle/ReactProject/index.js
index a850d031de79119ee024e9c2fe22809c31417ab3..9b73932914001a9ccd3b23145c0ef4d61e62c150 100644
--- a/docs/Samples/Capture_bundle/ReactProject/index.js
+++ b/docs/Samples/Capture_bundle/ReactProject/index.js
@@ -2,8 +2,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './App';
-import {name as appName} from './app.json';
+import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);
diff --git a/docs/Samples/Capture_bundle/ReactProject/metro.config.js b/docs/Samples/Capture_bundle/ReactProject/metro.config.js
index 1165e3b5032a16a28cc8df18dbf6bbbe8f89355b..431c371dc4e1ba5bdcace49f7259c756b681e4ed 100644
--- a/docs/Samples/Capture_bundle/ReactProject/metro.config.js
+++ b/docs/Samples/Capture_bundle/ReactProject/metro.config.js
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 /**
 * @type {import("metro-config").ConfigT}
diff --git a/docs/Samples/FabricComponentSample/NativeProject/AppScope/app.json5 b/docs/Samples/FabricComponentSample/NativeProject/AppScope/app.json5
index 6db09bf91df6b937ffc4d363d1fdc09600b90bee..4f3e2acaec5863adbba9ee8e20d4c3c6db9e3146 100644
--- a/docs/Samples/FabricComponentSample/NativeProject/AppScope/app.json5
+++ b/docs/Samples/FabricComponentSample/NativeProject/AppScope/app.json5
@@ -1,6 +1,6 @@
 {
   "app": {
-    "bundleName": "com.reactnative.fabric",
+    "bundleName": "com.example.fabric",
     "vendor": "example",
     "versionCode": 1000000,
     "versionName": "1.0.0",
diff --git a/docs/Samples/FabricComponentSample/NativeProject/entry/hvigorfile.ts b/docs/Samples/FabricComponentSample/NativeProject/entry/hvigorfile.ts
index d0f029bd2a2858b1701bf87bf3f67c00d5630c84..6650e7217be2e794b661d45f0d373a35d0026db4 100644
--- a/docs/Samples/FabricComponentSample/NativeProject/entry/hvigorfile.ts
+++ b/docs/Samples/FabricComponentSample/NativeProject/entry/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { hapTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/FabricComponentSample/NativeProject/entry/oh-package.json5 b/docs/Samples/FabricComponentSample/NativeProject/entry/oh-package.json5
index 1a0486b43121ebce6ab98b3d4ac7ae1d572e4576..1a58601155503a2f692b644a2e778d3086184a2c 100644
--- a/docs/Samples/FabricComponentSample/NativeProject/entry/oh-package.json5
+++ b/docs/Samples/FabricComponentSample/NativeProject/entry/oh-package.json5
@@ -7,6 +7,5 @@
   "main": "",
   "version": "1.0.0",
   "dependencies": {
-    "@rnoh/react-native-openharmony": "file:../libs/react_native_openharmony-5.0.0.715.har",
   }
 }
diff --git a/docs/Samples/FabricComponentSample/NativeProject/entry/src/main/ets/RNComponent/SelectBox.ets b/docs/Samples/FabricComponentSample/NativeProject/entry/src/main/ets/RNComponent/SelectBox.ets
index caa553edf65bec11e9a6cbca8f1502d451b09997..e7d3f3caefdf7475d035d1c55320a1117da6f6cd 100644
--- a/docs/Samples/FabricComponentSample/NativeProject/entry/src/main/ets/RNComponent/SelectBox.ets
+++ b/docs/Samples/FabricComponentSample/NativeProject/entry/src/main/ets/RNComponent/SelectBox.ets
@@ -44,14 +44,15 @@ export struct SelectBox {
         this.onDescriptorWrapperChange(new RNC.SelectBox.DescriptorWrapper(descriptor))
       }
     ))
-    this.cleanUpCallbacks.push(new RNC.SelectBox.CommandReceiver(this.ctx.componentCommandReceiver, this.tag).subscribe("emitNativeEvent", (argv) => {
+    this.cleanUpCallbacks.push(new RNC.SelectBox.CommandReceiver(this.ctx.componentCommandReceiver,
+      this.tag).subscribe("emitNativeEvent", (argv) => {
       console.log(`收到 RN 传来的消息 ================ ${JSON.stringify(argv)}`);
       this.mutil = argv[0] || false
     }))
   }
 
   private onDescriptorWrapperChange(descriptorWrapper: RNC.SelectBox.DescriptorWrapper) {
-    this.descriptorWrapper =  descriptorWrapper
+    this.descriptorWrapper = descriptorWrapper
     this.data = []
     const data = this.descriptorWrapper.props.data;
     const value = this.descriptorWrapper.props.value;
diff --git a/docs/Samples/FabricComponentSample/NativeProject/entry/src/main/ets/pages/Index.ets b/docs/Samples/FabricComponentSample/NativeProject/entry/src/main/ets/pages/Index.ets
index 571b61345a7be8b386f80c5e90c7431534974071..6689c0bd68adba812b7f741478e8d0e6b5f12536 100644
--- a/docs/Samples/FabricComponentSample/NativeProject/entry/src/main/ets/pages/Index.ets
+++ b/docs/Samples/FabricComponentSample/NativeProject/entry/src/main/ets/pages/Index.ets
@@ -18,12 +18,13 @@ import {
   RNOHCoreContext
 } from '@rnoh/react-native-openharmony';
 import { createRNPackages } from '../RNPackagesFactory';
-import { SelectBox } from "../rnc/SelectBox"
+import { SelectBox } from "../RNComponent/SelectBox"
 
 const arkTsComponentNames: Array<string> = [SelectBox.NAME];
+
 @Builder
 export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
-  Stack(){
+  Stack() {
     if (ctx.componentName === SelectBox.NAME) {
       SelectBox({
         ctx: ctx.rnComponentContext,
@@ -31,8 +32,7 @@ export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
       })
     }
   }
-  .position({x:0, y: 0})
-
+  .position({ x: 0, y: 0 })
 }
 
 const wrappedCustomRNComponentBuilder = wrapBuilder(buildCustomRNComponent)
@@ -44,7 +44,6 @@ struct Index {
   @State shouldShow: boolean = false
   private logger!: RNOHLogger
 
-
   aboutToAppear() {
     this.logger = this.rnohCoreContext!.logger.clone("Index")
     const stopTracing = this.logger.clone("aboutToAppear").startTracing()
diff --git a/docs/Samples/FabricComponentSample/NativeProject/hvigorfile.ts b/docs/Samples/FabricComponentSample/NativeProject/hvigorfile.ts
index 549b0badab9ef99722e947c60855c7dd266ae506..15864d709a604c7a9db90b9afec84fc9f1ee044e 100644
--- a/docs/Samples/FabricComponentSample/NativeProject/hvigorfile.ts
+++ b/docs/Samples/FabricComponentSample/NativeProject/hvigorfile.ts
@@ -8,6 +8,11 @@
 import { appTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
+<<<<<<< HEAD
+  system: appTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
+=======
     system: appTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+    plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
+>>>>>>> 589ae80f (Format the code format of the Sample project)
 }
diff --git a/docs/Samples/FabricComponentSample/NativeProject/oh-package.json5 b/docs/Samples/FabricComponentSample/NativeProject/oh-package.json5
index d8ef48eb3cdd3f7e30867a0fcb6f9205289e7631..18a7f2a5cc91248eb7dfd8dd286be59ad2bda0a1 100644
--- a/docs/Samples/FabricComponentSample/NativeProject/oh-package.json5
+++ b/docs/Samples/FabricComponentSample/NativeProject/oh-package.json5
@@ -13,6 +13,5 @@
     "@ohos/hamock": "1.0.0"
   },
   "overrides": {
-     "@rnoh/react-native-openharmony": "file:./libs/react_native_openharmony-5.0.0.715.har",
   }
 }
\ No newline at end of file
diff --git a/docs/Samples/FabricComponentSample/README_zh.md b/docs/Samples/FabricComponentSample/README_zh.md
index 0c6abf77ffb4ae269088438dd402af53d4925d6e..9fed862380a44365b7cf7a385a0c01918325a8c1 100644
--- a/docs/Samples/FabricComponentSample/README_zh.md
+++ b/docs/Samples/FabricComponentSample/README_zh.md
@@ -16,12 +16,10 @@ FabricComponentSample
 
 
 # 环境搭建
-1. 将 `rnoh-react-native-harmony-xx.tgz` 放到 `react-native-harmony` 文件夹下，然后修改 `ReactProject/package.json` 的 `react-native-harmony` 依赖路径；
-2. 将 `rnoh-react-native-harmony-cli-xx.tgz` 放到 `react-native-harmony-cli` 文件夹下；
-3. 在 `fabric-component-sample-package` 中运行 **npm pack** 生成tgz文件；
-4. 将 `react_native_openharmony-xxx.har` 放到 `NativeProject/libs` 文件夹下，并修改 `NativeProject/oh-package.json5` 和 `NativeProject/entry/oh-package.json5` 的依赖路径；
-5. 用 DevEco Studio 打开 `NativeProject`，执行 **Sync and Refresh Project**；
-6. 在 `ReactProject` 中运行 **npm i** 安装依赖，运行 **npm run dev** 生成bundle文件，运行 **npm start** 启动metro服务；
-7. 回到 DevEco Studio，点击右上角的 **run** 启动项目；
-8. 如果启动的是metro服务，还需要运行 `hdc rport tcp:8081 tcp:8081` 来转发8081端口，然后再在手机上重新打开应用。
+1. 在 `fabric-component-sample-package` 中运行 **npm pack** 生成tgz文件；
+2. 在 `ReactProject` 目录下执行 **npm i @react-native-oh/react-native-harmony@x.x.x**或**yarn add @react-native-oh/react-native-harmony@x.x.x** 安装依赖，执行 **npm run dev** 生成 bundle；
+3. 在 `entry` 目录下执行 **ohpm i @rnoh/react-native-openharmony@x.x.x** 安装依赖；
+4. 检查 `NativeProject`、`entry` 目录下是否生成 `oh-modules` 文件夹；
+5. 用 DevEco Studio 打开 SampleApp，执行 **Sync and Refresh Project**；
+6. 如果启动的是metro服务，还需要运行 `hdc rport tcp:8081 tcp:8081` 来转发8081端口，然后再在手机上重新打开应用。
 
diff --git a/docs/Samples/FabricComponentSample/ReactProject/App.tsx b/docs/Samples/FabricComponentSample/ReactProject/App.tsx
index a7acd9174dccf2533d97bc18980526a40bb2c4c1..d131241c67ad699bebf28f9f0c36b5b13e9279b6 100644
--- a/docs/Samples/FabricComponentSample/ReactProject/App.tsx
+++ b/docs/Samples/FabricComponentSample/ReactProject/App.tsx
@@ -52,12 +52,12 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   title: {
-   backgroundColor: 'green',
-   color: 'white',
-   fontSize: 20,
-   padding: 8,
-   textAlign: 'center'
+    backgroundColor: 'green',
+    color: 'white',
+    fontSize: 20,
+    padding: 8,
+    textAlign: 'center'
   }
- });
+});
 
 export default App;
diff --git a/docs/Samples/FabricComponentSample/ReactProject/index.js b/docs/Samples/FabricComponentSample/ReactProject/index.js
index 861cbec71fa35737cc4701c115811e08c3cde448..21b5e067081c80e903a6e73781601caaf7d5e8aa 100644
--- a/docs/Samples/FabricComponentSample/ReactProject/index.js
+++ b/docs/Samples/FabricComponentSample/ReactProject/index.js
@@ -7,8 +7,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import {name as appName} from './app.json';
+import { AppRegistry } from 'react-native';
+import { name as appName } from './app.json';
 import App from './App';
 
 AppRegistry.registerComponent(appName, () => App);
diff --git a/docs/Samples/FabricComponentSample/ReactProject/metro.config.js b/docs/Samples/FabricComponentSample/ReactProject/metro.config.js
index 168a07e7a2fe1f0c19dae172c78e5d3f2d738c01..390abb520a0db2471bf8c7c557135dcce89548ac 100644
--- a/docs/Samples/FabricComponentSample/ReactProject/metro.config.js
+++ b/docs/Samples/FabricComponentSample/ReactProject/metro.config.js
@@ -5,25 +5,25 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 /**
  * @type {import("metro-config").ConfigT}
  */
 const config = {
-  // 清理metro缓存
-  // resetCache: true,
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
+    // 清理metro缓存
+    // resetCache: true,
+    transformer: {
+        getTransformOptions: async () => ({
+            transform: {
+                experimentalImportSupport: false,
+                inlineRequires: true,
+            },
+        }),
+    },
 };
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
-  reactNativeHarmonyPackageName: 'react-native-harmony',
+    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
 }), config);
diff --git a/docs/Samples/FabricComponentSample/ReactProject/package.json b/docs/Samples/FabricComponentSample/ReactProject/package.json
index a372ff19ec77224a71bb617353dc3a31c4fbb866..3f727af9ae8aa5783c60d47dd6fd8a4dbee69300 100644
--- a/docs/Samples/FabricComponentSample/ReactProject/package.json
+++ b/docs/Samples/FabricComponentSample/ReactProject/package.json
@@ -11,7 +11,6 @@
   "dependencies": {
     "react": "18.2.0",
     "react-native": "0.72.5",
-    "react-native-harmony": "file:../react-native-harmony/rnoh-react-native-harmony-0.72.56.tgz",
     "react-native-performance": "^5.1.2",
     "fabric-component-sample-package": "file:../fabric-component-sample-package/fabric-component-sample-package-1.0.0.tgz"
   },
diff --git a/docs/Samples/FabricComponentSample/ReactProject/src/SelectBoxApp.tsx b/docs/Samples/FabricComponentSample/ReactProject/src/SelectBoxApp.tsx
index cd4d830be6f26f0b2bd8c360359a03e99e240ea0..f3a7891055e5e415c4c4a19bd7779164c1c52815 100644
--- a/docs/Samples/FabricComponentSample/ReactProject/src/SelectBoxApp.tsx
+++ b/docs/Samples/FabricComponentSample/ReactProject/src/SelectBoxApp.tsx
@@ -5,7 +5,6 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-
 import React, { useRef, useState } from 'react';
 import {
   Text,
@@ -50,7 +49,7 @@ const App = () => {
           setMutil(!mutil)
         }
       }}>
-        <Text style={styles.title}>{`现在是${ mutil ? '多选' : '单选' }`}</Text>
+        <Text style={styles.title}>{`现在是${mutil ? '多选' : '单选'}`}</Text>
       </Pressable>
       <SelectBox
         ref={boxRef}
@@ -64,23 +63,23 @@ const App = () => {
           console.log(event.nativeEvent)
         }}
       />
-  </View>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
- container: {
-   backgroundColor: 'white',
-   height: 250,
-   justifyContent: 'center',
- },
- title: {
-  backgroundColor: 'green',
-  color: 'white',
-  fontSize: 20,
-  padding: 8,
-  textAlign: 'center'
- }
+  container: {
+    backgroundColor: 'white',
+    height: 250,
+    justifyContent: 'center',
+  },
+  title: {
+    backgroundColor: 'green',
+    color: 'white',
+    fontSize: 20,
+    padding: 8,
+    textAlign: 'center'
+  }
 });
 
 export default App;
diff --git a/docs/Samples/FabricComponentSample/react-native-harmony-cli/.gitkeep b/docs/Samples/FabricComponentSample/react-native-harmony-cli/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/docs/Samples/FabricComponentSample/react-native-harmony/.gitkeep b/docs/Samples/FabricComponentSample/react-native-harmony/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/AppScope/app.json5 b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/AppScope/app.json5
index d3f1ec1ad833a8a2deb82f91863e50f85c4df34c..73ebe75ada6bd6172cd63dbfee2492c7aae6fbd3 100644
--- a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/AppScope/app.json5
+++ b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/AppScope/app.json5
@@ -1,6 +1,6 @@
 {
   "app": {
-    "bundleName": "com.example.myapp",
+    "bundleName": "com.example.framenode",
     "vendor": "example",
     "versionCode": 1000000,
     "versionName": "1.0.0",
diff --git a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/hvigorfile.ts b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/hvigorfile.ts
index 4a1a975c3b7491258f5ff7278660b08d260ee8d3..e570e90e8decfddb61acdbaf0c9e6b983edddb23 100644
--- a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/hvigorfile.ts
+++ b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { hapTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/entryability/EntryAbility.ets b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/entryability/EntryAbility.ets
index 8cace666602a8663341af112f7e2eebea2b6851b..48f7b51ebfbfa3d6fc2dd5fbebf69763c00e31c5 100644
--- a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/entryability/EntryAbility.ets
@@ -7,9 +7,7 @@
 
 import dataPreferences from '@ohos.data.preferences';
 import window from '@ohos.window';
-import {
-  RNAbility,
-} from '@rnoh/react-native-openharmony';
+import { RNAbility, } from '@rnoh/react-native-openharmony';
 
 export let preferences: dataPreferences.Preferences | null = null;
 
@@ -21,9 +19,11 @@ export default class EntryAbility extends RNAbility {
   onWindowStageCreate(windowStage: window.WindowStage) {
     super.onWindowStageCreate(windowStage);
     try {
-      let options: dataPreferences.Options = { name: 'test'};
+      let options: dataPreferences.Options = {
+        name: 'test'
+      };
       preferences = dataPreferences.getPreferencesSync(this.context, options);
-    } catch(err) {
+    } catch (err) {
       console.error('Failed to get preferences');
     }
   }
diff --git a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/pages/RNPage.ets b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/pages/RNPage.ets
index 92f254402f0da61bd0fe89ee5f10a5c8dd9fb163..9d3d329934ce3c87303f3d06d8429bc8e4a16394 100644
--- a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/pages/RNPage.ets
+++ b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/pages/RNPage.ets
@@ -8,10 +8,8 @@
 import { RNOHCoreContext, ComponentBuilderContext, } from '@rnoh/react-native-openharmony';
 import { NodeController, FrameNode, BuilderNode, Size } from '@ohos.arkui.node';
 import { LoadManager } from '../rn';
-
 import { promptAction } from '@kit.ArkUI';
 import FrameNodeRNPage from './FrameNodeRNPage';
-
 import { Params, BuilderData } from './BuilderType';
 import { getRNController } from './common';
 
diff --git a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/pages/common.ets b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/pages/common.ets
index 1a23db5781b8fff237bf646b22a3c990d4a3e576..2df69eb9f55f9bc0649709d790c62194b6ea307e 100644
--- a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/pages/common.ets
+++ b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/pages/common.ets
@@ -29,7 +29,6 @@ function myRNPageBuilder(params: Params) {
       FrameNodeRNPage(params)
         .width('100%')
         .height('30%')
-
     }
   }
 }
diff --git a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/rn/BaseRN.ets b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/rn/BaseRN.ets
index 239aaae7012ff5549fb898114e1a7bef05d8a420..6ac51e2972c1858ccb3e411af743cc5a4f17d965 100644
--- a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/rn/BaseRN.ets
+++ b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/rn/BaseRN.ets
@@ -42,7 +42,7 @@ export struct BaseRN {
         RNSurface({
           surfaceConfig: {
             appKey: this.moduleName,
-            initialProps:  { "propA": "good" } as Record<string, string>,
+            initialProps: { "propA": "good" } as Record<string, string>,
           } as SurfaceConfig2,
           ctx: new RNComponentContext(
             RNOHContext.fromCoreContext(this.rnohCoreContext!, this.rnInstance),
diff --git a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/rn/LoadBundle.ets b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/rn/LoadBundle.ets
index d8561a8cf8b20f705df3e929d67d0ddd510d5671..b24893469ea04e07c39f4939759b9ce26204caaf 100644
--- a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/rn/LoadBundle.ets
+++ b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/rn/LoadBundle.ets
@@ -16,34 +16,30 @@ import {
   buildRNComponentForTag,
 } from '@rnoh/react-native-openharmony';
 import { createRNPackages } from './RNPackagesFactory'
-
 import { ENABLE_CAPI_ARCHITECTURE } from './config';
 
 export const arkTsComponentNames = [];
 
-@Builder export function buildCustomComponent(ctx: ComponentBuilderContext) {
-  Stack(){
+@Builder
+export function buildCustomComponent(ctx: ComponentBuilderContext) {
+  Stack() {
   }
-  .position({x:0, y:0})
+  .position({ x: 0, y: 0 })
 }
 
 export class LoadManager {
-
   private static loadedBundle: Set<string> = new Set();
   public static metroInstance: RNInstance;
   public static cpInstance: RNInstance;
   public static bpInstance: RNInstance;
-
   private static shouldResetMetroInstance: Boolean = true;
   static ctx: RNComponentContext;
 
   public static loadBundle(instance: RNInstance, bundlePath: string, useBundleCache: boolean = true): Promise<void> {
-    if (LoadManager.loadedBundle.has(bundlePath) && useBundleCache)
-    {
+    if (LoadManager.loadedBundle.has(bundlePath) && useBundleCache) {
       return Promise.resolve();
-    } 
-    if (useBundleCache)
-    {
+    }
+    if (useBundleCache) {
       LoadManager.loadedBundle.add(bundlePath);
     }
     return instance.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager, bundlePath));
@@ -70,7 +66,8 @@ export class LoadManager {
       const provider = new MetroJSBundleProvider();
       await LoadManager.metroInstance.runJSBundle(provider);
 
-      const jsBundleExecutionStatus: string = LoadManager.metroInstance.getBundleExecutionStatus(provider.getURL()) as string;
+      const jsBundleExecutionStatus: string =
+        LoadManager.metroInstance.getBundleExecutionStatus(provider.getURL()) as string;
       LoadManager.shouldResetMetroInstance = false;
       if (jsBundleExecutionStatus === "DONE") {
         return true
diff --git a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/rn/index.ets b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/rn/index.ets
index 0a6fd7e82baea47cb1031215ac2c9fc249b504ea..7c1d80bc55beb834f6dec339be7ade536aa59ad7 100644
--- a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/rn/index.ets
+++ b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/entry/src/main/ets/rn/index.ets
@@ -6,6 +6,9 @@
  */
 
 export { BaseRN } from './BaseRN';
+
 export { createRNPackages } from './RNPackagesFactory';
+
 export { LoadManager, buildCustomComponent } from './LoadBundle';
+
 export * from './config';
\ No newline at end of file
diff --git a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/hvigorfile.ts b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/hvigorfile.ts
index 035eea0cc548c925a1d81920e8e809fe57d6a4db..44bbe01097a3d4970037b397435c451f6d260669 100644
--- a/docs/Samples/FrameNodeSample/FrameNodeSampleApp/hvigorfile.ts
+++ b/docs/Samples/FrameNodeSample/FrameNodeSampleApp/hvigorfile.ts
@@ -8,6 +8,11 @@
 import { appTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
+<<<<<<< HEAD
+  system: appTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
+=======
     system: appTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+    plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
+>>>>>>> 589ae80f (Format the code format of the Sample project)
 }
diff --git a/docs/Samples/FrameNodeSample/GenerateBundle/__tests__/App.test.tsx b/docs/Samples/FrameNodeSample/GenerateBundle/__tests__/App.test.tsx
index 5375d53c1a290981e85ba01a4298a7f408327290..515a9d4b5b89a34738b83daf73eb36c89e9a6e89 100644
--- a/docs/Samples/FrameNodeSample/GenerateBundle/__tests__/App.test.tsx
+++ b/docs/Samples/FrameNodeSample/GenerateBundle/__tests__/App.test.tsx
@@ -12,7 +12,7 @@ import React from 'react';
 import App from '../App';
 
 // Note: import explicitly to use the types shiped with jest.
-import {it} from '@jest/globals';
+import { it } from '@jest/globals';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
diff --git a/docs/Samples/FrameNodeSample/GenerateBundle/generate.config.js b/docs/Samples/FrameNodeSample/GenerateBundle/generate.config.js
index 3865f8c320a5f92a8e08b3eb2166bc6f714eb524..b385481b99bfc56d2eaba88691385e6b46d2afb4 100644
--- a/docs/Samples/FrameNodeSample/GenerateBundle/generate.config.js
+++ b/docs/Samples/FrameNodeSample/GenerateBundle/generate.config.js
@@ -5,24 +5,24 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 const config = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
+    transformer: {
+        getTransformOptions: async () => ({
+            transform: {
+                experimentalImportSupport: false,
+                inlineRequires: true,
+            },
+        }),
+    },
 };
 
 module.exports = mergeConfig(
-  getDefaultConfig(__dirname),
-  createHarmonyMetroConfig({
-    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
-  }),
-  config,
+    getDefaultConfig(__dirname),
+    createHarmonyMetroConfig({
+        reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
+    }),
+    config,
 );
diff --git a/docs/Samples/FrameNodeSample/GenerateBundle/index.js b/docs/Samples/FrameNodeSample/GenerateBundle/index.js
index f5c0aa7a265623069f6e717e61bb72f99b7d8d51..5251caf86e76bf49a8537cad1da0b0a77b84bb1e 100644
--- a/docs/Samples/FrameNodeSample/GenerateBundle/index.js
+++ b/docs/Samples/FrameNodeSample/GenerateBundle/index.js
@@ -7,8 +7,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './App';
-import {name as appName} from './app.json';
+import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);
diff --git a/docs/Samples/FrameNodeSample/GenerateBundle/metro.config.js b/docs/Samples/FrameNodeSample/GenerateBundle/metro.config.js
index 4655411918e1984e3af1b0a47eab7b2e5cea3fa9..2616e02bece85bd298efe7eb207bf4fee222567f 100644
--- a/docs/Samples/FrameNodeSample/GenerateBundle/metro.config.js
+++ b/docs/Samples/FrameNodeSample/GenerateBundle/metro.config.js
@@ -5,20 +5,20 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 /**
-* @type {import("metro-config").ConfigT}
-*/
+ * @type {import("metro-config").ConfigT}
+ */
 const config = {
     transformer: {
-    getTransformOptions: async () => ({
-        transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-        },
-    }),
+        getTransformOptions: async () => ({
+            transform: {
+                experimentalImportSupport: false,
+                inlineRequires: true,
+            },
+        }),
     },
 };
 
diff --git a/docs/Samples/MutilBundleSample/FlightRN/App.tsx b/docs/Samples/MutilBundleSample/FlightRN/App.tsx
index 421a894db00f5377b9da68886a903c2d43cf5a7e..60ba819e5b9d18f462b787f441d1a06db03b8fb8 100644
--- a/docs/Samples/MutilBundleSample/FlightRN/App.tsx
+++ b/docs/Samples/MutilBundleSample/FlightRN/App.tsx
@@ -11,8 +11,8 @@ import { Text, View } from 'react-native';
 
 const App = () => {
   return (
-    <View style={{flex: 1, backgroundColor: 'green', alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 20, color: 'white'}}>Here is the flight ticket page.</Text>
+    <View style={{ flex: 1, backgroundColor: 'green', alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 20, color: 'white' }}>Here is the flight ticket page.</Text>
     </View>
   );
 };
diff --git a/docs/Samples/MutilBundleSample/FlightRN/build/moduleId.js b/docs/Samples/MutilBundleSample/FlightRN/build/moduleId.js
index 3e2965b1559265874c06ceac1bb07158d4c85e61..0ccf64cb7dcdc4dccf4c79e51f65d35267afe6df 100644
--- a/docs/Samples/MutilBundleSample/FlightRN/build/moduleId.js
+++ b/docs/Samples/MutilBundleSample/FlightRN/build/moduleId.js
@@ -12,37 +12,39 @@ const basicModuleIds = require('./map/basicModuleIds.json');
 const businessModuleIds = require('./map/businessModuleIds.json');
 
 function getModuleId(projectRootPath, modulePath, bundleName) {
-  const pathRelative = modulePath.substr(projectRootPath.length + 1);
-  const moduleIds = bundleName === 'basic' ? basicModuleIds : businessModuleIds;
-  const moduleId = MD5(pathRelative).toString();
-  moduleIds[pathRelative] = moduleId;
-  fs.writeFileSync(path.resolve(__dirname, `./map/${bundleName === 'basic' ? 'basicModuleIds' : 'businessModuleIds'}.json`), JSON.stringify(moduleIds));
-  return moduleId;
+    const pathRelative = modulePath.substr(projectRootPath.length + 1);
+    const moduleIds = bundleName === 'basic' ? basicModuleIds : businessModuleIds;
+    const moduleId = MD5(pathRelative).toString();
+    moduleIds[pathRelative] = moduleId;
+    fs.writeFileSync(path.resolve(__dirname,
+        `./map/${bundleName === 'basic' ? 'basicModuleIds' : 'businessModuleIds'}.json`), JSON.stringify(moduleIds));
+    return moduleId;
 }
 
 function createModuleIdFactoryWrap(projectRootPath, bundleName) {
-  return () => {
-    return (path) => {
-      const pathRelative = path.substr(projectRootPath.length + 1);
-      const moduleId = basicModuleIds[pathRelative] || businessModuleIds[pathRelative] || getModuleId(projectRootPath, path, bundleName);
-      return moduleId;
+    return () => {
+        return (path) => {
+            const pathRelative = path.substr(projectRootPath.length + 1);
+            const moduleId = basicModuleIds[pathRelative] || businessModuleIds[pathRelative] ||
+                getModuleId(projectRootPath, path, bundleName);
+            return moduleId;
+        };
     };
-  };
 }
 
 function postProcessModulesFilterWrap(projectRootPath) {
-  // 返回false则不打入bundle中
-  return (module) => {
-    const modulePath = module.path;
-    const pathRelative = modulePath.substr(projectRootPath.length + 1);
-    const moduleId = basicModuleIds[pathRelative];
-    if (pathRelative.indexOf('__prelude__') >= 0 ||
-        pathRelative.indexOf(`node_modules${path.sep}@react-native${path.sep}polyfills`) >= 0 ||
-        pathRelative.indexOf(`node_modules${path.sep}metro-runtime${path.sep}src${path.sep}polyfills`) >= 0) {
-      return false;
-    }
-    return !moduleId
-  };
+    // 返回false则不打入bundle中
+    return (module) => {
+        const modulePath = module.path;
+        const pathRelative = modulePath.substr(projectRootPath.length + 1);
+        const moduleId = basicModuleIds[pathRelative];
+        if (pathRelative.indexOf('__prelude__') >= 0 ||
+            pathRelative.indexOf(`node_modules${path.sep}@react-native${path.sep}polyfills`) >= 0 ||
+            pathRelative.indexOf(`node_modules${path.sep}metro-runtime${path.sep}src${path.sep}polyfills`) >= 0) {
+            return false;
+        }
+        return !moduleId
+    };
 }
 
 module.exports = { createModuleIdFactoryWrap, postProcessModulesFilterWrap };
diff --git a/docs/Samples/MutilBundleSample/FlightRN/bundles/flight.js b/docs/Samples/MutilBundleSample/FlightRN/bundles/flight.js
index 4922b773d8a626703eeb487030442e196c973888..e6fbd6352fe85c083291a299c32c4aa4776b95ea 100644
--- a/docs/Samples/MutilBundleSample/FlightRN/bundles/flight.js
+++ b/docs/Samples/MutilBundleSample/FlightRN/bundles/flight.js
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from '../App';
 
 AppRegistry.registerComponent('flight', () => App);
diff --git a/docs/Samples/MutilBundleSample/FlightRN/index.js b/docs/Samples/MutilBundleSample/FlightRN/index.js
index da3dc36015d21c94fcc303fddfe29b51c8f865ca..3eacc087d81fec0ee05c23209ee314c519c320b8 100644
--- a/docs/Samples/MutilBundleSample/FlightRN/index.js
+++ b/docs/Samples/MutilBundleSample/FlightRN/index.js
@@ -6,8 +6,8 @@
  *
  * @format
  */
-import {AppRegistry} from 'react-native';
-import {name as appName} from './app.json';
+import { AppRegistry } from 'react-native';
+import { name as appName } from './app.json';
 import App from './App';
 
 AppRegistry.registerComponent(appName, () => App);
diff --git a/docs/Samples/MutilBundleSample/FlightRN/metro.config.js b/docs/Samples/MutilBundleSample/FlightRN/metro.config.js
index 90f1f0d3ab9d606b51fc49ea5259fd4a1e6e0654..390abb520a0db2471bf8c7c557135dcce89548ac 100644
--- a/docs/Samples/MutilBundleSample/FlightRN/metro.config.js
+++ b/docs/Samples/MutilBundleSample/FlightRN/metro.config.js
@@ -5,25 +5,25 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 /**
  * @type {import("metro-config").ConfigT}
  */
 const config = {
-  // 清理metro缓存
-  // resetCache: true,
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
+    // 清理metro缓存
+    // resetCache: true,
+    transformer: {
+        getTransformOptions: async () => ({
+            transform: {
+                experimentalImportSupport: false,
+                inlineRequires: true,
+            },
+        }),
+    },
 };
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
-  reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
+    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
 }), config);
diff --git a/docs/Samples/MutilBundleSample/HotelRN/App.tsx b/docs/Samples/MutilBundleSample/HotelRN/App.tsx
index eb7693f6741565de8432e653d4c2dde295c6666e..7f281c9534e428ae0acc0f46c346bf35b69d4ae5 100644
--- a/docs/Samples/MutilBundleSample/HotelRN/App.tsx
+++ b/docs/Samples/MutilBundleSample/HotelRN/App.tsx
@@ -11,8 +11,8 @@ import { Text, View } from 'react-native';
 
 const App = () => {
   return (
-    <View style={{flex: 1, backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 20, color: 'red'}}>Here is the hotel page.</Text>
+    <View style={{ flex: 1, backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 20, color: 'red' }}>Here is the hotel page.</Text>
     </View>
   );
 };
diff --git a/docs/Samples/MutilBundleSample/HotelRN/build/moduleId.js b/docs/Samples/MutilBundleSample/HotelRN/build/moduleId.js
index 3e2965b1559265874c06ceac1bb07158d4c85e61..0ccf64cb7dcdc4dccf4c79e51f65d35267afe6df 100644
--- a/docs/Samples/MutilBundleSample/HotelRN/build/moduleId.js
+++ b/docs/Samples/MutilBundleSample/HotelRN/build/moduleId.js
@@ -12,37 +12,39 @@ const basicModuleIds = require('./map/basicModuleIds.json');
 const businessModuleIds = require('./map/businessModuleIds.json');
 
 function getModuleId(projectRootPath, modulePath, bundleName) {
-  const pathRelative = modulePath.substr(projectRootPath.length + 1);
-  const moduleIds = bundleName === 'basic' ? basicModuleIds : businessModuleIds;
-  const moduleId = MD5(pathRelative).toString();
-  moduleIds[pathRelative] = moduleId;
-  fs.writeFileSync(path.resolve(__dirname, `./map/${bundleName === 'basic' ? 'basicModuleIds' : 'businessModuleIds'}.json`), JSON.stringify(moduleIds));
-  return moduleId;
+    const pathRelative = modulePath.substr(projectRootPath.length + 1);
+    const moduleIds = bundleName === 'basic' ? basicModuleIds : businessModuleIds;
+    const moduleId = MD5(pathRelative).toString();
+    moduleIds[pathRelative] = moduleId;
+    fs.writeFileSync(path.resolve(__dirname,
+        `./map/${bundleName === 'basic' ? 'basicModuleIds' : 'businessModuleIds'}.json`), JSON.stringify(moduleIds));
+    return moduleId;
 }
 
 function createModuleIdFactoryWrap(projectRootPath, bundleName) {
-  return () => {
-    return (path) => {
-      const pathRelative = path.substr(projectRootPath.length + 1);
-      const moduleId = basicModuleIds[pathRelative] || businessModuleIds[pathRelative] || getModuleId(projectRootPath, path, bundleName);
-      return moduleId;
+    return () => {
+        return (path) => {
+            const pathRelative = path.substr(projectRootPath.length + 1);
+            const moduleId = basicModuleIds[pathRelative] || businessModuleIds[pathRelative] ||
+                getModuleId(projectRootPath, path, bundleName);
+            return moduleId;
+        };
     };
-  };
 }
 
 function postProcessModulesFilterWrap(projectRootPath) {
-  // 返回false则不打入bundle中
-  return (module) => {
-    const modulePath = module.path;
-    const pathRelative = modulePath.substr(projectRootPath.length + 1);
-    const moduleId = basicModuleIds[pathRelative];
-    if (pathRelative.indexOf('__prelude__') >= 0 ||
-        pathRelative.indexOf(`node_modules${path.sep}@react-native${path.sep}polyfills`) >= 0 ||
-        pathRelative.indexOf(`node_modules${path.sep}metro-runtime${path.sep}src${path.sep}polyfills`) >= 0) {
-      return false;
-    }
-    return !moduleId
-  };
+    // 返回false则不打入bundle中
+    return (module) => {
+        const modulePath = module.path;
+        const pathRelative = modulePath.substr(projectRootPath.length + 1);
+        const moduleId = basicModuleIds[pathRelative];
+        if (pathRelative.indexOf('__prelude__') >= 0 ||
+            pathRelative.indexOf(`node_modules${path.sep}@react-native${path.sep}polyfills`) >= 0 ||
+            pathRelative.indexOf(`node_modules${path.sep}metro-runtime${path.sep}src${path.sep}polyfills`) >= 0) {
+            return false;
+        }
+        return !moduleId
+    };
 }
 
 module.exports = { createModuleIdFactoryWrap, postProcessModulesFilterWrap };
diff --git a/docs/Samples/MutilBundleSample/HotelRN/bundles/hotel.js b/docs/Samples/MutilBundleSample/HotelRN/bundles/hotel.js
index 9fe290b2dea683543563c7c0b46923801ec3c71f..5863744f9c29f5e8a381e246455d5639f68741cb 100644
--- a/docs/Samples/MutilBundleSample/HotelRN/bundles/hotel.js
+++ b/docs/Samples/MutilBundleSample/HotelRN/bundles/hotel.js
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from '../App';
 
 AppRegistry.registerComponent('hotel', () => App);
diff --git a/docs/Samples/MutilBundleSample/HotelRN/index.js b/docs/Samples/MutilBundleSample/HotelRN/index.js
index da3dc36015d21c94fcc303fddfe29b51c8f865ca..3eacc087d81fec0ee05c23209ee314c519c320b8 100644
--- a/docs/Samples/MutilBundleSample/HotelRN/index.js
+++ b/docs/Samples/MutilBundleSample/HotelRN/index.js
@@ -6,8 +6,8 @@
  *
  * @format
  */
-import {AppRegistry} from 'react-native';
-import {name as appName} from './app.json';
+import { AppRegistry } from 'react-native';
+import { name as appName } from './app.json';
 import App from './App';
 
 AppRegistry.registerComponent(appName, () => App);
diff --git a/docs/Samples/MutilBundleSample/HotelRN/metro.config.js b/docs/Samples/MutilBundleSample/HotelRN/metro.config.js
index 90f1f0d3ab9d606b51fc49ea5259fd4a1e6e0654..390abb520a0db2471bf8c7c557135dcce89548ac 100644
--- a/docs/Samples/MutilBundleSample/HotelRN/metro.config.js
+++ b/docs/Samples/MutilBundleSample/HotelRN/metro.config.js
@@ -5,25 +5,25 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 /**
  * @type {import("metro-config").ConfigT}
  */
 const config = {
-  // 清理metro缓存
-  // resetCache: true,
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
+    // 清理metro缓存
+    // resetCache: true,
+    transformer: {
+        getTransformOptions: async () => ({
+            transform: {
+                experimentalImportSupport: false,
+                inlineRequires: true,
+            },
+        }),
+    },
 };
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
-  reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
+    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
 }), config);
diff --git a/docs/Samples/MutilBundleSample/NativeProject/AppScope/app.json5 b/docs/Samples/MutilBundleSample/NativeProject/AppScope/app.json5
index ef104cf6c22d09c462c01bea658dd1f399b4907d..ea39f7fd63d2a963960a6ebcdcf1a583ca206337 100644
--- a/docs/Samples/MutilBundleSample/NativeProject/AppScope/app.json5
+++ b/docs/Samples/MutilBundleSample/NativeProject/AppScope/app.json5
@@ -1,6 +1,6 @@
 {
   "app": {
-    "bundleName": "com.reactnative.mutilbundle",
+    "bundleName": "com.example.mutilbundle",
     "vendor": "example",
     "versionCode": 1000000,
     "versionName": "1.0.0",
diff --git a/docs/Samples/MutilBundleSample/NativeProject/entry/hvigorfile.ts b/docs/Samples/MutilBundleSample/NativeProject/entry/hvigorfile.ts
index d0f029bd2a2858b1701bf87bf3f67c00d5630c84..6650e7217be2e794b661d45f0d373a35d0026db4 100644
--- a/docs/Samples/MutilBundleSample/NativeProject/entry/hvigorfile.ts
+++ b/docs/Samples/MutilBundleSample/NativeProject/entry/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { hapTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/MutilBundleSample/NativeProject/entry/src/main/ets/pages/Index.ets b/docs/Samples/MutilBundleSample/NativeProject/entry/src/main/ets/pages/Index.ets
index ae0f8441b23592afa874919d310d7be897ea22f1..d28ad7575aedf76f4ca14793f3821da5c4de6cf4 100644
--- a/docs/Samples/MutilBundleSample/NativeProject/entry/src/main/ets/pages/Index.ets
+++ b/docs/Samples/MutilBundleSample/NativeProject/entry/src/main/ets/pages/Index.ets
@@ -6,9 +6,7 @@
  */
 
 import router from '@ohos.router';
-import {
-  ResourceJSBundleProvider,
-} from '@rnoh/react-native-openharmony';
+import { ResourceJSBundleProvider, } from '@rnoh/react-native-openharmony';
 import { RNInstanceManager } from "../rn/RNInstanceManager";
 
 @Entry
diff --git a/docs/Samples/MutilBundleSample/NativeProject/entry/src/main/ets/rn/CustomRNComponent.ets b/docs/Samples/MutilBundleSample/NativeProject/entry/src/main/ets/rn/CustomRNComponent.ets
index bca58e804aea44ec0140897470b6dc897799c2ab..5aa2c592dabe799901e7adcd13c2b63338018f42 100644
--- a/docs/Samples/MutilBundleSample/NativeProject/entry/src/main/ets/rn/CustomRNComponent.ets
+++ b/docs/Samples/MutilBundleSample/NativeProject/entry/src/main/ets/rn/CustomRNComponent.ets
@@ -5,14 +5,13 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {
-  ComponentBuilderContext,
-} from '@rnoh/react-native-openharmony';
+import { ComponentBuilderContext, } from '@rnoh/react-native-openharmony';
 
 @Builder
 export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
-  Stack() {}
-  .position({x:0, y: 0})
+  Stack() {
+  }
+  .position({ x: 0, y: 0 })
 }
 
 export const arkTsComponentNames: Array<string> = [];
diff --git a/docs/Samples/MutilBundleSample/NativeProject/hvigorfile.ts b/docs/Samples/MutilBundleSample/NativeProject/hvigorfile.ts
index 549b0badab9ef99722e947c60855c7dd266ae506..15864d709a604c7a9db90b9afec84fc9f1ee044e 100644
--- a/docs/Samples/MutilBundleSample/NativeProject/hvigorfile.ts
+++ b/docs/Samples/MutilBundleSample/NativeProject/hvigorfile.ts
@@ -8,6 +8,11 @@
 import { appTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
+<<<<<<< HEAD
+  system: appTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
+=======
     system: appTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+    plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
+>>>>>>> 589ae80f (Format the code format of the Sample project)
 }
diff --git a/docs/Samples/RegisterFont/README.md b/docs/Samples/RegisterFont/README.md
index 5f95d7c0d3e9841f158af7dddbbffec6142d0141..3fb963acfa0d92c8f2328d325c2428024824885b 100644
--- a/docs/Samples/RegisterFont/README.md
+++ b/docs/Samples/RegisterFont/README.md
@@ -7,7 +7,7 @@
 ```
 ├── RegisterFontNativeProject
 |   └── Index.ets
-|       ├── fontResourceByFontFamily # OpenHarmony 侧注册字体的方法1
+|       ├── fontResourceByFontFamily #OpenHarmony 侧注册字体的方法1
 |       └── rnInstance.registerFont #OpenHarmony 侧自定义注册字体的方法2，随时可以注册字体文件
 └── RegisterFontRnProject
     └── example.tsx  # React Native 侧展示使用字体的效果
diff --git a/docs/Samples/RegisterFont/RegisterFontNativeProject/AppScope/app.json5 b/docs/Samples/RegisterFont/RegisterFontNativeProject/AppScope/app.json5
index 4b98ef7cab7b5bd7838d9ab630b9b66148a40da2..42caa4225a42aa6a3b2c4ef9c42b6e8a687f801a 100644
--- a/docs/Samples/RegisterFont/RegisterFontNativeProject/AppScope/app.json5
+++ b/docs/Samples/RegisterFont/RegisterFontNativeProject/AppScope/app.json5
@@ -1,6 +1,6 @@
 {
   "app": {
-    "bundleName": "com.example.myapplication",
+    "bundleName": "com.example.registerfont",
     "vendor": "example",
     "versionCode": 1000000,
     "versionName": "1.0.0",
diff --git a/docs/Samples/RegisterFont/RegisterFontNativeProject/entry/hvigorfile.ts b/docs/Samples/RegisterFont/RegisterFontNativeProject/entry/hvigorfile.ts
index 4a1a975c3b7491258f5ff7278660b08d260ee8d3..e570e90e8decfddb61acdbaf0c9e6b983edddb23 100644
--- a/docs/Samples/RegisterFont/RegisterFontNativeProject/entry/hvigorfile.ts
+++ b/docs/Samples/RegisterFont/RegisterFontNativeProject/entry/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { hapTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/RegisterFont/RegisterFontNativeProject/entry/src/main/ets/pages/Index.ets b/docs/Samples/RegisterFont/RegisterFontNativeProject/entry/src/main/ets/pages/Index.ets
index 6d4ebc22ef777d6dc4e9ae12c033305f6b8ebdbc..3f9b51794a1c62719edc920901a0aace7b38800f 100644
--- a/docs/Samples/RegisterFont/RegisterFontNativeProject/entry/src/main/ets/pages/Index.ets
+++ b/docs/Samples/RegisterFont/RegisterFontNativeProject/entry/src/main/ets/pages/Index.ets
@@ -21,7 +21,8 @@ import { createRNPackages } from '../RNPackagesFactory';
 import fs from '@ohos.file.fs';
 
 @Builder
-export function buildCustomRNComponent(ctx: ComponentBuilderContext) {};
+export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
+};
 const wrappedCustomRNComponentBuilder = wrapBuilder(buildCustomRNComponent);
 
 @Entry
@@ -45,7 +46,6 @@ struct Index {
     // when handled by RN
     this.rnohCoreContext!.dispatchBackPress();
     return true;
-
   }
 
   build() {
@@ -56,8 +56,8 @@ struct Index {
         }
         if (this.rnAbility) {
           RNApp({
-            rnInstanceConfig: { 
-              createRNPackages,             
+            rnInstanceConfig: {
+              createRNPackages,
               enableCAPIArchitecture: true,
               arkTsComponentNames: [],
               fontResourceByFontFamily: {
diff --git a/docs/Samples/RegisterFont/RegisterFontNativeProject/hvigorfile.ts b/docs/Samples/RegisterFont/RegisterFontNativeProject/hvigorfile.ts
index 035eea0cc548c925a1d81920e8e809fe57d6a4db..44bbe01097a3d4970037b397435c451f6d260669 100644
--- a/docs/Samples/RegisterFont/RegisterFontNativeProject/hvigorfile.ts
+++ b/docs/Samples/RegisterFont/RegisterFontNativeProject/hvigorfile.ts
@@ -8,6 +8,11 @@
 import { appTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
+<<<<<<< HEAD
+  system: appTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
+=======
     system: appTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+    plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
+>>>>>>> 589ae80f (Format the code format of the Sample project)
 }
diff --git a/docs/Samples/RegisterFont/RegisterFontRnProject/__tests__/App.test.tsx b/docs/Samples/RegisterFont/RegisterFontRnProject/__tests__/App.test.tsx
index 5375d53c1a290981e85ba01a4298a7f408327290..515a9d4b5b89a34738b83daf73eb36c89e9a6e89 100644
--- a/docs/Samples/RegisterFont/RegisterFontRnProject/__tests__/App.test.tsx
+++ b/docs/Samples/RegisterFont/RegisterFontRnProject/__tests__/App.test.tsx
@@ -12,7 +12,7 @@ import React from 'react';
 import App from '../App';
 
 // Note: import explicitly to use the types shiped with jest.
-import {it} from '@jest/globals';
+import { it } from '@jest/globals';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
diff --git a/docs/Samples/RegisterFont/RegisterFontRnProject/index.js b/docs/Samples/RegisterFont/RegisterFontRnProject/index.js
index bf1a9890052fe5417029ca1416b1e42d2b781324..e811804d1026eb4f63e537d16cdc57e8125efe6a 100644
--- a/docs/Samples/RegisterFont/RegisterFontRnProject/index.js
+++ b/docs/Samples/RegisterFont/RegisterFontRnProject/index.js
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './src/bundles/RegisterFont/examples';
 
 AppRegistry.registerComponent('RegisterFont', () => App);
\ No newline at end of file
diff --git a/docs/Samples/RegisterFont/RegisterFontRnProject/metro.config.js b/docs/Samples/RegisterFont/RegisterFontRnProject/metro.config.js
index 872aa76384801ee14e66fff061ce09a8195e437b..357ba23d4f35eb4774f8855b485f5d7ee371f6a9 100644
--- a/docs/Samples/RegisterFont/RegisterFontRnProject/metro.config.js
+++ b/docs/Samples/RegisterFont/RegisterFontRnProject/metro.config.js
@@ -5,23 +5,23 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 /**
  * @type {import("metro-config").ConfigT}
  */
 const config = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
+    transformer: {
+        getTransformOptions: async () => ({
+            transform: {
+                experimentalImportSupport: false,
+                inlineRequires: true,
+            },
+        }),
+    },
 };
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
-  reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
+    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
 }), config);
diff --git a/docs/Samples/RegisterFont/RegisterFontRnProject/registerFont.config.js b/docs/Samples/RegisterFont/RegisterFontRnProject/registerFont.config.js
index 63b5449e8489af1d40ce81f3fba313b333abbfde..39de0cae149ef80174c1daa404396d286a095e7c 100644
--- a/docs/Samples/RegisterFont/RegisterFontRnProject/registerFont.config.js
+++ b/docs/Samples/RegisterFont/RegisterFontRnProject/registerFont.config.js
@@ -5,24 +5,24 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 const config = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
+    transformer: {
+        getTransformOptions: async () => ({
+            transform: {
+                experimentalImportSupport: false,
+                inlineRequires: true,
+            },
+        }),
+    },
 };
 
 module.exports = mergeConfig(
-  getDefaultConfig(__dirname),
-  createHarmonyMetroConfig({
-    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
-  }),
-  config,
+    getDefaultConfig(__dirname),
+    createHarmonyMetroConfig({
+        reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
+    }),
+    config,
 );
diff --git a/docs/Samples/RegisterFont/RegisterFontRnProject/src/bundles/RegisterFont/examples.tsx b/docs/Samples/RegisterFont/RegisterFontRnProject/src/bundles/RegisterFont/examples.tsx
index 802a73972cbc40f45e462dfad21ec8bd19ad3efc..31dff25cc3aa5a5d98019f8e33abcf7a8888676b 100644
--- a/docs/Samples/RegisterFont/RegisterFontRnProject/src/bundles/RegisterFont/examples.tsx
+++ b/docs/Samples/RegisterFont/RegisterFontRnProject/src/bundles/RegisterFont/examples.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {Text, View, StyleSheet} from 'react-native';
+import { Text, View, StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
   //创建样式
@@ -29,11 +29,11 @@ const RegisterFont = () => {
       <Text style={styles.text}>
         文字测试---默认字体
       </Text>
-      <Text style={[styles.text, {fontFamily: "Pacifico-Regular"}]}>
-       文字测试---Pacifico-Regular
+      <Text style={[styles.text, { fontFamily: "Pacifico-Regular" }]}>
+        文字测试---Pacifico-Regular
       </Text>
-      <Text style={[styles.text, {fontFamily: "StintUltraCondensed-Regular"}]}>
-       文字测试---StintUltraCondensed-Regular
+      <Text style={[styles.text, { fontFamily: "StintUltraCondensed-Regular" }]}>
+        文字测试---StintUltraCondensed-Regular
       </Text>
     </View>
   );
diff --git a/docs/Samples/RootTagSample/NativeProject/AppScope/app.json5 b/docs/Samples/RootTagSample/NativeProject/AppScope/app.json5
index b1f2a5955e5edea12691059baa1cbe276a78c59e..281dd10aa4899abfd30594bda0f248603b712757 100644
--- a/docs/Samples/RootTagSample/NativeProject/AppScope/app.json5
+++ b/docs/Samples/RootTagSample/NativeProject/AppScope/app.json5
@@ -1,6 +1,6 @@
 {
   "app": {
-    "bundleName": "com.example.sampleApp",
+    "bundleName": "com.example.roottag",
     "vendor": "example",
     "versionCode": 1000000,
     "versionName": "1.0.0",
diff --git a/docs/Samples/RootTagSample/NativeProject/entry/hvigorfile.ts b/docs/Samples/RootTagSample/NativeProject/entry/hvigorfile.ts
index d0f029bd2a2858b1701bf87bf3f67c00d5630c84..6650e7217be2e794b661d45f0d373a35d0026db4 100644
--- a/docs/Samples/RootTagSample/NativeProject/entry/hvigorfile.ts
+++ b/docs/Samples/RootTagSample/NativeProject/entry/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { hapTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/RootTagSample/NativeProject/entry/src/main/ets/entryability/EntryAbility.ets b/docs/Samples/RootTagSample/NativeProject/entry/src/main/ets/entryability/EntryAbility.ets
index 59ae400a8dcebdc8f612754b072ebbd809411061..32cb381b9261746b743783dcad12817d97e004bc 100644
--- a/docs/Samples/RootTagSample/NativeProject/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/docs/Samples/RootTagSample/NativeProject/entry/src/main/ets/entryability/EntryAbility.ets
@@ -6,7 +6,6 @@
  */
 
 import { RNAbility, } from '@rnoh/react-native-openharmony';
-
 import dataPreferences from '@ohos.data.preferences';
 import window from '@ohos.window';
 
@@ -27,7 +26,6 @@ export default class EntryAbility extends RNAbility {
     } catch (err) {
       console.error('Failed to get preferences');
     }
-
     AppStorage.setOrCreate('RNAbility', this);
   }
 }
diff --git a/docs/Samples/RootTagSample/NativeProject/entry/src/main/ets/pages/Index.ets b/docs/Samples/RootTagSample/NativeProject/entry/src/main/ets/pages/Index.ets
index 6fafb1ef90835b8536814ebce97a694cf79e48a5..c46722b3b0628eff384835cc50282f7ffc58ef95 100644
--- a/docs/Samples/RootTagSample/NativeProject/entry/src/main/ets/pages/Index.ets
+++ b/docs/Samples/RootTagSample/NativeProject/entry/src/main/ets/pages/Index.ets
@@ -21,7 +21,8 @@ import {
 
 @Builder
 function buildCustomComponent(ctx: ComponentBuilderContext) {
-  Stack() {}
+  Stack() {
+  }
   .position({ x: 0, y: 0 })
 }
 
@@ -57,62 +58,66 @@ export struct Index {
       enableCAPIArchitecture: true,
       arkTsComponentNames: []
     });
-    await this.instance.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager, this.bundlePath)).then(() => {
-      this.isBundleReady = true;
-    })
-
+    await this.instance.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager, this.bundlePath))
+      .then(() => {
+        this.isBundleReady = true;
+      })
   }
 
   build() {
     NavDestination() {
       if (this.isBundleReady) {
-      Column() {
-        Row() {
-          RNSurface({
-            surfaceConfig: {
-              appKey: 'Hotel_Page',
-            },
-            ctx: new RNComponentContext(
-              RNOHContext.fromCoreContext(this.rnohCoreContext!, this.instance),
-              wrappedCustomRNComponentBuilder,
-              wrapBuilder(buildRNComponentForTag),
-              new Map()
-            ),
-            updateViewRootTag: (rnInstance: RNInstance, rootViewTag: Tag) => {
-              // 将当前RNSurface的RNInstance和rootTag保存起来
-              this.receivedRootTag = rootViewTag;
-              this.receivedInstance = rnInstance;
-            }
-          })
-        }
-        .height("45%")
-        Row() {
-          Button("CLICK ME")
-            .onClick(() => {
-              // 向RN发送消息
-              this.instance?.emitDeviceEvent("clickEvent", { params: ({
-                rootTag: this.receivedRootTag
-              } as Params) })
+        Column() {
+          Row() {
+            RNSurface({
+              surfaceConfig: {
+                appKey: 'Hotel_Page',
+              },
+              ctx: new RNComponentContext(
+                RNOHContext.fromCoreContext(this.rnohCoreContext!, this.instance),
+                wrappedCustomRNComponentBuilder,
+                wrapBuilder(buildRNComponentForTag),
+                new Map()
+              ),
+              updateViewRootTag: (rnInstance: RNInstance, rootViewTag: Tag) => {
+                // 将当前RNSurface的RNInstance和rootTag保存起来
+                this.receivedRootTag = rootViewTag;
+                this.receivedInstance = rnInstance;
+              }
             })
+          }
+          .height("45%")
+
+          Row() {
+            Button("CLICK ME")
+              .onClick(() => {
+                // 向RN发送消息
+                this.instance?.emitDeviceEvent("clickEvent", {
+                  params: ({
+                    rootTag: this.receivedRootTag
+                  } as Params)
+                })
+              })
+          }
+          .height("10%")
+
+          Row() {
+            RNSurface({
+              surfaceConfig: {
+                appKey: 'Ticket_Page',
+              },
+              ctx: new RNComponentContext(
+                RNOHContext.fromCoreContext(this.rnohCoreContext!, this.instance),
+                wrappedCustomRNComponentBuilder,
+                wrapBuilder(buildRNComponentForTag),
+                new Map()
+              ),
+            })
+          }
+          .height("45%")
         }
-        .height("10%")
-        Row() {
-          RNSurface({
-            surfaceConfig: {
-              appKey: 'Ticket_Page',
-            },
-            ctx: new RNComponentContext(
-              RNOHContext.fromCoreContext(this.rnohCoreContext!, this.instance),
-              wrappedCustomRNComponentBuilder,
-              wrapBuilder(buildRNComponentForTag),
-              new Map()
-            ),
-          })
-        }
-        .height("45%")
-      }
-      .width('100%')
-      .height('100%')
+        .width('100%')
+        .height('100%')
       }
     }
   }
diff --git a/docs/Samples/RootTagSample/NativeProject/hvigorfile.ts b/docs/Samples/RootTagSample/NativeProject/hvigorfile.ts
index 549b0badab9ef99722e947c60855c7dd266ae506..3ba030761c1b3d33a633b8c22b41961b782bf7b2 100644
--- a/docs/Samples/RootTagSample/NativeProject/hvigorfile.ts
+++ b/docs/Samples/RootTagSample/NativeProject/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { appTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: appTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: appTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/RootTagSample/ReactProject/bundle.config.js b/docs/Samples/RootTagSample/ReactProject/bundle.config.js
index 025518477d890f14d83a5b2571318ebff4cdf662..5fb379d24099143b1387cffdf493fc2412c4d745 100644
--- a/docs/Samples/RootTagSample/ReactProject/bundle.config.js
+++ b/docs/Samples/RootTagSample/ReactProject/bundle.config.js
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
     reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
diff --git a/docs/Samples/RootTagSample/ReactProject/index.js b/docs/Samples/RootTagSample/ReactProject/index.js
index 8a46591daf522173aa02ae379cb8c76cbf53b6db..af3b1746db4bd270a4a3f804c861eac94f576c13 100644
--- a/docs/Samples/RootTagSample/ReactProject/index.js
+++ b/docs/Samples/RootTagSample/ReactProject/index.js
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import Hotel_Page from './src/Hotel_Page';
 import Ticket_Page from './src/Ticket_Page';
 
diff --git a/docs/Samples/RootTagSample/ReactProject/metro.config.js b/docs/Samples/RootTagSample/ReactProject/metro.config.js
index c8d6579789792beb12445eca5d5c879bdce967b3..45508b0a05e8757e14baf97cec5c94047c9cd8be 100644
--- a/docs/Samples/RootTagSample/ReactProject/metro.config.js
+++ b/docs/Samples/RootTagSample/ReactProject/metro.config.js
@@ -5,23 +5,23 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 /**
  * @type {import("metro-config").ConfigT}
  */
 const config = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
+    transformer: {
+        getTransformOptions: async () => ({
+            transform: {
+                experimentalImportSupport: false,
+                inlineRequires: true,
+            },
+        }),
+    },
 };
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
-  reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
+    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
 }), config);
diff --git a/docs/Samples/RootTagSample/ReactProject/src/Hotel_Page.tsx b/docs/Samples/RootTagSample/ReactProject/src/Hotel_Page.tsx
index af412b271daf2fbdfa62c99d637ff0168ac5a08b..ebe79d9ba88c47711678dc2621ab72ba03b1b802 100644
--- a/docs/Samples/RootTagSample/ReactProject/src/Hotel_Page.tsx
+++ b/docs/Samples/RootTagSample/ReactProject/src/Hotel_Page.tsx
@@ -19,9 +19,9 @@ const Hotel_Page = () => {
     }, 1000)
   })
   return (
-    <View style={{flex: 1, backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 20, color: 'red'}}>Here is the hotel page.</Text>
-      <Text style={{fontSize: 20, color: 'red'}}>{msg}</Text>
+    <View style={{ flex: 1, backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 20, color: 'red' }}>Here is the hotel page.</Text>
+      <Text style={{ fontSize: 20, color: 'red' }}>{msg}</Text>
     </View>
   );
 };
diff --git a/docs/Samples/RootTagSample/ReactProject/src/Ticket_Page.tsx b/docs/Samples/RootTagSample/ReactProject/src/Ticket_Page.tsx
index b70be1f31b401161f0438183914dc077f7ee2984..ad42ec8b8113680c57a1a13e01cd30fed7f7196c 100644
--- a/docs/Samples/RootTagSample/ReactProject/src/Ticket_Page.tsx
+++ b/docs/Samples/RootTagSample/ReactProject/src/Ticket_Page.tsx
@@ -19,9 +19,9 @@ const Ticket_Page = () => {
     }, 1000)
   })
   return (
-    <View style={{flex: 1, backgroundColor: 'green', alignItems: 'center', justifyContent: 'center'}}>
-      <Text style={{fontSize: 20, color: 'white'}}>Here is the flight ticket page.</Text>
-      <Text style={{fontSize: 20, color: 'white'}}>{msg}</Text>
+    <View style={{ flex: 1, backgroundColor: 'green', alignItems: 'center', justifyContent: 'center' }}>
+      <Text style={{ fontSize: 20, color: 'white' }}>Here is the flight ticket page.</Text>
+      <Text style={{ fontSize: 20, color: 'white' }}>{msg}</Text>
     </View>
   );
 };
diff --git a/docs/Samples/Sample/SampleApp/entry/hvigorfile.ts b/docs/Samples/Sample/SampleApp/entry/hvigorfile.ts
index 4a1a975c3b7491258f5ff7278660b08d260ee8d3..e570e90e8decfddb61acdbaf0c9e6b983edddb23 100644
--- a/docs/Samples/Sample/SampleApp/entry/hvigorfile.ts
+++ b/docs/Samples/Sample/SampleApp/entry/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { hapTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonNode.cpp b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonNode.cpp
index 014334a2485a70f957b89c80c1494323a6bd085d..c12cc7f037c39042e2600a35799214a46d2adb9f 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonNode.cpp
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonNode.cpp
@@ -26,7 +26,6 @@ ButtonNode::~ButtonNode() {
   }
 }
 
-
 ButtonNode& ButtonNode::setButtonNodeDelegate(
     ButtonNodeDelegate* buttonNodeDelegate) {
   m_buttonNodeDelegate = buttonNodeDelegate;
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewComponentDescriptor.h b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewComponentDescriptor.h
index f49df24217be866c3fa3d1f9612410f8e294501b..d4ddc91da7c95a4cde9e38881d087e90c25acdee 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewComponentDescriptor.h
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewComponentDescriptor.h
@@ -5,7 +5,6 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-
 #pragma once
 
 #include <react/renderer/core/ConcreteComponentDescriptor.h>
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewEventEmitter.cpp b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewEventEmitter.cpp
index a352f200c119ae5fa5366fba695bffdc0e8e09b1..5cbfd33e69ae2f0b9b8e40da424bc60c3b81e2c2 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewEventEmitter.cpp
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewEventEmitter.cpp
@@ -5,8 +5,6 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-
-
 #include "ButtonViewEventEmitter.h"
 
 namespace facebook {
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewEventEmitter.h b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewEventEmitter.h
index 39f30c81768b9d34f6428ba0d2b84376d366c04d..ec8d0b3dc18cdb9e5ad2e8723c5865a41471d2e7 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewEventEmitter.h
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewEventEmitter.h
@@ -5,7 +5,6 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-
 #pragma once
 
 #include <react/renderer/components/view/ViewEventEmitter.h>
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewJSIBinder.h b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewJSIBinder.h
index dbbff00eb54dfef1ccc0419bfd5567a56691b9d8..131a4eacb5350634e34339e87fd070ec55898577 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewJSIBinder.h
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/ButtonView/ButtonViewJSIBinder.h
@@ -5,7 +5,6 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-
 #pragma once
 #include "RNOHCorePackage/ComponentBinders/ViewComponentJSIBinder.h"
 
@@ -19,7 +18,6 @@ namespace rnoh {
     
         facebook::jsi::Object createDirectEventTypes(facebook::jsi::Runtime &rt) override {
             facebook::jsi::Object events(rt);
-
             events.setProperty(rt, "topButtonClick", createDirectEvent(rt, "onButtonClick"));
             return events;
         }
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewComponentDescriptor.h b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewComponentDescriptor.h
index af5e3330f39e03bb57a5ef42a119b50c68c9b263..a96fa215ba7dc75c1743a9a2434263dc332ea1ab 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewComponentDescriptor.h
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewComponentDescriptor.h
@@ -5,7 +5,6 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-
 #pragma once
 
 #include <react/renderer/core/ConcreteComponentDescriptor.h>
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewEventEmitRequestHandler.h b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewEventEmitRequestHandler.h
index e6ecc89270de1634d43961223363a37d41cc62de..e28abf079fb2fb60b0cec7de27d3782ff4508111 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewEventEmitRequestHandler.h
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewEventEmitRequestHandler.h
@@ -5,8 +5,6 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-
-
 #pragma once
 #include <napi/native_api.h>
 #include "MarqueeViewEventEmitter.h"
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewEventEmitter.cpp b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewEventEmitter.cpp
index 976a8505460a404fba55d95b753b33d91e2baf36..42e68030b2118c0449e24718d8cc747250933f17 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewEventEmitter.cpp
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewEventEmitter.cpp
@@ -5,8 +5,6 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-
-
 #include "MarqueeViewEventEmitter.h"
 
 namespace facebook {
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewEventEmitter.h b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewEventEmitter.h
index 019e84f37fa2b235bda49cce8b55e4bae249df93..122dae423064a0eee02b70cd75101af958ab01a2 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewEventEmitter.h
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewEventEmitter.h
@@ -5,7 +5,6 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-
 #pragma once
 
 #include <react/renderer/components/view/ViewEventEmitter.h>
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewJSIBinder.h b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewJSIBinder.h
index 98a4f9ebf86f33c25d61d4a183846e3dde5c21d0..6f098b873345c25ed399cfec9802543a6a7da0eb 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewJSIBinder.h
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewJSIBinder.h
@@ -5,7 +5,6 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-
 #pragma once
 #include "RNOHCorePackage/ComponentBinders/ViewComponentJSIBinder.h"
 
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewNapiBinder.h b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewNapiBinder.h
index 88dc63b13c942ce3dd9af132b976b2e3b3d090b0..f5196e3badf185f41f8be15b3f326661bb5b04e0 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewNapiBinder.h
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/MarqueeViewNapiBinder.h
@@ -5,7 +5,6 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-
 #pragma once
 //#include "MarqueeViewComponentDescriptor.h"
 #include "RNOHCorePackage/ComponentBinders/ViewComponentNapiBinder.h"
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/Props.cpp b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/Props.cpp
index 45a36e8a7238b9a30a3d74691f2b63e80de29aa4..83619f144a8f445c36f7f99b596cc1ae54a9e4d8 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/Props.cpp
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/cpp/Fabric/Props.cpp
@@ -5,8 +5,6 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-
-
 #include <react/renderer/components/rncore/Props.h>
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/core/propsConversions.h>
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ets b/docs/Samples/Sample/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ets
index 767b695c3294ec32473a665afde23064bc9dc226..dcc48fa006267a1f305cb4fbae7cfd4542ca7301 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ets
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ets
@@ -47,7 +47,9 @@ export class SampleTurboModule extends TurboModule {
   }
 
   getPreferencesData(key: string): string {
-    if (!preferences) return 'null';
+    if (!preferences) {
+      return 'null';
+    }
     try {
       let val = preferences.getSync(key, '默认值') as string
       return val
@@ -57,7 +59,9 @@ export class SampleTurboModule extends TurboModule {
   }
 
   putPreferencesData(key: string, value: string) {
-    if (!preferences) return;
+    if (!preferences) {
+      return;
+    }
     preferences.putSync(key, value)
     try {
       preferences.flush((err: BusinessError) => {
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ts b/docs/Samples/Sample/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ts
index 561cf7501857aa018daf47f05712357c7a4e8e7f..ae1f4104d71637f0d6f0fc8bf835a4cda5565d47 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ts
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ts
@@ -68,7 +68,9 @@ export class SampleTurboModule extends TurboModule {
   }
 
   getPreferencesData(key: string): string {
-    if (!SampleTurboModule.preferences) return 'null';
+    if (!SampleTurboModule.preferences) {
+      return 'null';
+    }
     try {
       let val = SampleTurboModule.preferences.getSync(key, '默认值') as string
       return val
@@ -78,7 +80,9 @@ export class SampleTurboModule extends TurboModule {
   }
 
   putPreferencesData(key: string, value: string) {
-    if (!SampleTurboModule.preferences) return;
+    if (!SampleTurboModule.preferences) {
+      return;
+    }
     SampleTurboModule.preferences.putSync(key, value)
     try {
       SampleTurboModule.preferences.flush((err: BusinessError) => {
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/ets/customView/MarqueeView.ets b/docs/Samples/Sample/SampleApp/entry/src/main/ets/customView/MarqueeView.ets
index b4f2016d99170a051a13a26f87055b03666197b1..cb6465c52a0834b757ee6176f20a764f4da53895 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/ets/customView/MarqueeView.ets
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/ets/customView/MarqueeView.ets
@@ -31,9 +31,10 @@ export struct MarqueeView {
     this.start = true
     this.descriptor = this.ctx.descriptorRegistry.getDescriptor<MarqueeViewDescriptor>(this.tag)
 
-    this.unregisterDescriptorChangesListener = this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag, (newDescriptor) => {
-      this.descriptor = (newDescriptor as MarqueeViewDescriptor)
-    })
+    this.unregisterDescriptorChangesListener =
+      this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag, (newDescriptor) => {
+        this.descriptor = (newDescriptor as MarqueeViewDescriptor)
+      })
 
     console.log('MarqueeView rawProps = ', JSON.stringify(this.descriptor.rawProps), this.tag)
     console.log('MarqueeView props = ', JSON.stringify(this.descriptor.props), this.tag)
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/ets/entryability/EntryAbility.ets b/docs/Samples/Sample/SampleApp/entry/src/main/ets/entryability/EntryAbility.ets
index 6ae5159f0a2c2b15c9f80df87a5a2e96801edc8a..ef9873e1506c94bdab1a2ee489e2207dea1ae214 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/ets/entryability/EntryAbility.ets
@@ -6,13 +6,11 @@
  */
 
 import { RNAbility, } from '@rnoh/react-native-openharmony';
-
 import dataPreferences from '@ohos.data.preferences'
 import window from '@ohos.window';
 
 export let preferences: dataPreferences.Preferences | null = null
 
-
 export default class EntryAbility extends RNAbility {
   getPagePath() {
     return 'pages/Index';
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/Details.ets b/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/Details.ets
index 5cd9beaeec6d3fdb841123d9db77f6c7f559544c..f9bebe123eae5c638c5ba23f76cae74014091c7d 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/Details.ets
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/Details.ets
@@ -9,7 +9,6 @@ import { RNInstance } from '@rnoh/react-native-openharmony';
 import { BaseRN, LoadManager } from '../rn';
 import { MetroBaseRN } from '../rn/MetroBaseRN'
 
-
 @Component
 export default struct Details {
   private instance: RNInstance = LoadManager.bpInstance
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/Index.ets b/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/Index.ets
index ad534c4a39e6ba1311aa4e62db0c8702371c9753..7ba62ef318cdb02ae2fd96187c3ebc9b8650caad 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/Index.ets
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/Index.ets
@@ -22,7 +22,6 @@ import { createRNPackages, LoadManager, buildCustomComponent } from '../rn';
 import { ENABLE_CAPI_ARCHITECTURE } from '../rn'
 import { arkTsComponentNames } from '../rn/LoadBundle';
 
-
 @Entry()
 @Component
 struct Index {
@@ -37,7 +36,9 @@ struct Index {
   }
 
   aboutToAppear() {
-    if (!this.rnohCoreContext) return;
+    if (!this.rnohCoreContext) {
+      return;
+    }
     this.loadMetroBundle()
   }
 
@@ -47,7 +48,9 @@ struct Index {
   }
 
   subscribeReload() {
-    if (!this.rnohCoreContext) return;
+    if (!this.rnohCoreContext) {
+      return;
+    }
     this.cleanUpCallbacks.forEach(cleanUp => cleanUp())
     this.cleanUpCallbacks.push(this.rnohCoreContext!.devToolsController.eventEmitter.subscribe("RELOAD", async () => {
       this.isBundleReady = false
@@ -76,12 +79,14 @@ struct Index {
       })
     })
 
-    this.cleanUpCallbacks.push(LoadManager.metroInstance.getTurboModule<LogBoxTurboModule>(LogBoxTurboModule.NAME).eventEmitter.subscribe("SHOW", () => {
-      this.logBoxDialogController.open()
-    }))
-    this.cleanUpCallbacks.push(LoadManager.metroInstance.getTurboModule<LogBoxTurboModule>(LogBoxTurboModule.NAME).eventEmitter.subscribe("HIDE", () => {
-      this.logBoxDialogController.close()
-    }))
+    this.cleanUpCallbacks.push(LoadManager.metroInstance.getTurboModule<LogBoxTurboModule>(LogBoxTurboModule.NAME).eventEmitter.subscribe("SHOW",
+      () => {
+        this.logBoxDialogController.open()
+      }))
+    this.cleanUpCallbacks.push(LoadManager.metroInstance.getTurboModule<LogBoxTurboModule>(LogBoxTurboModule.NAME).eventEmitter.subscribe("HIDE",
+      () => {
+        this.logBoxDialogController.close()
+      }))
   }
 
   loadMetroBundle() {
@@ -98,8 +103,9 @@ struct Index {
   }
 
   async register(): Promise<Map<string, RNInstance>> {
-    if (!this.rnohCoreContext)
+    if (!this.rnohCoreContext) {
       return new Map()
+    }
 
     if (this.isMetroAvailable) {
       this.isBundleReady = true
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/MultiSurface.ets b/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/MultiSurface.ets
index 325a79470625d5cfecc9e3adcb571d653ae8a82f..2a3836b91a074f3d5759be5f1e853a860ccbfd73 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/MultiSurface.ets
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/MultiSurface.ets
@@ -73,11 +73,13 @@ export struct MultiSurface {
       wrapBuilder(buildRNComponentForTag),
       new Map()
     );
-    await this.instance1.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager, 'bundle/basic/basic.harmony.bundle'));
-    await this.instance1.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager, this.bundlePath1)).then(() => {
-      this.isBundleReady1 = true
-      console.log('instance1 加载完成' + this.bundlePath1)
-    })
+    await this.instance1.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager,
+      'bundle/basic/basic.harmony.bundle'));
+    await this.instance1.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager, this.bundlePath1))
+      .then(() => {
+        this.isBundleReady1 = true
+        console.log('instance1 加载完成' + this.bundlePath1)
+      })
 
     this.instance2 = await this.rnohCoreContext.createAndRegisterRNInstance({
       createRNPackages: createRNPackages,
@@ -92,11 +94,13 @@ export struct MultiSurface {
       wrapBuilder(buildRNComponentForTag),
       new Map()
     );
-    await this.instance2.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager, 'bundle/basic/basic.harmony.bundle'));
-    await this.instance2.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager, this.bundlePath2)).then(() => {
-      this.isBundleReady2 = true
-      console.log('instance2 加载完成' + this.bundlePath2)
-    })
+    await this.instance2.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager,
+      'bundle/basic/basic.harmony.bundle'));
+    await this.instance2.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager, this.bundlePath2))
+      .then(() => {
+        this.isBundleReady2 = true
+        console.log('instance2 加载完成' + this.bundlePath2)
+      })
 
     this.instance3 = await this.rnohCoreContext.createAndRegisterRNInstance({
       createRNPackages: createRNPackages,
@@ -111,11 +115,11 @@ export struct MultiSurface {
       wrapBuilder(buildRNComponentForTag),
       new Map()
     );
-    await this.instance3.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager, this.bundlePath3)).then(() => {
-      this.isBundleReady3 = true
-      console.log('instance3 加载完成' + this.bundlePath3)
-    })
-
+    await this.instance3.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager, this.bundlePath3))
+      .then(() => {
+        this.isBundleReady3 = true
+        console.log('instance3 加载完成' + this.bundlePath3)
+      })
   }
 
   @Builder
@@ -163,7 +167,6 @@ export struct MultiSurface {
       .width('100%')
       .height('100%')
     }
-
   }
 }
    
\ No newline at end of file
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/SandboxBundle.ets b/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/SandboxBundle.ets
index c174a43415f4c513aa4fbccdc80951abe2873f2e..a9070e0e145fb29be9e3406a9eeeeaa370bf9178 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/SandboxBundle.ets
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/SandboxBundle.ets
@@ -50,7 +50,8 @@ export default struct SandBoxApp {
   async downloadBundle() {
     if (this.rnAbility) {
       // 将bundlejs下载并保存到沙箱
-      let uint8Array = await this.rnAbility.context.resourceManager.getRawFileContent('rawfile/bundle/bp/sandbox.harmony.bundle')
+      let uint8Array =
+        await this.rnAbility.context.resourceManager.getRawFileContent('rawfile/bundle/bp/sandbox.harmony.bundle')
       let rawBuffer = uint8Array.buffer
       let num = rawBuffer.byteLength
       // 获取沙箱路径
@@ -104,7 +105,7 @@ export default struct SandBoxApp {
             arkTsComponentNames: [],
           },
           appKey: "Sandbox",
-          initialProps: {'params1': '哈哈哈'},
+          initialProps: { 'params1': '哈哈哈' },
           wrappedCustomRNComponentBuilder: wrapBuilder(buildCustomComponent),
           onSetUp: (rnInstance) => {
             rnInstance.enableFeatureFlag("ENABLE_RN_INSTANCE_CLEAN_UP")
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/Test.ets b/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/Test.ets
index 6f3d98d600f95af493b26d263db873402ae575b4..1323a33379095779b96300f5ef9c4273917a0f22 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/Test.ets
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/ets/pages/Test.ets
@@ -9,7 +9,6 @@ import { RNInstance } from '@rnoh/react-native-openharmony';
 import { BaseRN, LoadManager } from '../rn';
 import { MetroBaseRN } from '../rn/MetroBaseRN'
 
-
 @Component
 export default struct Test {
   private instance: RNInstance = LoadManager.cpInstance;
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/ets/rn/BasePrecreateView.ets b/docs/Samples/Sample/SampleApp/entry/src/main/ets/rn/BasePrecreateView.ets
index a3d5af83e9996f177b0e268116df4004f7ba6d1d..36539e1877473d3cacfe5ef821a9bd0a28df6b13 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/ets/rn/BasePrecreateView.ets
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/ets/rn/BasePrecreateView.ets
@@ -73,7 +73,6 @@ export struct BasePrecreateView {
       this.shouldShow = true
       console.log("BasePrecreateView 预创建的 RNInstance 已完成 JSBundle 加载，直接展示页面")
     }
-
   }
 
   private async getOrCreateRNInstance(): Promise<CachedInstance> {
@@ -132,7 +131,8 @@ export struct BasePrecreateView {
       instance.status = "DONE"
 
       console.log("BasePrecreateView status = ", instance.status)
-      console.log("BasePrecreateView 预加载 JSBundle 完成，RNInstance ID = " + rnInstance.getId() + " instances.count = " + instances.length)
+      console.log("BasePrecreateView 预加载 JSBundle 完成，RNInstance ID = " + rnInstance.getId() +
+        " instances.count = " + instances.length)
       console.log("BasePrecreateView End ======================================================= ")
     }
   }
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/ets/rn/LoadBundle.ets b/docs/Samples/Sample/SampleApp/entry/src/main/ets/rn/LoadBundle.ets
index 8627a7521e178c14421e907838ab53758ce18121..c19ffc7d750cf732be4bb4bda35e323f927471e4 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/ets/rn/LoadBundle.ets
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/ets/rn/LoadBundle.ets
@@ -33,8 +33,7 @@ export function buildCustomComponent(ctx: ComponentBuilderContext) {
         tag: ctx.tag,
         buildCustomComponent: buildCustomComponent
       })
-    }
-    else if (ctx.componentName === MarqueeView.NAME) {
+    } else if (ctx.componentName === MarqueeView.NAME) {
       MarqueeView({
         ctx: ctx.rnComponentContext,
         tag: ctx.tag
@@ -54,9 +53,12 @@ export class LoadManager {
   static ctx: RNComponentContext;
 
   public static loadBundle(instance: RNInstance, bundlePath: string, useBundleCache: boolean = true): Promise<void> {
-    if (LoadManager.loadedBundle.has(bundlePath) && useBundleCache) return Promise.resolve();
-    if (useBundleCache) LoadManager.loadedBundle.add(bundlePath);
-
+    if (LoadManager.loadedBundle.has(bundlePath) && useBundleCache) {
+      return Promise.resolve();
+    }
+    if (useBundleCache) {
+      LoadManager.loadedBundle.add(bundlePath);
+    }
     return instance.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager, bundlePath));
   }
 
@@ -80,7 +82,8 @@ export class LoadManager {
       const provider = new MetroJSBundleProvider()
       await LoadManager.metroInstance.runJSBundle(provider)
 
-      const jsBundleExecutionStatus: string = LoadManager.metroInstance.getBundleExecutionStatus(provider.getURL()) as string
+      const jsBundleExecutionStatus: string =
+        LoadManager.metroInstance.getBundleExecutionStatus(provider.getURL()) as string
       console.log("SampleApp --- getBundleExecutionStatus", jsBundleExecutionStatus);
       LoadManager.shouldResetMetroInstance = false
       if (jsBundleExecutionStatus === "DONE") {
diff --git a/docs/Samples/Sample/SampleApp/entry/src/main/ets/rn/index.ets b/docs/Samples/Sample/SampleApp/entry/src/main/ets/rn/index.ets
index ebd2721e34b7390a2cb601d7647833808dc0275b..7dffae910a04af1bbca7389706e5ae64d66e52a9 100644
--- a/docs/Samples/Sample/SampleApp/entry/src/main/ets/rn/index.ets
+++ b/docs/Samples/Sample/SampleApp/entry/src/main/ets/rn/index.ets
@@ -6,8 +6,13 @@
  */
 
 export { BaseRN } from './BaseRN';
+
 export { MetroBaseRN } from './MetroBaseRN';
+
 export { createRNPackages } from './RNPackagesFactory'
+
 export { LoadManager, buildCustomComponent } from './LoadBundle'
+
 export { BasePrecreateView } from './BasePrecreateView'
+
 export * from './config'
\ No newline at end of file
diff --git a/docs/Samples/Sample/SampleApp/hvigorfile.ts b/docs/Samples/Sample/SampleApp/hvigorfile.ts
index 035eea0cc548c925a1d81920e8e809fe57d6a4db..44bbe01097a3d4970037b397435c451f6d260669 100644
--- a/docs/Samples/Sample/SampleApp/hvigorfile.ts
+++ b/docs/Samples/Sample/SampleApp/hvigorfile.ts
@@ -8,6 +8,11 @@
 import { appTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
+<<<<<<< HEAD
+  system: appTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
+=======
     system: appTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+    plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
+>>>>>>> 589ae80f (Format the code format of the Sample project)
 }
diff --git a/docs/Samples/Sample/SampleApp/oh-package.json5 b/docs/Samples/Sample/SampleApp/oh-package.json5
index 1bb4cdc4edd277b58dc689dab9310a8239325a9c..09040016a74ed3060bb9b84142a579c9bdd9b3e9 100644
--- a/docs/Samples/Sample/SampleApp/oh-package.json5
+++ b/docs/Samples/Sample/SampleApp/oh-package.json5
@@ -13,6 +13,6 @@
     "@ohos/axios": "^2.1.1"
   },
   "overrides": {
-    "@rnoh/react-native-openharmony": "0.72.56"
+    "@rnoh/react-native-openharmony": "0.72.57"
   }
 }
\ No newline at end of file
diff --git a/docs/Samples/Sample/SampleProject/MainProject/basic.config.js b/docs/Samples/Sample/SampleProject/MainProject/basic.config.js
index 441c303644e1a34675a1e9509e93214fad3334b2..8c3e0d770e1ebab597101fa2f855ca5d73916a7f 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/basic.config.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/basic.config.js
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 const path = require('path');
 const projectRootPath = path.join(__dirname);
 const moduleId = require('./build/multibundle/moduleId');
diff --git a/docs/Samples/Sample/SampleProject/MainProject/benchmarks/Benchmarker.tsx b/docs/Samples/Sample/SampleProject/MainProject/benchmarks/Benchmarker.tsx
index c5a0ff3b91fca44b74d98fbdf16a59a7d0163daa..2cabcec0d26c65ba44585087ece240f17976cdc6 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/benchmarks/Benchmarker.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/benchmarks/Benchmarker.tsx
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {useEffect, useState} from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
+import { useEffect, useState } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
 
 export function Benchmarker({
   samplesCount,
@@ -46,7 +46,7 @@ export function Benchmarker({
   }, [refreshKey, status, samplesCount]);
 
   return (
-    <View style={{height: '100%', padding: 16}}>
+    <View style={{ height: '100%', padding: 16 }}>
       <TouchableOpacity onPress={start}>
         <Text
           style={{
@@ -65,7 +65,7 @@ export function Benchmarker({
       </View> */}
 
       {status !== 'READY' && (
-        <View style={{height: 600}}>{renderContent(refreshKey)}</View>
+        <View style={{ height: 600 }}>{renderContent(refreshKey)}</View>
       )}
     </View>
   );
diff --git a/docs/Samples/Sample/SampleProject/MainProject/benchmarks/DeepTree.tsx b/docs/Samples/Sample/SampleProject/MainProject/benchmarks/DeepTree.tsx
index 404152d64a7b6e962bddf5cf6ea9cea4201befe2..eccff14acc12a5283a37a71c0e784c0bb9638a94 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/benchmarks/DeepTree.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/benchmarks/DeepTree.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {StyleSheet, View, ViewProps} from 'react-native';
+import { StyleSheet, View, ViewProps } from 'react-native';
 
 export function DeepTree({
   breadth,
@@ -23,7 +23,7 @@ export function DeepTree({
     <Box color={id % 3} layout={depth % 2 === 0 ? 'row' : 'column'} outer>
       {depth === 0 && <Box color={(id % 3) + 3} fixed />}
       {depth !== 0 &&
-        Array.from({length: breadth}).map((el, i) => (
+        Array.from({ length: breadth }).map((el, i) => (
           <DeepTree
             breadth={breadth}
             depth={depth - 1}
diff --git a/docs/Samples/Sample/SampleProject/MainProject/benchmarks/SierpinskiTriangle.tsx b/docs/Samples/Sample/SampleProject/MainProject/benchmarks/SierpinskiTriangle.tsx
index d0e77296da34249d7c240d3491b92820f7afaffc..878bc0c7281fb1414f3a935a7a9eec1271a07102 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/benchmarks/SierpinskiTriangle.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/benchmarks/SierpinskiTriangle.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import {
   interpolatePurples,
   interpolateBuPu,
diff --git a/docs/Samples/Sample/SampleProject/MainProject/build/multibundle/moduleId.js b/docs/Samples/Sample/SampleProject/MainProject/build/multibundle/moduleId.js
index 076a0fcc07a140441eb558445087639e5f0eceaf..d5a5ffcd1e388f1edf350b96477a30ae82eb5542 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/build/multibundle/moduleId.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/build/multibundle/moduleId.js
@@ -13,89 +13,89 @@ const basicNameArray = require('./map/basicNameMap.json');
 const homepageArray = require('./map/pageNameMap.json');
 
 function getModuleId(projectRootPath, modulePath, ...bundles) {
-  let startIndex = modulePath.indexOf(projectRootPath);
-  let pathRelative = modulePath.substr(startIndex + projectRootPath.length + 1);
-  return String(SHA256(pathRelative));
+    let startIndex = modulePath.indexOf(projectRootPath);
+    let pathRelative = modulePath.substr(startIndex + projectRootPath.length + 1);
+    return String(SHA256(pathRelative));
 }
 
 function createModuleIdFactoryWrap(projectRootPath, ...bundles) {
-  console.log('----------createModuleIdFactoryWrap', projectRootPath);
-  return () => {
-    return (path) => {
-      let moduleId = getModuleId(projectRootPath, path);
-      let jsItem = path + ' ---> ' + moduleId;
-      if ('basic' == bundles[0]) {
-        if (!basicNameArray.includes(jsItem)) {
-          basicNameArray.push(jsItem);
-          fs.writeFileSync(
-            __dirname + pathSep + 'map' + pathSep + 'basicNameMap.json',
-            JSON.stringify(basicNameArray),
-          );
-        }
-      } else {
-        if (!homepageArray.includes(jsItem)) {
-          homepageArray.push(jsItem);
-          fs.writeFileSync(
-            __dirname + pathSep + 'map' + pathSep + 'pageNameMap.json',
-            JSON.stringify(homepageArray),
-          );
-        }
-      }
+    console.log('----------createModuleIdFactoryWrap', projectRootPath);
+    return () => {
+        return (path) => {
+            let moduleId = getModuleId(projectRootPath, path);
+            let jsItem = path + ' ---> ' + moduleId;
+            if ('basic' == bundles[0]) {
+                if (!basicNameArray.includes(jsItem)) {
+                    basicNameArray.push(jsItem);
+                    fs.writeFileSync(
+                        __dirname + pathSep + 'map' + pathSep + 'basicNameMap.json',
+                        JSON.stringify(basicNameArray),
+                    );
+                }
+            } else {
+                if (!homepageArray.includes(jsItem)) {
+                    homepageArray.push(jsItem);
+                    fs.writeFileSync(
+                        __dirname + pathSep + 'map' + pathSep + 'pageNameMap.json',
+                        JSON.stringify(homepageArray),
+                    );
+                }
+            }
 
-      return moduleId;
+            return moduleId;
+        };
     };
-  };
 }
 
 function postProcessModulesFilterWrap(projectRootPath) {
-  // 返回false则不打入bundle中
-  console.log('----------postProcessModulesFilterWrap');
-  return (module) => {
-    const path = module.path;
-    if (
-      path.indexOf('__prelude__') >= 0 ||
-      path.indexOf(
-        pathSep +
-          'node_modules' +
-          pathSep +
-          '@react-native' +
-          pathSep +
-          // 'js-polyfills',
-          'polyfills',
-      ) >= 0 ||
-      path.indexOf(
-        pathSep +
-          'node_modules' +
-          pathSep +
-          'metro-runtime' +
-          pathSep +
-          'src' +
-          pathSep +
-          'polyfills',
-      ) >= 0
-    ) {
-      return false;
-    }
+    // 返回false则不打入bundle中
+    console.log('----------postProcessModulesFilterWrap');
+    return (module) => {
+        const path = module.path;
+        if (
+            path.indexOf('__prelude__') >= 0 ||
+            path.indexOf(
+                pathSep +
+                'node_modules' +
+                pathSep +
+                '@react-native' +
+                pathSep +
+                // 'js-polyfills',
+                'polyfills',
+            ) >= 0 ||
+            path.indexOf(
+                pathSep +
+                'node_modules' +
+                pathSep +
+                'metro-runtime' +
+                pathSep +
+                'src' +
+                pathSep +
+                'polyfills',
+            ) >= 0
+        ) {
+            return false;
+        }
 
-    const moduleId = getModuleId(projectRootPath, path);
-    let jsItem = path + ' ---> ' + moduleId;
-    if (path.indexOf(pathSep + 'node_modules' + pathSep) > 0) {
-      if (
-        'js' + pathSep + 'script' + pathSep + 'virtual' == module.output[0].type
-      ) {
-        return true;
-      }
-    }
+        const moduleId = getModuleId(projectRootPath, path);
+        let jsItem = path + ' ---> ' + moduleId;
+        if (path.indexOf(pathSep + 'node_modules' + pathSep) > 0) {
+            if (
+                'js' + pathSep + 'script' + pathSep + 'virtual' == module.output[0].type
+            ) {
+                return true;
+            }
+        }
 
-    // 正在打业务包
-    if (
-      basicNameArray.includes(jsItem)
-    ) {
-      return false;
-    }
-    
-    return true;
-  };
+        // 正在打业务包
+        if (
+            basicNameArray.includes(jsItem)
+        ) {
+            return false;
+        }
+
+        return true;
+    };
 }
 
 module.exports = { createModuleIdFactoryWrap, postProcessModulesFilterWrap };
diff --git a/docs/Samples/Sample/SampleProject/MainProject/components/Button.tsx b/docs/Samples/Sample/SampleProject/MainProject/components/Button.tsx
index 27df1b7956dc850af36179d624ec40b9f9691653..ba98c6da5d58d889ff3d05a837d8e4e4358ca646 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/components/Button.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/components/Button.tsx
@@ -5,9 +5,9 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {Text, TouchableHighlight} from 'react-native';
+import { Text, TouchableHighlight } from 'react-native';
 
-export function Button({label, onPress}: {onPress: () => void; label: string}) {
+export function Button({ label, onPress }: { onPress: () => void; label: string }) {
   return (
     <TouchableHighlight
       underlayColor="hsl(210, 80%, 35%)"
@@ -19,7 +19,7 @@ export function Button({label, onPress}: {onPress: () => void; label: string}) {
         borderColor: 'hsl(210, 50%, 35%)',
       }}
       onPress={onPress}>
-      <Text style={{color: 'white', fontWeight: 'bold', fontSize: 12}}>
+      <Text style={{ color: 'white', fontWeight: 'bold', fontSize: 12 }}>
         {label}
       </Text>
     </TouchableHighlight>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/components/Effect.tsx b/docs/Samples/Sample/SampleProject/MainProject/components/Effect.tsx
index 6d9bbaaedb7db765675f31f57ab092be4debe9c4..2482faee9ae4f7313ff28302eacb86a1bb5b4436 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/components/Effect.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/components/Effect.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {useEffect} from 'react';
+import { useEffect } from 'react';
 
 export function Effect({
   onMount,
@@ -15,7 +15,7 @@ export function Effect({
   children?: any;
 }) {
   useEffect(() => {
-    let cleanUp: () => void = () => {};
+    let cleanUp: () => void = () => { };
     (async () => {
       const cleanUp_ = await onMount();
       if (cleanUp_) {
diff --git a/docs/Samples/Sample/SampleProject/MainProject/components/Modal.tsx b/docs/Samples/Sample/SampleProject/MainProject/components/Modal.tsx
index 78438f1795458307c66fdb39fd7c8a0a7033288c..f8c22893acda43b4339f00e50d73b72842c80f9e 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/components/Modal.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/components/Modal.tsx
@@ -5,10 +5,10 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {Portal} from '@gorhom/portal';
-import {useState} from 'react';
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
-import {Button} from '../components';
+import { Portal } from '@gorhom/portal';
+import { useState } from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { Button } from '../components';
 
 export function Modal(props: {
   children: any;
@@ -42,7 +42,7 @@ export function Modal(props: {
         ]}>
         <View
           style={[
-            {backgroundColor: 'white', padding: 16},
+            { backgroundColor: 'white', padding: 16 },
             props.contentContainerStyle,
           ]}
           onTouchEnd={e => e.stopPropagation()}>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/components/Navigation.tsx b/docs/Samples/Sample/SampleProject/MainProject/components/Navigation.tsx
index 3e70dd6c29a9b129da135cfe6f50e2905bf55d83..1526270f2f5d7f24566b76e053e49cf1e4e4e372 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/components/Navigation.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/components/Navigation.tsx
@@ -5,16 +5,16 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useEffect} from 'react';
-import {FlatList, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import React, { useEffect } from 'react';
+import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 const NavigationContext = React.createContext<
   | {
-      currentPageName: string;
-      navigateTo: (pageName: string) => void;
-      registerPageName: (pageName: string) => void;
-      registeredPageNames: string[];
-    }
+    currentPageName: string;
+    navigateTo: (pageName: string) => void;
+    registerPageName: (pageName: string) => void;
+    registeredPageNames: string[];
+  }
   | undefined
 >(undefined);
 
@@ -57,8 +57,8 @@ export function useNavigation() {
   return React.useContext(NavigationContext)!;
 }
 
-export function Page({name, children}: {name: string; children: any}) {
-  const {currentPageName, navigateTo, registerPageName} = useNavigation();
+export function Page({ name, children }: { name: string; children: any }) {
+  const { currentPageName, navigateTo, registerPageName } = useNavigation();
 
   useEffect(() => {
     if (name !== 'INDEX') {
@@ -67,7 +67,7 @@ export function Page({name, children}: {name: string; children: any}) {
   }, [name]);
 
   return name === currentPageName ? (
-    <View style={{width: '100%', height: '100%'}}>
+    <View style={{ width: '100%', height: '100%' }}>
       {name !== 'INDEX' && (
         <TouchableOpacity
           onPress={() => {
@@ -82,12 +82,12 @@ export function Page({name, children}: {name: string; children: any}) {
 }
 
 export function IndexPage() {
-  const {navigateTo, registeredPageNames} = useNavigation();
+  const { navigateTo, registeredPageNames } = useNavigation();
 
   return (
     <FlatList
       data={registeredPageNames}
-      renderItem={({item}) => {
+      renderItem={({ item }) => {
         return (
           <TouchableOpacity
             onPress={() => {
@@ -98,7 +98,7 @@ export function IndexPage() {
         );
       }}
       ItemSeparatorComponent={() => (
-        <View style={{height: 1, backgroundColor: 'silver'}} />
+        <View style={{ height: 1, backgroundColor: 'silver' }} />
       )}
     />
   );
diff --git a/docs/Samples/Sample/SampleProject/MainProject/components/ObjectDisplayer.tsx b/docs/Samples/Sample/SampleProject/MainProject/components/ObjectDisplayer.tsx
index d017d6eaa3e01913eed97645c6e0d91f39997adc..a439b57a73a51af1386cc060444fa6314a046aa0 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/components/ObjectDisplayer.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/components/ObjectDisplayer.tsx
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {useState} from 'react';
-import {Text, View} from 'react-native';
+import { useState } from 'react';
+import { Text, View } from 'react-native';
 
 export function ObjectDisplayer(props: {
   renderContent: (setObject: (obj: Object) => void) => any;
@@ -14,7 +14,7 @@ export function ObjectDisplayer(props: {
   const [object, setObject] = useState<Object>();
 
   return (
-    <View style={{width: '100%'}}>
+    <View style={{ width: '100%' }}>
       <Text
         style={{
           width: '100%',
diff --git a/docs/Samples/Sample/SampleProject/MainProject/components/PressCounter.tsx b/docs/Samples/Sample/SampleProject/MainProject/components/PressCounter.tsx
index 25ca1045c089d2a2af6b0169d105a5974a943c79..6edb9fdd66d820d308371932b7db882dad716713 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/components/PressCounter.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/components/PressCounter.tsx
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {useState} from 'react';
-import {Button} from 'react-native';
+import { useState } from 'react';
+import { Button } from 'react-native';
 
 export function PressCounter() {
   const [counter, setCounter] = useState(0);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/components/Ref.tsx b/docs/Samples/Sample/SampleProject/MainProject/components/Ref.tsx
index e046aa16bcf372f305ab1bded33d4fa1b94f8e37..3d750e275f77eeb868cb10fcd6b2323b958d5ce0 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/components/Ref.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/components/Ref.tsx
@@ -5,9 +5,9 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {RefObject, useRef} from 'react';
+import { RefObject, useRef } from 'react';
 
-export function Ref<T>({render}: {render: (ref: RefObject<T>) => any}) {
+export function Ref<T>({ render }: { render: (ref: RefObject<T>) => any }) {
   const ref = useRef<T>(null);
   return render(ref);
 }
diff --git a/docs/Samples/Sample/SampleProject/MainProject/components/StateKeeper.tsx b/docs/Samples/Sample/SampleProject/MainProject/components/StateKeeper.tsx
index 22e988809013f67bb695038c35a3521e093c4bd5..28528ed697d89ef5ebd6be1573b330538ad03eb8 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/components/StateKeeper.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/components/StateKeeper.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {useState} from 'react';
+import { useState } from 'react';
 
 export function StateKeeper<T>(props: {
   initialValue: T;
diff --git a/docs/Samples/Sample/SampleProject/MainProject/components/index.ts b/docs/Samples/Sample/SampleProject/MainProject/components/index.ts
index f9d1d6fd76b81705567ea0fdf227d70306367fc3..bf3085a6325a76fa2c7a08a2648c0c7741dbba08 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/components/index.ts
+++ b/docs/Samples/Sample/SampleProject/MainProject/components/index.ts
@@ -6,11 +6,19 @@
  */
 
 export * from './Button';
+
 export * from './colorUtils';
+
 export * from './Effect';
+
 export * from './Navigation';
+
 export * from './Modal';
+
 export * from './StateKeeper';
+
 export * from './ObjectDisplayer';
+
 export * from './Ref';
+
 export * from './PressCounter';
diff --git a/docs/Samples/Sample/SampleProject/MainProject/details.config.js b/docs/Samples/Sample/SampleProject/MainProject/details.config.js
index 9f2c5947504e8904f4887ce81b1da342c9473d81..a174e19138b3f57131628be5b30b50666ba21c5e 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/details.config.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/details.config.js
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 const path = require('path');
 const projectRootPath = path.join(__dirname);
 const moduleId = require('./build/multibundle/moduleId');
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/AnimatedRenderExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/AnimatedRenderExample.tsx
index fcb907b31d33c3d59e3ff93994383134b3140a39..52934c577e7857750d1b84a39b7fa159f9dda86f 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/AnimatedRenderExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/AnimatedRenderExample.tsx
@@ -5,12 +5,12 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
-import {Animated, View, Button, StyleSheet, Text} from 'react-native';
+import React, { useState } from 'react';
+import { Animated, View, Button, StyleSheet, Text } from 'react-native';
 
 export function AnimatedRenderExample() {
   const translateXYalue = React.useRef(
-    new Animated.ValueXY({x: 0, y: 0}),
+    new Animated.ValueXY({ x: 0, y: 0 }),
   ).current;
   const [num, setNum] = useState(0);
   const [animated, setAnimated] = useState(true);
@@ -18,7 +18,7 @@ export function AnimatedRenderExample() {
   const onPress = React.useRef(
     Animated.loop(
       Animated.timing(translateXYalue, {
-        toValue: {x: 100, y: 100},
+        toValue: { x: 100, y: 100 },
         useNativeDriver: true,
       }),
     ),
@@ -38,10 +38,10 @@ export function AnimatedRenderExample() {
       <Animated.View
         style={[
           styles.viewBlock,
-          {marginBottom: 100},
+          { marginBottom: 100 },
           animated
-            ? {transform: translateXYalue.getTranslateTransform()}
-            : {transform: [{translateX: 50}, {translateY: 50}]},
+            ? { transform: translateXYalue.getTranslateTransform() }
+            : { transform: [{ translateX: 50 }, { translateY: 50 }] },
         ]}
       />
       <Text>{num}</Text>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/AnimationsExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/AnimationsExample.tsx
index 8aaf686998fa5dfae9cad3f5307cdb28549723e6..94f3fc7befc704a9264937cc3845afbde3e5a8a5 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/AnimationsExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/AnimationsExample.tsx
@@ -5,9 +5,9 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useEffect, useState} from 'react';
-import {Animated, ScrollView, Text, TextInput, View} from 'react-native';
-import {Button} from '../components';
+import React, { useEffect, useState } from 'react';
+import { Animated, ScrollView, Text, TextInput, View } from 'react-native';
+import { Button } from '../components';
 
 export function AnimationsExample() {
   const [isIntervalRunning, setIsIntervalRunning] = useState(false);
@@ -22,8 +22,8 @@ export function AnimationsExample() {
   useEffect(() => {
     const timerId = isIntervalRunning
       ? setInterval(() => {
-          setTimeout(() => {}, 1);
-        }, 1)
+        setTimeout(() => { }, 1);
+      }, 1)
       : undefined;
     return () => {
       if (timerId) {
@@ -140,7 +140,7 @@ export function AnimationsExample() {
 
   return (
     <ScrollView>
-      <View style={{flexDirection: 'row'}}>
+      <View style={{ flexDirection: 'row' }}>
         <Button
           label={isIntervalRunning ? 'Stop running interval' : 'Run interval'}
           onPress={() => {
@@ -170,7 +170,7 @@ export function AnimationsExample() {
           setNumberOfComponents(parseInt(value) || 0);
         }}
       />
-      <View style={{width: '100%'}}>
+      <View style={{ width: '100%' }}>
         {new Array(numberOfComponents).fill(0).map((_, idx) => {
           return (
             <View
@@ -201,46 +201,46 @@ export function AnimationsExample() {
             left: xAnim,
             backgroundColor: 'red',
           }}>
-          <Text style={{height: 24}}>Position</Text>
+          <Text style={{ height: 24 }}>Position</Text>
         </Animated.View>
         <>
           <Animated.View
             style={{
               height: 100,
               width: 100,
-              transform: [{translateX: xAnim}],
+              transform: [{ translateX: xAnim }],
               backgroundColor: 'red',
             }}>
-            <Text style={{height: 24}}>Transform</Text>
+            <Text style={{ height: 24 }}>Transform</Text>
           </Animated.View>
           <Animated.View
             style={{
               height: 100,
               width: 100,
-              transform: [{translateX: xAnimNative}],
+              transform: [{ translateX: xAnimNative }],
               backgroundColor: 'red',
             }}>
-            <Text style={{height: 24}}>Native driver</Text>
+            <Text style={{ height: 24 }}>Native driver</Text>
           </Animated.View>
           <Animated.View
             style={{
               height: 100,
               width: 100,
-              transform: [{translateX: Animated.add(xAnimNative, 50)}],
+              transform: [{ translateX: Animated.add(xAnimNative, 50) }],
               backgroundColor: 'red',
             }}>
-            <Text style={{height: 48}}>Native driver Addition</Text>
+            <Text style={{ height: 48 }}>Native driver Addition</Text>
           </Animated.View>
           <Animated.View
             style={{
               height: 100,
               width: 100,
               transform: [
-                {translateX: Animated.multiply(xAnimNative, yAnimNative)},
+                { translateX: Animated.multiply(xAnimNative, yAnimNative) },
               ],
               backgroundColor: 'red',
             }}>
-            <Text style={{height: 48}}>Native driver Multiplication</Text>
+            <Text style={{ height: 48 }}>Native driver Multiplication</Text>
           </Animated.View>
           <Animated.View
             style={{
@@ -256,45 +256,45 @@ export function AnimationsExample() {
               ],
               backgroundColor: 'red',
             }}>
-            <Text style={{height: 48}}>Native driver Division</Text>
+            <Text style={{ height: 48 }}>Native driver Division</Text>
           </Animated.View>
           <Animated.View
             style={{
               height: 100,
               width: 100,
-              transform: [{translateX: Animated.subtract(xAnimNative, 50)}],
+              transform: [{ translateX: Animated.subtract(xAnimNative, 50) }],
               backgroundColor: 'red',
             }}>
-            <Text style={{height: 48}}>Native driver Subtraction</Text>
+            <Text style={{ height: 48 }}>Native driver Subtraction</Text>
           </Animated.View>
           <Animated.View
             style={{
               height: 100,
               width: 100,
               transform: [
-                {scaleX: Animated.add(Animated.divide(xAnimNative, 100), 0.5)},
+                { scaleX: Animated.add(Animated.divide(xAnimNative, 100), 0.5) },
               ],
               backgroundColor: 'red',
             }}>
-            <Text style={{height: 48}}>Native driver scale</Text>
+            <Text style={{ height: 48 }}>Native driver scale</Text>
           </Animated.View>
           <Animated.View
             style={{
               height: 100,
               width: 100,
-              transform: [{rotate: spin}],
+              transform: [{ rotate: spin }],
               backgroundColor: 'red',
             }}>
-            <Text style={{height: 48}}>Native driver rotate</Text>
+            <Text style={{ height: 48 }}>Native driver rotate</Text>
           </Animated.View>
           <Animated.View
             style={{
               height: 100,
               width: 100,
-              transform: [{rotateX: spin}, {rotateY: spin}],
+              transform: [{ rotateX: spin }, { rotateY: spin }],
               backgroundColor: 'red',
             }}>
-            <Text style={{height: 48}}>Native driver rotate X&Y</Text>
+            <Text style={{ height: 48 }}>Native driver rotate X&Y</Text>
           </Animated.View>
         </>
         {isComponentVisible && (
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/CheckerboardExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/CheckerboardExample.tsx
index f40563b984356691af738a5fb5cdccbe0999416e..7b6e801dda133e9bc995ce2b3b65dd808dd21f9a 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/CheckerboardExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/CheckerboardExample.tsx
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
-import {Animated, Text, View} from 'react-native';
+import React, { useState } from 'react';
+import { Animated, Text, View } from 'react-native';
 
 const N_ROWS = 100;
 const N_COLS = 100;
@@ -16,7 +16,7 @@ export function CheckerboardExample() {
   const [isCheckerboardVisible, setIsCheckerboardVisible] = useState(false);
 
   return (
-    <View style={{backgroundColor: 'black', width: '100%', height: '100%'}}>
+    <View style={{ backgroundColor: 'black', width: '100%', height: '100%' }}>
       <AnimatedRectangle />
       <Button
         label="Show checkerboard"
@@ -26,7 +26,7 @@ export function CheckerboardExample() {
       {isCheckerboardVisible &&
         new Array(N_ROWS).fill(0).map((_, rowId) => {
           return (
-            <View key={rowId} style={{flexDirection: 'row', width: '100%'}}>
+            <View key={rowId} style={{ flexDirection: 'row', width: '100%' }}>
               {new Array(N_COLS).fill(0).map((__, colId) => {
                 return <Box key={colId} colorId={(rowId + colId) % 3} />;
               })}
@@ -37,19 +37,19 @@ export function CheckerboardExample() {
   );
 }
 
-function Button({onPress}: {label: string; onPress: () => void}) {
+function Button({ onPress }: { label: string; onPress: () => void }) {
   return (
     <View
       onTouchEnd={onPress}
-      style={{backgroundColor: 'blue', width: 192, height: 24}}>
-      <Text style={{width: '100%', height: '100%', color: 'white'}}>
+      style={{ backgroundColor: 'blue', width: 192, height: 24 }}>
+      <Text style={{ width: '100%', height: '100%', color: 'white' }}>
         Show checkerboard
       </Text>
     </View>
   );
 }
 
-function Box({colorId}: {colorId: number}) {
+function Box({ colorId }: { colorId: number }) {
   function getColor() {
     if (colorId === 1) {
       return '#0F0';
@@ -60,7 +60,7 @@ function Box({colorId}: {colorId: number}) {
     return '#F00';
   }
   return (
-    <View style={{width: SIZE, height: SIZE, backgroundColor: getColor()}} />
+    <View style={{ width: SIZE, height: SIZE, backgroundColor: getColor() }} />
   );
 }
 
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/ChessboardExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/ChessboardExample.tsx
index 48b896ed384d10d1c350195e419632b25812515c..08522a63472f2e1cd90786a9db024c73439d337e 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/ChessboardExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/ChessboardExample.tsx
@@ -6,13 +6,13 @@
  */
 
 import React from 'react';
-import {View, StyleSheet, Image, Text, TextInput} from 'react-native';
+import { View, StyleSheet, Image, Text, TextInput } from 'react-native';
 
 export function ChessboardExample() {
   const [username, setUsername] = React.useState('');
 
   return (
-    <View style={{backgroundColor: '#333', height: '100%'}}>
+    <View style={{ backgroundColor: '#333', height: '100%' }}>
       <UserInfo avatar="https://i.pravatar.cc/100?img=8" />
       <View style={styles.centerX}>
         <Chessboard />
@@ -26,10 +26,10 @@ export function ChessboardExample() {
   );
 }
 
-function UserInfo({name, avatar}: any) {
+function UserInfo({ name, avatar }: any) {
   return (
     <View style={styles.userInfoContainer}>
-      <Image style={styles.placeholder} source={{uri: avatar}} />
+      <Image style={styles.placeholder} source={{ uri: avatar }} />
       <Text style={styles.username}>{name || 'Guest'}</Text>
     </View>
   );
@@ -88,8 +88,8 @@ function Chessboard() {
 }
 
 const CELL_BG_COLOR_BY_VARIANT = {
-  light: {inactive: 'hsl(62, 42%, 87%)', active: 'hsl(60, 88%, 73%)'},
-  dark: {inactive: 'hsl(89, 27%, 46%)', active: 'hsl(67, 58%, 52%)'},
+  light: { inactive: 'hsl(62, 42%, 87%)', active: 'hsl(60, 88%, 73%)' },
+  dark: { inactive: 'hsl(89, 27%, 46%)', active: 'hsl(67, 58%, 52%)' },
 } as const;
 
 function ChessboardCell({
@@ -115,7 +115,7 @@ function ChessboardCell({
         {
           backgroundColor:
             CELL_BG_COLOR_BY_VARIANT[variant][
-              isSelected ? 'active' : 'inactive'
+            isSelected ? 'active' : 'inactive'
             ],
         },
       ]}>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/CursorExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/CursorExample.tsx
index 1043d13a9366ae50ee95dbcc57326d03d4eb6788..e11b3ac16fae6d03f37f15cbbf46cab3447339b1 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/CursorExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/CursorExample.tsx
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useRef, useEffect} from 'react';
-import {View, PanResponder, Animated, Text, ScrollView} from 'react-native';
+import React, { useRef, useEffect } from 'react';
+import { View, PanResponder, Animated, Text, ScrollView } from 'react-native';
 
 export function CursorExample() {
   const pan = useRef(new Animated.ValueXY()).current;
@@ -14,10 +14,10 @@ export function CursorExample() {
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => true,
-      onPanResponderMove: Animated.event([null, {dx: pan.x, dy: pan.y}]),
+      onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }]),
       onPanResponderRelease: () => {
         Animated.timing(pan, {
-          toValue: {x: 0, y: 0},
+          toValue: { x: 0, y: 0 },
           useNativeDriver: true,
         }).start();
       },
@@ -25,23 +25,23 @@ export function CursorExample() {
   ).current;
 
   useEffect(() => {
-    pan.setOffset({x: 0, y: 0});
-    pan.setValue({x: 0, y: 0});
+    pan.setOffset({ x: 0, y: 0 });
+    pan.setValue({ x: 0, y: 0 });
   }, []);
 
   return (
-    <View style={{flex: 1}}>
-      <ScrollView style={{height: 600}}>
-        <View style={{height: 500, width: '100%', backgroundColor: 'silver'}} />
-        <View style={{height: 500, width: '100%', backgroundColor: 'gray'}} />
+    <View style={{ flex: 1 }}>
+      <ScrollView style={{ height: 600 }}>
+        <View style={{ height: 500, width: '100%', backgroundColor: 'silver' }} />
+        <View style={{ height: 500, width: '100%', backgroundColor: 'gray' }} />
       </ScrollView>
       <Animated.View
         {...panResponder.panHandlers}
         style={[
-          {transform: pan.getTranslateTransform()},
-          {width: 50, height: 50, backgroundColor: 'red', position: 'absolute'},
+          { transform: pan.getTranslateTransform() },
+          { width: 50, height: 50, backgroundColor: 'red', position: 'absolute' },
         ]}>
-        <Text style={{width: '100%', height: '100%'}}>Drag me around</Text>
+        <Text style={{ width: '100%', height: '100%' }}>Drag me around</Text>
       </Animated.View>
     </View>
   );
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/FlatListVsScrollViewExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/FlatListVsScrollViewExample.tsx
index 4bd311591656b487c67d6e6b9a36dbebc0f24cb4..81a72730ce4f4ac8add9884d851b0e426019ad79 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/FlatListVsScrollViewExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/FlatListVsScrollViewExample.tsx
@@ -5,25 +5,25 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {FlatList, ScrollView, Text, View} from 'react-native';
-import {randomizeColor} from '../components';
+import { FlatList, ScrollView, Text, View } from 'react-native';
+import { randomizeColor } from '../components';
 import React from 'react';
 
 const ITEMS_COUNT = 1000;
 
 export function FlatListVsScrollViewExample() {
   return (
-    <View style={{flex: 1, backgroundColor: '#ddd'}}>
-      <Text style={{height: 20}}>FlatList</Text>
+    <View style={{ flex: 1, backgroundColor: '#ddd' }}>
+      <Text style={{ height: 20 }}>FlatList</Text>
       <FlatList
-        style={{height: '50%'}}
+        style={{ height: '50%' }}
         data={new Array(ITEMS_COUNT)}
         renderItem={item => {
           return <Item id={item.index} />;
         }}
       />
-      <Text style={{height: 20}}>ScrollView</Text>
-      <ScrollView style={{width: '100%', height: '50%'}}>
+      <Text style={{ height: 20 }}>ScrollView</Text>
+      <ScrollView style={{ width: '100%', height: '50%' }}>
         {new Array(ITEMS_COUNT).fill(0).map((_, itemId) => {
           return <Item id={itemId} key={itemId} />;
         })}
@@ -32,7 +32,7 @@ export function FlatListVsScrollViewExample() {
   );
 }
 
-function Item({id}: {id: number}) {
+function Item({ id }: { id: number }) {
   const [bgColor] = React.useState(randomizeColor());
 
   return (
@@ -42,7 +42,7 @@ function Item({id}: {id: number}) {
         height: 100,
         backgroundColor: bgColor,
       }}>
-      <Text style={{height: 24}}>{id}</Text>
+      <Text style={{ height: 24 }}>{id}</Text>
     </View>
   );
 }
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/ImageGalleryExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/ImageGalleryExample.tsx
index 3b9526666fc62fd372ce0ee95c270ab5353c39c6..2d55b32896e444349f43f1fadf98475dcaf30fe1 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/ImageGalleryExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/ImageGalleryExample.tsx
@@ -5,15 +5,15 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
-import {Image, ScrollView, StyleSheet, TextInput, View} from 'react-native';
+import React, { useState } from 'react';
+import { Image, ScrollView, StyleSheet, TextInput, View } from 'react-native';
 
 export function ImageGalleryExample() {
   const [numberOfComponents, setNumberOfComponents] = useState(300);
 
   return (
-    <ScrollView style={{flex: 1}}>
-      <View style={{flexDirection: 'column'}}>
+    <ScrollView style={{ flex: 1 }}>
+      <View style={{ flexDirection: 'column' }}>
         <TextInput
           style={styles.textInput}
           value={numberOfComponents.toString()}
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/LargeImageScrollExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/LargeImageScrollExample.tsx
index 640b6581fc90f8a145751406b5dc4c90098ce17c..3b645843ec8cc62628c7d40f4effaaeed187eb3e 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/LargeImageScrollExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/LargeImageScrollExample.tsx
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
-import {Image, ScrollView, StyleSheet, TextInput, View} from 'react-native';
+import React, { useState } from 'react';
+import { Image, ScrollView, StyleSheet, TextInput, View } from 'react-native';
 
 export function LargeImageScrollExample() {
   const [numberOfComponents, setNumberOfComponents] = useState(300);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/ManyComponentsExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/ManyComponentsExample.tsx
index f328ef1586f5765ac1a3fe2d5400ff1fb5cde903..7ab96a836df4c8aed3e72cd8c060862dbe092eb3 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/ManyComponentsExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/ManyComponentsExample.tsx
@@ -5,17 +5,17 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
-import {ScrollView, TextInput, View} from 'react-native';
-import {Button} from '../components';
+import React, { useState } from 'react';
+import { ScrollView, TextInput, View } from 'react-native';
+import { Button } from '../components';
 
 export function ManyComponentsExample() {
   const [numberOfComponents, setNumberOfComponents] = useState(100);
   const [shouldShowComponents, setShouldShowComponents] = useState(true);
 
   return (
-    <ScrollView contentContainerStyle={{height: 1000}}>
-      <View style={{flexDirection: 'row'}}>
+    <ScrollView contentContainerStyle={{ height: 1000 }}>
+      <View style={{ flexDirection: 'row' }}>
         <Button
           label={shouldShowComponents ? 'Hide components' : 'Show components'}
           onPress={() => {
@@ -36,7 +36,7 @@ export function ManyComponentsExample() {
         }}
       />
       {shouldShowComponents && (
-        <View style={{width: '100%', height: 600}}>
+        <View style={{ width: '100%', height: 600 }}>
           {new Array(numberOfComponents).fill(0).map((_, idx) => {
             return (
               <View
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/NestedScrollingExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/NestedScrollingExample.tsx
index 0027ed417d1ed874f0b304e49cdb7660f68afd3e..1ec7d41424610a8d39e4cc3db5e8f2084b429268 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/NestedScrollingExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/NestedScrollingExample.tsx
@@ -17,12 +17,12 @@ import {
 
 export const NestedScrollingExample = () => {
   return (
-    <ScrollView style={{backgroundColor: 'yellow'}} bounces>
+    <ScrollView style={{ backgroundColor: 'yellow' }} bounces>
       <View style={styles.view1} />
       <View style={styles.view2} />
       <View style={styles.view1} />
       <VirtualizedList
-        style={{height: 400, backgroundColor: 'green', width: '50%'}}
+        style={{ height: 400, backgroundColor: 'green', width: '50%' }}
         data={GENERATED_DATA}
         bounces
         getItem={(_, index: number) => GENERATED_DATA[index]}
@@ -33,7 +33,7 @@ export const NestedScrollingExample = () => {
           index,
         })}
         inverted
-        renderItem={({item}: {item: ItemData}) => (
+        renderItem={({ item }: { item: ItemData }) => (
           <TouchableOpacity onPress={() => console.log(item.title)}>
             <Item title={item.title} />
           </TouchableOpacity>
@@ -46,7 +46,7 @@ export const NestedScrollingExample = () => {
   );
 };
 
-const GENERATED_DATA = Array.from({length: 100}, (_, index) => ({
+const GENERATED_DATA = Array.from({ length: 100 }, (_, index) => ({
   id: String(index),
   title: `Item ${index + 1}`,
 }));
@@ -55,9 +55,9 @@ type ItemData = {
   title: string;
 };
 
-const Item = ({title}: {title: string}) => (
-  <View style={{height: 48, padding: 16, borderBottomWidth: 1}}>
-    <Text style={{width: '100%', height: 24}}>{title}</Text>
+const Item = ({ title }: { title: string }) => (
+  <View style={{ height: 48, padding: 16, borderBottomWidth: 1 }}>
+    <Text style={{ width: '100%', height: 24 }}>{title}</Text>
   </View>
 );
 
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/SafeAreaViewExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/SafeAreaViewExample.tsx
index 0d4cf695c328b2aa24b64e237e7f8e9147a91d48..82ef5a3e01ed931e83ed6dc06c38eadf0e8c3df3 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/SafeAreaViewExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/SafeAreaViewExample.tsx
@@ -5,9 +5,9 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {useState} from 'react';
-import {SafeAreaView, StatusBar, View} from 'react-native';
-import {Button} from '../components';
+import { useState } from 'react';
+import { SafeAreaView, StatusBar, View } from 'react-native';
+import { Button } from '../components';
 
 export function SafeAreaViewExample() {
   const [isStatusBarHidden, setIsStatusBarHidden] = useState(false);
@@ -15,8 +15,8 @@ export function SafeAreaViewExample() {
   return (
     <>
       <StatusBar hidden={isStatusBarHidden} />
-      <SafeAreaView style={{backgroundColor: 'red', flex: 1}}>
-        <View style={{backgroundColor: 'green', flex: 1}}>
+      <SafeAreaView style={{ backgroundColor: 'red', flex: 1 }}>
+        <View style={{ backgroundColor: 'green', flex: 1 }}>
           <Button
             onPress={() => {
               setIsStatusBarHidden(prev => !prev);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/StickyHeadersExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/StickyHeadersExample.tsx
index 7606306d850eddd94bc2945f0337c56f6d575036..70867a71366c0b8ec6ca012afecf9dcb7d01fc82 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/StickyHeadersExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/StickyHeadersExample.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {StyleSheet, Text, View, SectionList} from 'react-native';
+import { StyleSheet, Text, View, SectionList } from 'react-native';
 
 const DATA = [
   {
@@ -31,12 +31,12 @@ export const StickyHeadersExample = () => (
   <SectionList
     sections={DATA}
     keyExtractor={(item, index) => item + index}
-    renderItem={({item}) => (
+    renderItem={({ item }) => (
       <View style={styles.item}>
         <Text style={styles.title}>{item}</Text>
       </View>
     )}
-    renderSectionHeader={({section: {title}}) => (
+    renderSectionHeader={({ section: { title } }) => (
       <Text style={styles.header}>{title}</Text>
     )}
     stickySectionHeadersEnabled
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/TabsAndScrollViewExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/TabsAndScrollViewExample.tsx
index 39adb3576a866cbda6d96ebb53e9a6cb1ecba472..5d7c76f6cbe11569730722ddd9b5094116f16b27 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/TabsAndScrollViewExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/TabsAndScrollViewExample.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import {
   Animated,
   DeviceEventEmitter,
@@ -51,8 +51,8 @@ export class TabsAndScrollViewExample extends Component<any, any> {
       height: Dimensions.get('window').height,
       slideDirection: 'slideDown',
       oldSlideDirection: 'slideDown',
-      slideUpViewStyle: {zIndex: 2, opacity: 1},
-      slideDownViewStyle: {zIndex: -1, opacity: 2},
+      slideUpViewStyle: { zIndex: 2, opacity: 1 },
+      slideDownViewStyle: { zIndex: -1, opacity: 2 },
     };
     this.appScrollView = React.createRef();
     this.slideUpViewObj = React.createRef();
@@ -65,8 +65,8 @@ export class TabsAndScrollViewExample extends Component<any, any> {
       if (this.slideDirection !== 'slideUp') {
         this.slideDirection = 'slideUp';
         this.setState({
-          slideUpViewStyle: {zIndex: 2, opacity: 1},
-          slideDownViewStyle: {zIndex: -1, opacity: 0},
+          slideUpViewStyle: { zIndex: 2, opacity: 1 },
+          slideDownViewStyle: { zIndex: -1, opacity: 0 },
         });
       }
     } else if (Math.ceil(this.scrollViewStartOffsetY) > scrollY) {
@@ -74,15 +74,15 @@ export class TabsAndScrollViewExample extends Component<any, any> {
       if (this.slideDirection !== 'slideDown') {
         this.slideDirection = 'slideDown';
         this.setState({
-          slideUpViewStyle: {zIndex: -1, opacity: 0},
-          slideDownViewStyle: {zIndex: 2, opacity: 1},
+          slideUpViewStyle: { zIndex: -1, opacity: 0 },
+          slideDownViewStyle: { zIndex: 2, opacity: 1 },
         });
       }
     }
     if (scrollY === 0) {
       this.setState({
-        slideUpViewStyle: {zIndex: 2, opacity: 1},
-        slideDownViewStyle: {zIndex: -1, opacity: 0},
+        slideUpViewStyle: { zIndex: 2, opacity: 1 },
+        slideDownViewStyle: { zIndex: -1, opacity: 0 },
       });
     }
     this.scrollViewStartOffsetY = scrollY;
@@ -109,49 +109,49 @@ export class TabsAndScrollViewExample extends Component<any, any> {
     );
     return this.state.resultList.length > 0
       ? images.map((image, imageIndex) => {
-          return (
-            <View
-              style={{
-                width: 300,
-                height: 140,
-                borderRadius: 40,
-                borderWidth: 5,
-                backgroundColor: 'pink',
+        return (
+          <View
+            style={{
+              width: 300,
+              height: 140,
+              borderRadius: 40,
+              borderWidth: 5,
+              backgroundColor: 'pink',
+            }}
+            key={imageIndex}>
+            <ImageBackground
+              source={{
+                uri: 'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
               }}
-              key={imageIndex}>
-              <ImageBackground
-                source={{
-                  uri: 'https://images.unsplash.com/photo-1556740749-887f6717d7e4',
-                }}
+              style={{
+                flex: 1,
+                marginVertical: 4,
+                marginHorizontal: 16,
+                borderRadius: 5,
+                overflow: 'hidden',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+              <View
                 style={{
-                  flex: 1,
-                  marginVertical: 4,
-                  marginHorizontal: 16,
+                  backgroundColor: 'rgba(0,0,0, 0.7)',
+                  paddingHorizontal: 24,
+                  paddingVertical: 8,
                   borderRadius: 5,
-                  overflow: 'hidden',
-                  alignItems: 'center',
-                  justifyContent: 'center',
                 }}>
-                <View
+                <Text
                   style={{
-                    backgroundColor: 'rgba(0,0,0, 0.7)',
-                    paddingHorizontal: 24,
-                    paddingVertical: 8,
-                    borderRadius: 5,
+                    color: 'white',
+                    fontSize: 16,
+                    fontWeight: 'bold',
                   }}>
-                  <Text
-                    style={{
-                      color: 'white',
-                      fontSize: 16,
-                      fontWeight: 'bold',
-                    }}>
-                    {'Image - ' + imageIndex}
-                  </Text>
-                </View>
-              </ImageBackground>
-            </View>
-          );
-        })
+                  {'Image - ' + imageIndex}
+                </Text>
+              </View>
+            </ImageBackground>
+          </View>
+        );
+      })
       : null;
   };
   renderFlatList = () => {
@@ -172,7 +172,7 @@ export class TabsAndScrollViewExample extends Component<any, any> {
           [
             {
               nativeEvent: {
-                contentOffset: {y: this.scrollY},
+                contentOffset: { y: this.scrollY },
               },
             },
           ],
@@ -216,7 +216,7 @@ export class TabsAndScrollViewExample extends Component<any, any> {
         }}>
         {sortFiledList.map((item, index) => (
           <View
-            style={{backgroundColor: 'yellow', width: '25%'}}
+            style={{ backgroundColor: 'yellow', width: '25%' }}
             key={item.sortCode + '_' + index}>
             {item.sortCode !== '-1' ? (
               <TouchableWithoutFeedback
@@ -253,7 +253,7 @@ export class TabsAndScrollViewExample extends Component<any, any> {
                   <Text
                     ellipsizeMode={'tail'}
                     numberOfLines={1}
-                    style={{fontSize: 12}}>
+                    style={{ fontSize: 12 }}>
                     {item.sortName}
                   </Text>
                 </View>
@@ -286,8 +286,8 @@ export class TabsAndScrollViewExample extends Component<any, any> {
               ],
             },
           ]}>
-          <View style={{height: 56, backgroundColor: 'green'}} />
-          <View style={{height: 94, backgroundColor: 'green'}} />
+          <View style={{ height: 56, backgroundColor: 'green' }} />
+          <View style={{ height: 94, backgroundColor: 'green' }} />
           {this.renderSort()}
         </Animated.View>
         <View
@@ -303,8 +303,8 @@ export class TabsAndScrollViewExample extends Component<any, any> {
             },
             this.state.slideDownViewStyle,
           ]}>
-          <View style={{height: 56, backgroundColor: 'green'}} />
-          <View style={{height: 94, backgroundColor: 'green'}} />
+          <View style={{ height: 56, backgroundColor: 'green' }} />
+          <View style={{ height: 94, backgroundColor: 'green' }} />
           {this.renderSort()}
         </View>
       </>
@@ -313,7 +313,7 @@ export class TabsAndScrollViewExample extends Component<any, any> {
   render() {
     return (
       <SafeAreaView>
-        <View style={{width: '100%', height: 40, backgroundColor: 'grey'}}>
+        <View style={{ width: '100%', height: 40, backgroundColor: 'grey' }}>
           <View>
             {this.renderFlatList()}
             {this.renderHeader()}
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/TestTextsExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/TestTextsExample.tsx
index 0d0ec415c66a3efa261db74508a959dca6caf997..b55594957e7f60c3fe46aaf35a48c47c8feb0b33 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/TestTextsExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/TestTextsExample.tsx
@@ -7,10 +7,10 @@
 
 import { Tester, Filter } from '@rnoh/testerino';
 import * as React from 'react';
-import {ScrollView, StyleSheet} from 'react-native';
-import {TextTest} from '../tests';
+import { ScrollView, StyleSheet } from 'react-native';
+import { TextTest } from '../tests';
 
-export function TextTestsExample({filter}: {filter: Filter}) {
+export function TextTestsExample({ filter }: { filter: Filter }) {
   return (
     <Tester filter={filter}>
       <ScrollView style={styles.container}>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/TesterExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/TesterExample.tsx
index 1a207e366a9457afe079b15e63aeb95e8db497a8..bbdad726f80c671360ae833a2c52a6b32857059e 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/TesterExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/TesterExample.tsx
@@ -7,14 +7,14 @@
 
 import { Tester, Filter } from '@rnoh/testerino';
 import * as React from 'react';
-import {ScrollView, StyleSheet} from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 import * as tests from '../tests';
 
-export function TesterExample({filter}: {filter: Filter}) {
+export function TesterExample({ filter }: { filter: Filter }) {
   const scrollRef = React.useRef<ScrollView>(null);
 
   return (
-    <Tester style={{flex: 1}} filter={filter}>
+    <Tester style={{ flex: 1 }} filter={filter}>
       <ScrollView style={styles.container} ref={scrollRef}>
         {Object.keys(tests).map(testSuiteName => {
           const TestSuite = tests[testSuiteName as keyof typeof tests];
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/TextScrollExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/TextScrollExample.tsx
index a91ebfe060e382bfa3442cc4cf465b1ab474ebb7..90f5299e1816c2e08b261b4e480afe5cca298e8a 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/TextScrollExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/TextScrollExample.tsx
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
-import {ScrollView, Text, TextInput, View} from 'react-native';
+import React, { useState } from 'react';
+import { ScrollView, Text, TextInput, View } from 'react-native';
 
 export function TextScrollExample() {
   const [numberOfComponents, setNumberOfComponents] = useState(100);
@@ -24,9 +24,9 @@ export function TextScrollExample() {
   };
 
   const textWidgetsArray = Array.from(
-    {length: numberOfComponents},
+    { length: numberOfComponents },
     (_, index) => (
-      <Text key={index} style={{height: 53}}>
+      <Text key={index} style={{ height: 53 }}>
         {generateRandomText(100)}
       </Text>
     ),
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/TogglingComponentExample.tsx b/docs/Samples/Sample/SampleProject/MainProject/examples/TogglingComponentExample.tsx
index a78f9d666423492aded3bd1c4175a4dfd041871e..d955535b7b5e39dbf27deabe6fa3e73fa9c9876d 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/TogglingComponentExample.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/TogglingComponentExample.tsx
@@ -5,9 +5,9 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {useEffect, useState} from 'react';
-import {ScrollView, Text, View} from 'react-native';
-import {randomizeColor} from '../components';
+import { useEffect, useState } from 'react';
+import { ScrollView, Text, View } from 'react-native';
+import { randomizeColor } from '../components';
 
 export function TogglingComponentExample() {
   const [isComponentVisible, setIsComponentVisible] = useState(false);
@@ -22,13 +22,13 @@ export function TogglingComponentExample() {
   }, []);
 
   return (
-    <View style={{flexDirection: 'column', flex: 1}}>
-      <ScrollView style={{flex: 1, width: '100%'}}>
+    <View style={{ flexDirection: 'column', flex: 1 }}>
+      <ScrollView style={{ flex: 1, width: '100%' }}>
         {new Array(100).fill(0).map((_, id) => {
           return <Item key={id} id={id} width={'100%'} />;
         })}
       </ScrollView>
-      <View style={{flex: 1, width: '100%'}}>
+      <View style={{ flex: 1, width: '100%' }}>
         {isComponentVisible &&
           new Array(500).fill(0).map((_, id) => {
             return <Item2 key={id} id={id} width={100} />;
@@ -38,17 +38,17 @@ export function TogglingComponentExample() {
   );
 }
 
-function Item(props: {id: number; width: any}) {
+function Item(props: { id: number; width: any }) {
   const [color] = useState(randomizeColor());
 
   return (
-    <View style={{width: props.width, height: 100, backgroundColor: color}}>
-      <Text style={{height: 24, width: '100%'}}>{props.id}</Text>
+    <View style={{ width: props.width, height: 100, backgroundColor: color }}>
+      <Text style={{ height: 24, width: '100%' }}>{props.id}</Text>
     </View>
   );
 }
 
-function Item2(props: {id: number; width: any}) {
+function Item2(props: { id: number; width: any }) {
   const [color] = useState(randomizeColor());
 
   return (
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/AnimationsExampleEntry.js b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/AnimationsExampleEntry.js
index 1e71519f9975f43d605ab55f3a00d2ab75c6ea39..2d7f93f326b3b03cae4b4133a7c3598dc608ad17 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/AnimationsExampleEntry.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/AnimationsExampleEntry.js
@@ -10,8 +10,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import {name as appName} from '../../app.json';
-import {AnimationsExample} from '../AnimationsExample';
+import { AppRegistry } from 'react-native';
+import { name as appName } from '../../app.json';
+import { AnimationsExample } from '../AnimationsExample';
 
 AppRegistry.registerComponent(appName, () => AnimationsExample);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/CheckerboardExampleEntry.js b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/CheckerboardExampleEntry.js
index 8521cc1a337d9756c839ff1f65277edaece4aac8..05a23e42669429a3dfe258c0865839a899103a8e 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/CheckerboardExampleEntry.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/CheckerboardExampleEntry.js
@@ -10,8 +10,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import {name as appName} from '../../app.json';
-import {CheckerboardExample} from '../CheckerboardExample';
+import { AppRegistry } from 'react-native';
+import { name as appName } from '../../app.json';
+import { CheckerboardExample } from '../CheckerboardExample';
 
 AppRegistry.registerComponent(appName, () => CheckerboardExample);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/ChessboardExampleEntry.js b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/ChessboardExampleEntry.js
index 768b6c2bb1c9453d816150138e4cde3f95cd80b6..4ac27b4db1476aa174c1f1323982ea7db3178715 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/ChessboardExampleEntry.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/ChessboardExampleEntry.js
@@ -10,8 +10,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import {name as appName} from '../../app.json';
-import {ChessboardExample} from '../ChessboardExample';
+import { AppRegistry } from 'react-native';
+import { name as appName } from '../../app.json';
+import { ChessboardExample } from '../ChessboardExample';
 
 AppRegistry.registerComponent(appName, () => ChessboardExample);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/CursorExampleEntry.js b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/CursorExampleEntry.js
index e65e4d153474be4a9c4b88efeb78ab1987ba8a54..078978b4dfed49d6f9af5230981174fec294c319 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/CursorExampleEntry.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/CursorExampleEntry.js
@@ -10,8 +10,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import {name as appName} from '../../app.json';
-import {CursorExample} from '../CursorExample';
+import { AppRegistry } from 'react-native';
+import { name as appName } from '../../app.json';
+import { CursorExample } from '../CursorExample';
 
 AppRegistry.registerComponent(appName, () => CursorExample);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/FlatListVsScrollViewExampleEntry.js b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/FlatListVsScrollViewExampleEntry.js
index 796dc05d208ac978e5a09c158eb2df8c17bb88a5..ad8ef4bedc65edbe1196a06bd18f9efce9193d42 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/FlatListVsScrollViewExampleEntry.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/FlatListVsScrollViewExampleEntry.js
@@ -10,8 +10,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import {name as appName} from '../../app.json';
-import {FlatListVsScrollViewExample} from '../FlatListVsScrollViewExample';
+import { AppRegistry } from 'react-native';
+import { name as appName } from '../../app.json';
+import { FlatListVsScrollViewExample } from '../FlatListVsScrollViewExample';
 
 AppRegistry.registerComponent(appName, () => FlatListVsScrollViewExample);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/ManyComponentsExampleEntry.js b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/ManyComponentsExampleEntry.js
index d04ff30291347cc56efa30dd89eff86c0c54d77d..6cd5e83b3cc33abc18e6458bc192656487549b92 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/ManyComponentsExampleEntry.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/ManyComponentsExampleEntry.js
@@ -10,8 +10,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import {name as appName} from '../../app.json';
-import {ManyComponentsExample} from '../ManyComponentsExample';
+import { AppRegistry } from 'react-native';
+import { name as appName } from '../../app.json';
+import { ManyComponentsExample } from '../ManyComponentsExample';
 
 AppRegistry.registerComponent(appName, () => ManyComponentsExample);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/StickyHeadersEntry.js b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/StickyHeadersEntry.js
index cc108dbb7db328b6c3a3f25524a274e1d8c4cc49..c409bcb90ae31a71a71a56d4fa9fd3fef332c0ee 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/StickyHeadersEntry.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/StickyHeadersEntry.js
@@ -10,8 +10,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import {name as appName} from '../../app.json';
-import {StickyHeadersExample} from '../StickyHeadersExample';
+import { AppRegistry } from 'react-native';
+import { name as appName } from '../../app.json';
+import { StickyHeadersExample } from '../StickyHeadersExample';
 
 AppRegistry.registerComponent(appName, () => StickyHeadersExample);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/TabsAndScrollViewEntry.js b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/TabsAndScrollViewEntry.js
index a5434a7840196840327b3036fec55ee76807cc3f..00dbfc3f90d2a9ed083383396082c8f48e720d92 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/TabsAndScrollViewEntry.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/TabsAndScrollViewEntry.js
@@ -10,8 +10,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import {name as appName} from '../../app.json';
-import {TabsAndScrollViewExample} from '../TabsAndScrollViewExample';
+import { AppRegistry } from 'react-native';
+import { name as appName } from '../../app.json';
+import { TabsAndScrollViewExample } from '../TabsAndScrollViewExample';
 
 AppRegistry.registerComponent(appName, () => TabsAndScrollViewExample);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/TextScrollExampleEntry.js b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/TextScrollExampleEntry.js
index 55e85cab2eb9b9fd19db833bb2c419fe162e6c65..d8f45e7d839c63f28aa5f065b71475d025184dd2 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/examples/entries/TextScrollExampleEntry.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/examples/entries/TextScrollExampleEntry.js
@@ -10,8 +10,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
-import {name as appName} from '../../app.json';
-import {TextScrollExample} from '../TextScrollExample';
+import { AppRegistry } from 'react-native';
+import { name as appName } from '../../app.json';
+import { TextScrollExample } from '../TextScrollExample';
 
 AppRegistry.registerComponent(appName, () => TextScrollExample);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/goods.config.js b/docs/Samples/Sample/SampleProject/MainProject/goods.config.js
index 5780b5caaad6948e564f8bca294a193583a54e25..6ca67b204a858bb2de0897a454c8d2283064be96 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/goods.config.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/goods.config.js
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 const path = require('path');
 const projectRootPath = path.join(__dirname);
 const moduleId = require('./build/multibundle/moduleId');
diff --git a/docs/Samples/Sample/SampleProject/MainProject/homepage.config.js b/docs/Samples/Sample/SampleProject/MainProject/homepage.config.js
index 953bab98dd33d96da3c5a24564854502cff7e9db..ccf289812de3d2498ca983b0b88110b494023255 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/homepage.config.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/homepage.config.js
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 const path = require('path');
 const projectRootPath = path.join(__dirname);
 const moduleId = require('./build/multibundle/moduleId');
diff --git a/docs/Samples/Sample/SampleProject/MainProject/index.js b/docs/Samples/Sample/SampleProject/MainProject/index.js
index e914bf68707f593f2ee3dbad2bb54a8e0368e3dd..531cbd2989816541f81807323551232e0a4a38c6 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/index.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/index.js
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {AppRegistry, Text, View, StyleSheet} from 'react-native';
+import { AppRegistry, Text, View, StyleSheet } from 'react-native';
 import AppGoods from './src/bundles/Goods/GoodsMainPage';
 import AppHome from './src/bundles/HomePage/HomePage';
 
@@ -17,11 +17,11 @@ import SandBox from './src/bundles/Sandbox/examples'
 // 使用setWrapperComponentProvider来包装根组件。
 // children: 渲染RN侧组件；<Text> 鸿蒙侧传递过来的数据内容。
 AppRegistry.setWrapperComponentProvider(appParams => {
-    return function({children, ...otherProps}) {
-        if (Object.keys(otherProps.initialProps).includes('styles') && 
-        Object.keys(otherProps.initialProps).includes('stringParam')) {
+    return function ({ children, ...otherProps }) {
+        if (Object.keys(otherProps.initialProps).includes('styles') &&
+            Object.keys(otherProps.initialProps).includes('stringParam')) {
             return <View style={otherProps.initialProps.styles.container}>
-                <View style={{'borderRadius': 10, 'backgroundColor': '#FAE6B1', height: 100, justifyContent: 'center', alignItems: 'center'}}>
+                <View style={{ 'borderRadius': 10, 'backgroundColor': '#FAE6B1', height: 100, justifyContent: 'center', alignItems: 'center' }}>
                     <Text style={otherProps.initialProps.styles.apiFontSize}>{otherProps.initialProps.stringParam}</Text>
                 </View>
                 <View>{children}</View>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/metro.config.js b/docs/Samples/Sample/SampleProject/MainProject/metro.config.js
index 872aa76384801ee14e66fff061ce09a8195e437b..85804fb299d98bb8e3c328579095ba5929d971de 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/metro.config.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/metro.config.js
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 /**
  * @type {import("metro-config").ConfigT}
diff --git a/docs/Samples/Sample/SampleProject/MainProject/sandbox.config.js b/docs/Samples/Sample/SampleProject/MainProject/sandbox.config.js
index b305a4a6320d7785ae738122041434e2720017dd..49ebabffbbf176f04a0f1759eb352eceb17b8b32 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/sandbox.config.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/sandbox.config.js
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 const path = require('path');
 const projectRootPath = path.join(__dirname);
 const moduleId = require('./build/multibundle/moduleId');
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Details/DetailsMainPage.tsx b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Details/DetailsMainPage.tsx
index c30e1eebf50d5692590c46d0fa4349acfb8a192d..9f3d5db70e883a75d3b5669f611077fd81ec7157 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Details/DetailsMainPage.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Details/DetailsMainPage.tsx
@@ -5,9 +5,9 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {Text, StyleSheet, View, Animated, Pressable} from 'react-native';
-import React, {useEffect, useRef} from 'react';
-import SampleTurboModule2, {ResultModel} from '../basic/SampleTurboModule2';
+import { Text, StyleSheet, View, Animated, Pressable } from 'react-native';
+import React, { useEffect, useRef } from 'react';
+import SampleTurboModule2, { ResultModel } from '../basic/SampleTurboModule2';
 
 function AppDetails() {
   const zIndexAnim = useRef(new Animated.Value(0)).current;
@@ -38,7 +38,7 @@ function AppDetails() {
         style={[
           styles.textContainer,
           styles.box1,
-          {opacity: opacityInterpolation},
+          { opacity: opacityInterpolation },
         ]}>
         <Text style={styles.apiFontSize}>容器1和文字由RN渲染</Text>
       </Animated.View>
@@ -46,12 +46,12 @@ function AppDetails() {
         style={[
           styles.textContainer,
           styles.box2,
-          {opacity: opacityInterpolation},
+          { opacity: opacityInterpolation },
         ]}>
         <Text style={styles.apiFontSize}>容器2和文字由RN渲染</Text>
       </Animated.View>
       <Pressable
-        style={{height: 200}}
+        style={{ height: 200 }}
         onPress={() => {
           SampleTurboModule2.getRequest()
             .then((result: ResultModel) => {
@@ -62,7 +62,7 @@ function AppDetails() {
               console.log(JSON.stringify(err));
             });
         }}>
-        <Text style={[styles.apiFontSize, {backgroundColor: '#FF8080'}]}>
+        <Text style={[styles.apiFontSize, { backgroundColor: '#FF8080' }]}>
           点击获取网络请求数据
         </Text>
       </Pressable>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Details/index.js b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Details/index.js
index 64520539e1c5fddae7effe0d32bcdbefb4f5b35a..3a75394bd2d17fb27af1837ba33891a6e1087273 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Details/index.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Details/index.js
@@ -7,20 +7,20 @@
  * @format
  */
 
-import {AppRegistry, View, Text} from 'react-native';
+import { AppRegistry, View, Text } from 'react-native';
 import AppDetails from './DetailsMainPage';
 import React from 'react';
 
 // 使用setWrapperComponentProvider来包装根组件。
 // children: 渲染RN侧组件；<Text> 鸿蒙侧传递过来的数据内容。
 AppRegistry.setWrapperComponentProvider(appParams => {
-    return function({children, ...otherProps}) {
+    return function ({ children, ...otherProps }) {
         return <View style={otherProps.initialProps.styles.container}>
-                <View style={{'borderRadius': 10, 'backgroundColor': 'blue', height: 100, justifyContent: 'center'}}>
-                    <Text style={otherProps.initialProps.styles.apiFontSize}>{otherProps.initialProps.stringParam}</Text>
-                </View>
-                <View>{children}</View>
+            <View style={{ 'borderRadius': 10, 'backgroundColor': 'blue', height: 100, justifyContent: 'center' }}>
+                <Text style={otherProps.initialProps.styles.apiFontSize}>{otherProps.initialProps.stringParam}</Text>
             </View>
+            <View>{children}</View>
+        </View>
     }
 });
 
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Goods/GoodsButton.tsx b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Goods/GoodsButton.tsx
index 948cced67b3885b2c26ed6fb28af9df070bc21fe..0bc996269cd6cc4b28cb64975583b99bc76697df 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Goods/GoodsButton.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Goods/GoodsButton.tsx
@@ -6,13 +6,13 @@
  */
 
 import React from 'react';
-import {Pressable, Text, StyleSheet} from 'react-native';
+import { Pressable, Text, StyleSheet } from 'react-native';
 
-const GoodsButton = ({onPress, buttonText}) => {
+const GoodsButton = ({ onPress, buttonText }) => {
   return (
     <Pressable
       style={styles.textContainer}
-      hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
+      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
       onPress={onPress}>
       <Text style={styles.titleTextFont}>{buttonText}</Text>
     </Pressable>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Goods/GoodsMainPage.tsx b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Goods/GoodsMainPage.tsx
index aaf3b465b305c06e7d455258c5bbb3c193e00143..726fc658146e3443beab9ccaf27f029fc9b3d0b4 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Goods/GoodsMainPage.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Goods/GoodsMainPage.tsx
@@ -6,7 +6,7 @@
  */
 
 import * as React from 'react';
-import {useState, useRef} from 'react';
+import { useState, useRef } from 'react';
 import {
   Text,
   StyleSheet,
@@ -57,7 +57,7 @@ function AppGoods() {
         <MarqueeView
           src="双十一大促，消费是社会再生产过程中的一个重要环节，也是最终环节。它是指利用社会产品来满足人们各种需要的过程。"
           ref={nativeRef}
-          style={{height: 180, width: '100%', backgroundColor: '#1980E6'}}
+          style={{ height: 180, width: '100%', backgroundColor: '#1980E6' }}
           onStop={(e) => {
             SampleTurboModule.rnLog(
               'native调用了RN的 onStop，isStop = ' + e.nativeEvent.isStop,
@@ -66,12 +66,12 @@ function AppGoods() {
           }}
         />
 
-      if (isCAPI) {
+        if (isCAPI) {
           <ButtonView
             buttonText={'ButtonView: ' + (buttonClick ? 'Click' : 'No Click')}
             ref={nativeRefButton}
-            style={{height: 50, width: 200, backgroundColor: 'blue'}}
-        onButtonClick={(e) => {
+            style={{ height: 50, width: 200, backgroundColor: 'blue' }}
+            onButtonClick={(e) => {
               setButtonClick(e.nativeEvent.isButtonClick);
             }}
           />
@@ -162,7 +162,7 @@ function AppGoods() {
         <GoodsButton
           buttonText={'•调用TurboModule2的getObject方法'}
           onPress={() => {
-            SampleTurboModule2.getObject({x: 100});
+            SampleTurboModule2.getObject({ x: 100 });
           }}
         />
         <GoodsButton
@@ -197,7 +197,7 @@ function AppGoods() {
                   '调用TurboModule2的checkPwd回调了success',
                 );
               },
-              () => {},
+              () => { },
             );
           }}
         />
@@ -206,7 +206,7 @@ function AppGoods() {
             '•点击上方的跑马灯接收原生发送的消息：native -> js = ' +
             nativeEmitterParam
           }
-          onPress={() => {}}
+          onPress={() => { }}
         />
         <GoodsButton
           buttonText={
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Goods/index.js b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Goods/index.js
index 0eab3a3db5d36944aa525a83a710d649200bde2e..50d20ce92758622f71c7f1e544618af24e082460 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Goods/index.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Goods/index.js
@@ -7,7 +7,7 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import AppGoods from './GoodsMainPage';
 
 AppRegistry.registerComponent('Goods', () => AppGoods);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/CategoryButton.tsx b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/CategoryButton.tsx
index fac3b6c200d0a1c85b5bf81d1f636c625a6ac0ce..453a3c7efca70652de5b5822348fb3ff5df63af6 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/CategoryButton.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/CategoryButton.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {Text, TouchableHighlight, StyleProp, TextStyle} from 'react-native';
+import { Text, TouchableHighlight, StyleProp, TextStyle } from 'react-native';
 
 export interface ButtonProps {
   label: string;
@@ -32,7 +32,7 @@ export default function CategoryButton({
         justifyContent: 'center',
       }}
       onPress={onPress}>
-      <Text style={[{color: 'white', marginTop: 40}, textStyle]}>{label}</Text>
+      <Text style={[{ color: 'white', marginTop: 40 }, textStyle]}>{label}</Text>
     </TouchableHighlight>
   );
 }
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/HomeListPage.tsx b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/HomeListPage.tsx
index 2b80a950e67fb425c5cfb4ab27b2a600dd4866b7..a797af884e1e841044612ce21ee1391b69cfce3d 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/HomeListPage.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/HomeListPage.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
 
 export interface GoodsProps {
   name: string;
@@ -17,7 +17,7 @@ export interface ListProps {
   goods: GoodsProps[];
 }
 
-export default function HomeListPage({goods}: ListProps) {
+export default function HomeListPage({ goods }: ListProps) {
   return (
     <View style={styles.container}>
       {goods.map((good, index) => (
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/HomePage.tsx b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/HomePage.tsx
index 61a78eae2cdaba80d6b3737e316a0ae58306afd5..7b8461349abc7547b7649fda538a3b94d6e5260c 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/HomePage.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/HomePage.tsx
@@ -6,27 +6,27 @@
  */
 
 import * as React from 'react';
-import {useCallback, useRef, useState} from 'react';
+import { useCallback, useRef, useState } from 'react';
 import HomeListPage from './HomeListPage';
-import {GoodsProps} from './HomeListPage';
+import { GoodsProps } from './HomeListPage';
 import CategoryButton from './CategoryButton';
 import PagerView from 'react-native-pager-view';
-import type {PagerViewOnPageSelectedEvent} from 'react-native-pager-view';
+import type { PagerViewOnPageSelectedEvent } from 'react-native-pager-view';
 
-import {SafeAreaView, ScrollView, StyleSheet, View} from 'react-native';
+import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
 
 function App(): JSX.Element {
   const good0: GoodsProps = {
     name: '关注A',
-    onPress: () => {},
+    onPress: () => { },
   };
   const good1: GoodsProps = {
     name: '品牌A',
-    onPress: () => {},
+    onPress: () => { },
   };
   const good2: GoodsProps = {
     name: '直播A',
-    onPress: () => {},
+    onPress: () => { },
   };
   const categories = ['关注', '推荐', '直播'];
   const goods = [
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/index.js b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/index.js
index 036f39a79d663d39a3cfafddcf87edbd2eb975b1..b39fe81b73990b10e7f386ee5c9c512b6ca20ca7 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/index.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/HomePage/index.js
@@ -7,7 +7,7 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import AppHome from './HomePage';
 
 AppRegistry.registerComponent('HomePage', () => AppHome);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Sandbox/examples.tsx b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Sandbox/examples.tsx
index 1bff2b02afb260fcaafc5d056578400373d8e126..75f77dfe4c4c82b2d1a7b46ff85c433f9bfd04b3 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Sandbox/examples.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Sandbox/examples.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {Text, Image, View, StyleSheet} from 'react-native';
+import { Text, Image, View, StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
   //创建样式
@@ -26,7 +26,7 @@ const Sandbox = () => {
         marginLeft: 'auto',
         marginRight: 'auto',
       }}>
-      <Text style={{fontWeight: 600, marginTop: 20}}>沙箱bundle渲染</Text>
+      <Text style={{ fontWeight: 600, marginTop: 20 }}>沙箱bundle渲染</Text>
       <View
         style={{
           display: 'flex',
@@ -43,7 +43,7 @@ const Sandbox = () => {
           }}
         />
         <Image
-          source={{uri: 'file:///data/storage/el2/base/files/call.png'}}
+          source={{ uri: 'file:///data/storage/el2/base/files/call.png' }}
           style={{
             width: 100,
             height: 100,
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Sandbox/index.js b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Sandbox/index.js
index 798dfcffc35f1897534a4accd99e384cc729cc84..40012f54fc7eddd0f146a3fd40f42e9ab446aa0d 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Sandbox/index.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/Sandbox/index.js
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './examples';
 
 AppRegistry.registerComponent('Sandbox', () => App);
\ No newline at end of file
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/ButtonView.tsx b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/ButtonView.tsx
index fa49b7422126bd65b11d13f24b15d78872cd0112..37e428f74b893a59488706b6959290e306213b56 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/ButtonView.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/ButtonView.tsx
@@ -10,7 +10,7 @@ import {
     HostComponent,
     requireNativeComponent,  // Fabric
 } from 'react-native';
-import type { 
+import type {
     DirectEventHandler
 } from "react-native/Libraries/Types/CodegenTypes";
 import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/ButtonViewNativeComponent.tsx b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/ButtonViewNativeComponent.tsx
index fa49b7422126bd65b11d13f24b15d78872cd0112..37e428f74b893a59488706b6959290e306213b56 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/ButtonViewNativeComponent.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/ButtonViewNativeComponent.tsx
@@ -10,7 +10,7 @@ import {
     HostComponent,
     requireNativeComponent,  // Fabric
 } from 'react-native';
-import type { 
+import type {
     DirectEventHandler
 } from "react-native/Libraries/Types/CodegenTypes";
 import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/MarqueeView.tsx b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/MarqueeView.tsx
index 242cd3e4564d09c303871f5cdcf72506d788c9e8..885d06bd3fa827c17df81cafb84f4a93bc4ce085 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/MarqueeView.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/MarqueeView.tsx
@@ -10,7 +10,7 @@ import {
     HostComponent,
     requireNativeComponent,  // Fabric
 } from 'react-native';
-import type { 
+import type {
     DirectEventHandler
 } from "react-native/Libraries/Types/CodegenTypes";
 import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/MarqueeViewNativeComponent.tsx b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/MarqueeViewNativeComponent.tsx
index 242cd3e4564d09c303871f5cdcf72506d788c9e8..885d06bd3fa827c17df81cafb84f4a93bc4ce085 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/MarqueeViewNativeComponent.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/MarqueeViewNativeComponent.tsx
@@ -10,7 +10,7 @@ import {
     HostComponent,
     requireNativeComponent,  // Fabric
 } from 'react-native';
-import type { 
+import type {
     DirectEventHandler
 } from "react-native/Libraries/Types/CodegenTypes";
 import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent";
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/NativeSampleTurboModule2.tsx b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/NativeSampleTurboModule2.tsx
index 5be4425a695eb935dbdca5c0457afc2380eb1612..a49835b4e07ee96c8448aa008f162e28a5dd80fa 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/NativeSampleTurboModule2.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/NativeSampleTurboModule2.tsx
@@ -17,8 +17,8 @@ export interface EnglishNovelModel {
     note: string
     dateline: string
     img: string
-  }
-  
+}
+
 export interface ResultModel {
     code: number
     result: EnglishNovelModel
@@ -31,12 +31,12 @@ export interface Error {
     stack?: string;
 }
 
-export interface SpecSampleTurboModule2 extends TurboModule {  
-    checkPwd(param:{}, success: (res: {})=>void, failure: (res: {})=>void): void;
+export interface SpecSampleTurboModule2 extends TurboModule {
+    checkPwd(param: {}, success: (res: {}) => void, failure: (res: {}) => void): void;
     eatFruit(fruit: Fruit): void;
     test(): void;
     getRequest(): Promise<ResultModel>;
-    getObject(obj:{}): void;
+    getObject(obj: {}): void;
 }
-  
+
 export default TurboModuleRegistry.getEnforcing<SpecSampleTurboModule2>('SampleTurboModule2');
\ No newline at end of file
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/SampleTurboModule2.tsx b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/SampleTurboModule2.tsx
index ebde92d251d72024f8a873a0ba307672f7810c19..fbcf4cc8a88571d69a47c74cba894272d612de07 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/SampleTurboModule2.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/basic/SampleTurboModule2.tsx
@@ -17,8 +17,8 @@ export interface EnglishNovelModel {
     note: string
     dateline: string
     img: string
-  }
-  
+}
+
 export interface ResultModel {
     code: number
     result: EnglishNovelModel
@@ -31,13 +31,13 @@ export interface Error {
     stack?: string;
 }
 
-export interface SpecSampleTurboModule2 extends TurboModule {  
-    checkPwd(param:{}, success: (res: {})=>void, failure: (res: {})=>void): void;
+export interface SpecSampleTurboModule2 extends TurboModule {
+    checkPwd(param: {}, success: (res: {}) => void, failure: (res: {}) => void): void;
     eatFruit(fruit: Fruit): void;
     test(): void;
     getRequest(): Promise<ResultModel>;
-    getObject(obj:{}): void;
+    getObject(obj: {}): void;
     callFunction(): void;
 }
-  
+
 export default TurboModuleRegistry.getEnforcing<SpecSampleTurboModule2>('SampleTurboModule2');
\ No newline at end of file
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/test/index.js b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/test/index.js
index c04f31f47297d67614f3da4c785c21621d0ccbf3..c61d89fe885efadca5b917a490809a23efb3680e 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/test/index.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/test/index.js
@@ -7,7 +7,7 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import AppTest from './testPage';
 
 AppRegistry.registerComponent('AppTest', () => AppTest);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/test/testPage.tsx b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/test/testPage.tsx
index a6cb317e493ec67a69a3f18b2ddebb6e010763f7..c56fa72ebe1f71c0effec8e465b945e11ce36115 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/src/bundles/test/testPage.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/src/bundles/test/testPage.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {ScrollView, StyleSheet, View} from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 import {
   AnimatedRenderExample,
   AnimationsExample,
@@ -23,9 +23,9 @@ import {
   TabsAndScrollViewExample,
   NestedScrollingExample,
 } from '../../../examples';
-import {NavigationContainer, Page} from '../../../components';
-import {Benchmarker, DeepTree, SierpinskiTriangle} from '../../../benchmarks';
-import {PortalHost, PortalProvider} from '@gorhom/portal';
+import { NavigationContainer, Page } from '../../../components';
+import { Benchmarker, DeepTree, SierpinskiTriangle } from '../../../benchmarks';
+import { PortalHost, PortalProvider } from '@gorhom/portal';
 import * as tests from '../../../tests';
 import { Tester } from '@rnoh/testerino';
 
@@ -40,8 +40,8 @@ function AppTest() {
             <Page
               key={testSuiteName}
               name={`TESTS: ${testSuiteName.replace('Test', '')}`}>
-              <Tester style={{flex: 1}}>
-                <ScrollView style={{flex: 1}}>
+              <Tester style={{ flex: 1 }}>
+                <ScrollView style={{ flex: 1 }}>
                   <TestSuite key={testSuiteName} />
                 </ScrollView>
               </Tester>
@@ -138,7 +138,7 @@ function AppTest() {
         <View
           style={[
             StyleSheet.absoluteFill,
-            {zIndex: 100, pointerEvents: 'box-none'},
+            { zIndex: 100, pointerEvents: 'box-none' },
           ]}>
           <PortalHost name="ModalHost" />
         </View>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/test.config.js b/docs/Samples/Sample/SampleProject/MainProject/test.config.js
index cfe11e13b620d8d9d228e7e5e54e7207fae32f80..5f2a44ef7d125d018bf881d654b67bd5e267b797 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/test.config.js
+++ b/docs/Samples/Sample/SampleProject/MainProject/test.config.js
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 const path = require('path');
 const projectRootPath = path.join(__dirname);
 const moduleId = require('./build/multibundle/moduleId');
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ActivityIndicatorTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ActivityIndicatorTest.tsx
index 4f681ba089e77b3763f3859d24cd5b1022ca6822..e6d6ed912d143eeacfa8d1571968d39dce97aed6 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ActivityIndicatorTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ActivityIndicatorTest.tsx
@@ -6,8 +6,8 @@
  */
 
 import { TestSuite, TestCase } from '@rnoh/testerino';
-import {useEffect, useState} from 'react';
-import {ActivityIndicator} from 'react-native';
+import { useEffect, useState } from 'react';
+import { ActivityIndicator } from 'react-native';
 
 // https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/290
 export function ActivityIndicatorTest() {
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/AlertTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/AlertTest.tsx
index 48ab0111228ae1afada21576a3e5044c9e983fff..76f7966f1cc86967529d056c5dff4860aaa25614 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/AlertTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/AlertTest.tsx
@@ -6,9 +6,9 @@
  */
 
 import { TestSuite, TestCase } from '@rnoh/testerino';
-import {Button} from '../components';
-import {Alert, Text, View} from 'react-native';
-import {useState} from 'react';
+import { Button } from '../components';
+import { Alert, Text, View } from 'react-native';
+import { useState } from 'react';
 
 export function AlertTest() {
   return (
@@ -16,38 +16,38 @@ export function AlertTest() {
       <TestCase
         itShould="show simple alert on click"
         initialState={false}
-        arrange={({setState, reset}) => (
-          <View style={{flexDirection: 'row'}}>
+        arrange={({ setState, reset }) => (
+          <View style={{ flexDirection: 'row' }}>
             <Button
               label="show alert"
               onPress={() => {
                 Alert.alert('Test Alert', 'Message', [
-                  {text: 'OK', onPress: () => setState(true)},
+                  { text: 'OK', onPress: () => setState(true) },
                 ]);
               }}
             />
             <Button label="reset" onPress={reset} />
           </View>
         )}
-        assert={({state, expect}) => {
+        assert={({ state, expect }) => {
           expect(state).to.be.true;
         }}
       />
       <TestCase
         itShould="display name of the button clicked in alert"
         initialState={false}
-        arrange={({setState, reset}) => (
+        arrange={({ setState, reset }) => (
           <AlertView setState={setState} reset={reset} />
         )}
-        assert={({state, expect}) => {
+        assert={({ state, expect }) => {
           expect(state).to.be.true;
         }}
       />
       <TestCase
         itShould="cancel alert on press outside its window"
         initialState={false}
-        arrange={({setState, reset}) => (
-          <View style={{flexDirection: 'row'}}>
+        arrange={({ setState, reset }) => (
+          <View style={{ flexDirection: 'row' }}>
             <Button
               label="show alert"
               onPress={() => {
@@ -60,7 +60,7 @@ export function AlertTest() {
             <Button label="reset" onPress={reset} />
           </View>
         )}
-        assert={({state, expect}) => {
+        assert={({ state, expect }) => {
           expect(state).to.be.true;
         }}
       />
@@ -84,13 +84,13 @@ const AlertView = (props: {
   return (
     <>
       <Text>{text}</Text>
-      <View style={{flexDirection: 'row'}}>
+      <View style={{ flexDirection: 'row' }}>
         <Button
           label="show alert"
           onPress={() => {
             Alert.alert('Test Alert', 'Message', [
-              {text: 'Cancel', onPress: cancelOnPress},
-              {text: 'OK', onPress: okOnPress},
+              { text: 'Cancel', onPress: cancelOnPress },
+              { text: 'OK', onPress: okOnPress },
             ]);
           }}
         />
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/AnimatedEasingTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/AnimatedEasingTest.tsx
index ee11963fdae873a0cac8624d2245a3d99c4e32e9..b211eb29a24ef8c291c13bbc9b971aa870483d3c 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/AnimatedEasingTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/AnimatedEasingTest.tsx
@@ -5,9 +5,9 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useRef} from 'react';
+import React, { useRef } from 'react';
 
-import {Animated, View, Easing, EasingFunction} from 'react-native';
+import { Animated, View, Easing, EasingFunction } from 'react-native';
 
 import { TestCase, TestSuite } from '@rnoh/testerino';
 
@@ -27,7 +27,7 @@ export function AnimatedEasingTest() {
   );
 }
 
-const EasingView = (props: {easing: EasingFunction}) => {
+const EasingView = (props: { easing: EasingFunction }) => {
   const translateValue = useRef(new Animated.Value(0)).current;
   const animation = Animated.timing(translateValue, {
     toValue: 200,
@@ -40,7 +40,7 @@ const EasingView = (props: {easing: EasingFunction}) => {
     animation.start();
   };
   return (
-    <View style={{height: 60, width: '100%'}} onTouchEnd={handleAnimation}>
+    <View style={{ height: 60, width: '100%' }} onTouchEnd={handleAnimation}>
       <Animated.View
         style={{
           height: 40,
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/AnimatedTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/AnimatedTest.tsx
index dee199f884de9921eae05ae9e3a7b3eabee4df2d..95f840caa70fb611a8ca364e9bdcc1f85334cb08 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/AnimatedTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/AnimatedTest.tsx
@@ -5,12 +5,12 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useRef, useState} from 'react';
+import React, { useRef, useState } from 'react';
 
-import {Animated, Pressable, Text, View} from 'react-native';
+import { Animated, Pressable, Text, View } from 'react-native';
 
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {Button} from '../components';
+import { Button } from '../components';
 
 export function AnimatedTest() {
   return (
@@ -119,11 +119,11 @@ const AnimatedScrollViewTestCase = () => {
         overflow: 'hidden',
       }}>
       <Animated.ScrollView
-        style={{width: '100%', height: '100%'}}
-        contentContainerStyle={{alignItems: 'center', justifyContent: 'center'}}
+        style={{ width: '100%', height: '100%' }}
+        contentContainerStyle={{ alignItems: 'center', justifyContent: 'center' }}
         scrollEventThrottle={16}
         onScroll={Animated.event(
-          [{nativeEvent: {contentOffset: {y: scrollY}}}],
+          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
           {
             useNativeDriver: true,
           },
@@ -147,7 +147,7 @@ const AnimatedScrollViewTestCase = () => {
           {
             position: 'absolute',
             bottom: 0,
-            transform: [{translateX: translation}],
+            transform: [{ translateX: translation }],
             width: 32,
             height: 32,
             backgroundColor: 'red',
@@ -158,7 +158,7 @@ const AnimatedScrollViewTestCase = () => {
   );
 };
 
-function FadeInOut({nativeDriver = false}) {
+function FadeInOut({ nativeDriver = false }) {
   const fadeAnim = React.useRef(new Animated.Value(1)).current;
 
   const handleFadePress = () => {
@@ -186,7 +186,7 @@ function FadeInOut({nativeDriver = false}) {
           opacity: fadeAnim,
           backgroundColor: 'red',
         }}>
-        <Text style={{width: 100, height: 48}}>
+        <Text style={{ width: 100, height: 48 }}>
           Press me to fade{nativeDriver && ' using native driver'}
         </Text>
       </Animated.View>
@@ -299,9 +299,9 @@ const AnimatedRotatingSquaresView = (props: {
 }) => {
   return (
     <Pressable
-      style={{height: 100, width: '100%'}}
+      style={{ height: 100, width: '100%' }}
       onPress={props.handleAnimation}>
-      <View style={{flexDirection: 'row'}}>
+      <View style={{ flexDirection: 'row' }}>
         <Animated.View
           style={{
             height: 50,
@@ -335,7 +335,7 @@ const AnimatedRotatingSquaresView = (props: {
           }}
         />
       </View>
-      <Text style={{height: 20}}>Press me to start animation</Text>
+      <Text style={{ height: 20 }}>Press me to start animation</Text>
     </Pressable>
   );
 };
@@ -353,7 +353,7 @@ const AnimatedPressableView = () => {
     animation.start();
   };
   return (
-    <View style={{height: 80, width: '100%'}}>
+    <View style={{ height: 80, width: '100%' }}>
       <AnimatedPressable
         style={{
           width: 100,
@@ -369,7 +369,7 @@ const AnimatedPressableView = () => {
           ],
         }}
         onPress={onPress}>
-        <Text style={{height: 40}}>Press me to start animation</Text>
+        <Text style={{ height: 40 }}>Press me to start animation</Text>
       </AnimatedPressable>
     </View>
   );
@@ -397,7 +397,7 @@ const Spring = () => {
   };
 
   return (
-    <Pressable style={{height: 120, width: '100%'}} onPress={handleAnimation}>
+    <Pressable style={{ height: 120, width: '100%' }} onPress={handleAnimation}>
       <Animated.View
         style={{
           height: 50,
@@ -428,7 +428,7 @@ const Spring = () => {
           ],
         }}
       />
-      <Text style={{height: 20}}>Press me to start animation</Text>
+      <Text style={{ height: 20 }}>Press me to start animation</Text>
     </Pressable>
   );
 };
@@ -455,7 +455,7 @@ const Decay = () => {
   };
 
   return (
-    <Pressable style={{height: 120, width: '100%'}} onPress={handleAnimation}>
+    <Pressable style={{ height: 120, width: '100%' }} onPress={handleAnimation}>
       <Animated.View
         style={{
           height: 50,
@@ -480,7 +480,7 @@ const Decay = () => {
           ],
         }}
       />
-      <Text style={{height: 20}}>Press me to start animation</Text>
+      <Text style={{ height: 20 }}>Press me to start animation</Text>
     </Pressable>
   );
 };
@@ -501,7 +501,7 @@ const Multiply = () => {
   };
 
   return (
-    <Pressable style={{height: 120, width: '100%'}} onPress={handleAnimation}>
+    <Pressable style={{ height: 120, width: '100%' }} onPress={handleAnimation}>
       <Animated.View
         style={{
           height: 50,
@@ -526,7 +526,7 @@ const Multiply = () => {
           ],
         }}
       />
-      <Text style={{height: 20}}>Press me to start animation</Text>
+      <Text style={{ height: 20 }}>Press me to start animation</Text>
     </Pressable>
   );
 };
@@ -550,7 +550,7 @@ const DiffClamp = () => {
   };
 
   return (
-    <Pressable style={{width: '100%'}} onPress={handleAnimation}>
+    <Pressable style={{ width: '100%' }} onPress={handleAnimation}>
       <Animated.View
         style={{
           height: 50,
@@ -563,32 +563,32 @@ const DiffClamp = () => {
           ],
         }}
       />
-      <Text style={{height: 20}}>Press me to start animation</Text>
+      <Text style={{ height: 20 }}>Press me to start animation</Text>
     </Pressable>
   );
 };
 
 const ValueXY = () => {
-  const square1Anim = useRef(new Animated.ValueXY({x: 50, y: 50})).current;
+  const square1Anim = useRef(new Animated.ValueXY({ x: 50, y: 50 })).current;
 
   const animation = Animated.sequence([
     Animated.timing(square1Anim, {
-      toValue: {x: 0, y: 0},
+      toValue: { x: 0, y: 0 },
       duration: 1000,
       useNativeDriver: true,
     }),
     Animated.timing(square1Anim, {
-      toValue: {x: 0, y: 50},
+      toValue: { x: 0, y: 50 },
       duration: 1000,
       useNativeDriver: true,
     }),
     Animated.timing(square1Anim, {
-      toValue: {x: 50, y: 0},
+      toValue: { x: 50, y: 0 },
       duration: 1000,
       useNativeDriver: true,
     }),
     Animated.timing(square1Anim, {
-      toValue: {x: 50, y: 50},
+      toValue: { x: 50, y: 50 },
       duration: 1000,
       useNativeDriver: true,
     }),
@@ -599,8 +599,8 @@ const ValueXY = () => {
   };
 
   return (
-    <Pressable style={{height: 120, width: '100%'}} onPress={handleAnimation}>
-      <View style={{height: 100}}>
+    <Pressable style={{ height: 120, width: '100%' }} onPress={handleAnimation}>
+      <View style={{ height: 100 }}>
         <Animated.View
           style={{
             height: 40,
@@ -617,7 +617,7 @@ const ValueXY = () => {
           }}
         />
       </View>
-      <Text style={{height: 20}}>Press me to start animation</Text>
+      <Text style={{ height: 20 }}>Press me to start animation</Text>
     </Pressable>
   );
 };
@@ -677,14 +677,14 @@ const TrackingValue = () => {
   };
 
   return (
-    <Pressable style={{height: 120, width: '100%'}} onPress={handleAnimation}>
-      <View style={{height: 100}}>
+    <Pressable style={{ height: 120, width: '100%' }} onPress={handleAnimation}>
+      <View style={{ height: 100 }}>
         <Animated.View
           style={{
             height: 40,
             width: 40,
             backgroundColor: 'red',
-            transform: [{translateX: square1Anim}],
+            transform: [{ translateX: square1Anim }],
           }}
         />
         <Animated.View
@@ -692,11 +692,11 @@ const TrackingValue = () => {
             height: 40,
             width: 40,
             backgroundColor: 'blue',
-            transform: [{translateX: square2Anim}],
+            transform: [{ translateX: square2Anim }],
           }}
         />
       </View>
-      <Text style={{height: 20}}>Press me to start animation</Text>
+      <Text style={{ height: 20 }}>Press me to start animation</Text>
     </Pressable>
   );
 };
@@ -716,7 +716,7 @@ const Modulo = () => {
   };
 
   return (
-    <Pressable style={{height: 120, width: '100%'}} onPress={handleAnimation}>
+    <Pressable style={{ height: 120, width: '100%' }} onPress={handleAnimation}>
       <Animated.View
         style={{
           height: 50,
@@ -741,7 +741,7 @@ const Modulo = () => {
           ],
         }}
       />
-      <Text style={{height: 20}}>Press me to start animation</Text>
+      <Text style={{ height: 20 }}>Press me to start animation</Text>
     </Pressable>
   );
 };
@@ -760,8 +760,8 @@ const Perspective = () => {
   };
 
   return (
-    <Pressable style={{height: 120, width: '100%'}} onPress={handleAnimation}>
-      <View style={{height: 100, justifyContent: 'center'}}>
+    <Pressable style={{ height: 120, width: '100%' }} onPress={handleAnimation}>
+      <View style={{ height: 100, justifyContent: 'center' }}>
         <Animated.View
           style={{
             height: 50,
@@ -778,7 +778,7 @@ const Perspective = () => {
           }}
         />
       </View>
-      <Text style={{height: 20}}>Press me to start animation</Text>
+      <Text style={{ height: 20 }}>Press me to start animation</Text>
     </Pressable>
   );
 };
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/AnimatedValueTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/AnimatedValueTest.tsx
index b5dd4424e8b42d1a3e0c8ffc7252e39936beeee8..f7e6be824581e3bbf399f892e58b2ae8f3c97cdf 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/AnimatedValueTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/AnimatedValueTest.tsx
@@ -5,10 +5,10 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useEffect, useRef, useState} from 'react';
-import {Animated, View, Text} from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, View, Text } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {Button, Effect} from '../components';
+import { Button, Effect } from '../components';
 
 export function AnimatedValueTest() {
   return (
@@ -17,10 +17,10 @@ export function AnimatedValueTest() {
         <TestCase
           itShould="move square 200px to the right and stop animation on pressing setValue"
           initialState={0}
-          arrange={({setState}) => (
+          arrange={({ setState }) => (
             <SetValueView singular setState={setState} />
           )}
-          assert={({expect, state}) => {
+          assert={({ expect, state }) => {
             expect(state).to.be.eq(200);
           }}
         />
@@ -35,8 +35,8 @@ export function AnimatedValueTest() {
         <TestCase
           itShould="move square 100px to the right and stop animation on pressing setValue"
           initialState={0}
-          arrange={({setState}) => <SetValueView setState={setState} />}
-          assert={({expect, state}) => {
+          arrange={({ setState }) => <SetValueView setState={setState} />}
+          assert={({ expect, state }) => {
             expect(state).to.be.eq(100);
           }}
         />
@@ -49,8 +49,8 @@ export function AnimatedValueTest() {
         <TestCase<Object>
           itShould="get layout of animated value on press"
           initialState={{}}
-          arrange={({setState}) => {
-            const animValue = new Animated.ValueXY({x: 1, y: 1});
+          arrange={({ setState }) => {
+            const animValue = new Animated.ValueXY({ x: 1, y: 1 });
             return (
               <Effect
                 onMount={() => {
@@ -59,9 +59,9 @@ export function AnimatedValueTest() {
               />
             );
           }}
-          assert={({state, expect}) => {
+          assert={({ state, expect }) => {
             expect(JSON.stringify(state)).to.be.eq(
-              JSON.stringify({left: 1, top: 1}),
+              JSON.stringify({ left: 1, top: 1 }),
             );
           }}
         />
@@ -92,7 +92,7 @@ const ExtractOffsetView = () => {
     ]),
   );
   return (
-    <View style={{width: '100%'}}>
+    <View style={{ width: '100%' }}>
       <Animated.View
         style={{
           height: 20,
@@ -106,7 +106,7 @@ const ExtractOffsetView = () => {
           ],
         }}
       />
-      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
         <Button
           label="start"
           onPress={() => {
@@ -138,7 +138,7 @@ const FlattenOffsetView = () => {
   );
   value.setOffset(100);
   return (
-    <View style={{width: '100%'}}>
+    <View style={{ width: '100%' }}>
       <Animated.View
         style={{
           height: 20,
@@ -152,7 +152,7 @@ const FlattenOffsetView = () => {
           ],
         }}
       />
-      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
         <Button
           label="start"
           onPress={() => {
@@ -171,9 +171,9 @@ const FlattenOffsetView = () => {
     </View>
   );
 };
-const SetOffsetView = (props: {singular: boolean}) => {
+const SetOffsetView = (props: { singular: boolean }) => {
   const animValue = useRef(new Animated.Value(0)).current;
-  const animValueXY = useRef(new Animated.ValueXY({x: 0, y: 0})).current;
+  const animValueXY = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
   if (props.singular) {
     return (
       <MovingSquare
@@ -187,18 +187,18 @@ const SetOffsetView = (props: {singular: boolean}) => {
       <MovingSquareXY
         animValueXY={animValueXY}
         labels={['set offset']}
-        onPresses={[() => animValueXY.setOffset({x: 100, y: 0})]}
+        onPresses={[() => animValueXY.setOffset({ x: 100, y: 0 })]}
       />
     );
   }
 };
 
-const ListenerView = (props: {singular: boolean}) => {
+const ListenerView = (props: { singular: boolean }) => {
   const [text, setText] = useState('');
   const [listeners, setListeners] = useState<string[]>([]);
   const animValue = useRef(new Animated.Value(0)).current;
-  const animValueXY = useRef(new Animated.ValueXY({x: 0, y: 0})).current;
-  const listener = () => {};
+  const animValueXY = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+  const listener = () => { };
   const addListener = () => {
     listeners.push(animValue.addListener(listener));
     setListeners(listeners);
@@ -247,17 +247,17 @@ const SetValueView = (props: {
   setState: React.Dispatch<React.SetStateAction<number>>;
 }) => {
   const animValue = useRef(new Animated.Value(0)).current;
-  const animValueXY = useRef(new Animated.ValueXY({x: 0, y: 0})).current;
+  const animValueXY = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
 
   useEffect(() => {
     if (props.singular) {
-      animValue.addListener(({value}) => {
+      animValue.addListener(({ value }) => {
         if (value === 200) {
           props.setState(value);
         }
       });
     } else {
-      animValueXY.addListener(({x}) => {
+      animValueXY.addListener(({ x }) => {
         if (x === 100) {
           props.setState(x);
         }
@@ -278,7 +278,7 @@ const SetValueView = (props: {
       <MovingSquareXY
         animValueXY={animValueXY}
         labels={['set valueXY']}
-        onPresses={[() => animValueXY.setValue({x: 100, y: 0})]}
+        onPresses={[() => animValueXY.setValue({ x: 100, y: 0 })]}
       />
     );
   }
@@ -319,7 +319,7 @@ const MovingSquare = (props: {
     <Button label={value} onPress={props.onPresses[index]} key={index} />
   ));
   return (
-    <View style={{width: '100%'}}>
+    <View style={{ width: '100%' }}>
       <Animated.View
         style={{
           height: 20,
@@ -333,7 +333,7 @@ const MovingSquare = (props: {
           ],
         }}
       />
-      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
         <Button label="animate" onPress={animate} />
         {buttons}
       </View>
@@ -350,12 +350,12 @@ const MovingSquareXY = (props: {
   const animation = Animated.loop(
     Animated.sequence([
       Animated.timing(props.animValueXY, {
-        toValue: {x: 25, y: 25},
+        toValue: { x: 25, y: 25 },
         duration: 500,
         useNativeDriver: true,
       }),
       Animated.timing(props.animValueXY, {
-        toValue: {x: 0, y: 0},
+        toValue: { x: 0, y: 0 },
         duration: 500,
         useNativeDriver: true,
       }),
@@ -364,7 +364,7 @@ const MovingSquareXY = (props: {
   const animate = () => {
     if (isRunning) {
       animation.stop();
-      props.animValueXY.setOffset({x: 0, y: 0});
+      props.animValueXY.setOffset({ x: 0, y: 0 });
       setIsRunning(false);
     } else {
       setIsRunning(true);
@@ -375,7 +375,7 @@ const MovingSquareXY = (props: {
     <Button label={value} onPress={props.onPresses[index]} key={index} />
   ));
   return (
-    <View style={{width: '100%', height: 100}}>
+    <View style={{ width: '100%', height: 100 }}>
       <Animated.View
         style={{
           height: 20,
@@ -386,11 +386,11 @@ const MovingSquareXY = (props: {
             {
               translateX: props.animValueXY.x,
             },
-            {translateY: props.animValueXY.y},
+            { translateY: props.animValueXY.y },
           ],
         }}
       />
-      <View style={{flexDirection: 'row', flexWrap: 'wrap', marginTop: 20}}>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginTop: 20 }}>
         <Button label="animate" onPress={animate} />
         {buttons}
       </View>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/AppRegistryTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/AppRegistryTest.tsx
index 9572f9000ebbf8d16693fdfd390413ecd614efd0..1242f01bd23c60ff66443f644278734140bcbf23 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/AppRegistryTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/AppRegistryTest.tsx
@@ -7,13 +7,13 @@
 
 import { TestSuite, TestCase } from '@rnoh/testerino';
 import React from 'react';
-import {AppParamsContext} from '../contexts';
-import {Button} from '../components';
-import {AppRegistry, Text} from 'react-native';
-import {name as appName} from '../app.json';
+import { AppParamsContext } from '../contexts';
+import { Button } from '../components';
+import { AppRegistry, Text } from 'react-native';
+import { name as appName } from '../app.json';
 
 export function AppRegistryTest() {
-  const {initialProps, ...rest} = React.useContext<any>(AppParamsContext);
+  const { initialProps, ...rest } = React.useContext<any>(AppParamsContext);
 
   const [registry, setRegistry] = React.useState(AppRegistry.getRegistry());
 
@@ -21,7 +21,7 @@ export function AppRegistryTest() {
     <TestSuite name="AppRegistry">
       <TestCase
         itShould="receive initialParams from the native side"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(initialProps).not.to.be.undefined;
         }}
       />
@@ -31,7 +31,7 @@ export function AppRegistryTest() {
           onPress={() => {
             const newProps = {
               ...rest,
-              initialProps: {...initialProps, foo: 'baz'},
+              initialProps: { ...initialProps, foo: 'baz' },
             };
             AppRegistry.setSurfaceProps(appName, newProps);
           }}
@@ -43,7 +43,7 @@ export function AppRegistryTest() {
       <TestCase
         itShould="register section when button is pressed"
         initialState={false}
-        arrange={({setState}) => (
+        arrange={({ setState }) => (
           <Button
             label="add section"
             onPress={() => {
@@ -53,7 +53,7 @@ export function AppRegistryTest() {
             }}
           />
         )}
-        assert={({expect}) => {
+        assert={({ expect }) => {
           const sectionKeys = AppRegistry.getSectionKeys();
           expect(sectionKeys).to.include('foo');
         }}
@@ -61,17 +61,17 @@ export function AppRegistryTest() {
       <TestCase
         itShould="register runnable when button is pressed"
         initialState={false}
-        arrange={({setState}) => (
+        arrange={({ setState }) => (
           <Button
             label="add runnable"
             onPress={() => {
-              AppRegistry.registerRunnable('foo', _ => {});
+              AppRegistry.registerRunnable('foo', _ => { });
               setRegistry(AppRegistry.getRegistry());
               setState(true);
             }}
           />
         )}
-        assert={({expect}) => {
+        assert={({ expect }) => {
           const runnable = AppRegistry.getRunnable('foo');
           expect(runnable).to.not.be.undefined;
         }}
@@ -79,7 +79,7 @@ export function AppRegistryTest() {
       <TestCase
         itShould="execute runnable when button is pressed"
         initialState={undefined}
-        arrange={({setState}) => (
+        arrange={({ setState }) => (
           <Button
             label="register and execute runnable"
             onPress={() => {
@@ -87,18 +87,18 @@ export function AppRegistryTest() {
                 setState(appParams);
               });
               setRegistry(AppRegistry.getRegistry());
-              AppRegistry.runApplication('bar', {foo: 'bar'});
+              AppRegistry.runApplication('bar', { foo: 'bar' });
             }}
           />
         )}
-        assert={({state, expect}) => {
+        assert={({ state, expect }) => {
           expect(state).to.not.be.undefined;
-          expect(state).to.deep.eq({foo: 'bar'});
+          expect(state).to.deep.eq({ foo: 'bar' });
         }}
       />
       <TestCase
         itShould="return app keys"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(AppRegistry.getAppKeys()).to.include(appName);
         }}
       />
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/AppStateTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/AppStateTest.tsx
index cd4ccd0877d1f712e9d8885081b215e3b87530a5..900e5aaccf5ea68aa220c672ec1c16ed56c01054 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/AppStateTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/AppStateTest.tsx
@@ -6,8 +6,8 @@
  */
 
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import React, {useEffect, useState} from 'react';
-import {GestureResponderEvent, ScrollView, TextInput} from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { GestureResponderEvent, ScrollView, TextInput } from 'react-native';
 import {
   AppState,
   AppStateStatus,
@@ -17,14 +17,14 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {Button, Effect} from '../components';
+import { Button, Effect } from '../components';
 
 export function AppStateTest() {
   return (
     <TestSuite name="AppState">
       <TestCase
         itShould="return active"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(AppState.currentState).to.equal('active');
         }}
       />
@@ -42,18 +42,18 @@ export function AppStateTest() {
           childrenCount: 1,
           textInputValue: '99',
         }}
-        arrange={({setState, state}) => {
+        arrange={({ setState, state }) => {
           return (
             <View>
               <Effect
                 onMount={() => {
                   AppState.addEventListener('memoryWarning', () => {
-                    setState(prev => ({...prev, didEmitMemoryEvent: true}));
+                    setState(prev => ({ ...prev, didEmitMemoryEvent: true }));
                   });
                 }}
                 children={<></>}
               />
-              <View style={{flexDirection: 'row'}}>
+              <View style={{ flexDirection: 'row' }}>
                 <Text>Number of items to add</Text>
                 <TextInput
                   value={state.textInputValue}
@@ -64,7 +64,7 @@ export function AppStateTest() {
                       textInputValue: e.nativeEvent?.text,
                     }));
                   }}
-                  style={{borderWidth: 1, width: 50, marginLeft: 10}}
+                  style={{ borderWidth: 1, width: 50, marginLeft: 10 }}
                   maxLength={6}
                 />
               </View>
@@ -92,7 +92,7 @@ export function AppStateTest() {
             </View>
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.true;
         }}
       />
@@ -162,7 +162,7 @@ function getScrollViewContent({
         ]}
         pointerEvents={pointerEvents}
         onTouchEnd={onTouchEnd}>
-        <Text style={{textAlign: 'center', height: 15}}> {idx + 1}</Text>
+        <Text style={{ textAlign: 'center', height: 15 }}> {idx + 1}</Text>
       </View>
     );
   });
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/AppearanceTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/AppearanceTest.tsx
index 8bcac69728ccaaef6d48980a9400bcfe637eb608..32fc04d0ec7be7bd14d0701a4a2390f05afa44e2 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/AppearanceTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/AppearanceTest.tsx
@@ -6,9 +6,9 @@
  */
 
 import { TestSuite, TestCase } from '@rnoh/testerino';
-import React, {useState, useEffect} from 'react';
-import {Text, Appearance, ColorSchemeName} from 'react-native';
-import {Button} from '../components';
+import React, { useState, useEffect } from 'react';
+import { Text, Appearance, ColorSchemeName } from 'react-native';
+import { Button } from '../components';
 
 export function AppearanceTest() {
   const [colorScheme, setColorScheme] = useState<ColorSchemeName>(
@@ -35,7 +35,7 @@ export function AppearanceTest() {
     <TestSuite name="Appearance">
       <TestCase
         itShould="return sensible value"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(Appearance.getColorScheme()).to.oneOf(['light', 'dark', null]);
         }}
       />
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/BackHandlerTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/BackHandlerTest.tsx
index 978c5dcafd14fb78ec27add18f92ee4a51ea6ee9..fb50a2c308bd9c9017291f3af0b5e6945359bf23 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/BackHandlerTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/BackHandlerTest.tsx
@@ -5,10 +5,10 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {BackHandler, Text, TouchableOpacity, View} from 'react-native';
+import { BackHandler, Text, TouchableOpacity, View } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {useCallback, useState} from 'react';
-import {Button} from '../components';
+import { useCallback, useState } from 'react';
+import { Button } from '../components';
 
 export const BackHandlerTest = () => {
   const [counter, setCounter] = useState(0);
@@ -21,24 +21,24 @@ export const BackHandlerTest = () => {
     <TestSuite name="BackHandler">
       <TestCase
         itShould="be exported"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(BackHandler).to.be.not.undefined;
         }}
       />
       <TestCase itShould="exit app on press">
         <TouchableOpacity
-          style={{height: 64}}
+          style={{ height: 64 }}
           onPress={() => {
             BackHandler.exitApp();
           }}>
-          <Text style={{width: '100%', height: '100%'}}>Exit</Text>
+          <Text style={{ width: '100%', height: '100%' }}>Exit</Text>
         </TouchableOpacity>
       </TestCase>
       <TestCase itShould="allow to add, remove eventListener and display number of system back presses/gestures accordingly">
-        <Text style={{width: '100%'}}>
+        <Text style={{ width: '100%' }}>
           Back pressed {counter} time{counter === 1 ? '' : 's'}
         </Text>
-        <View style={{flexDirection: 'row'}}>
+        <View style={{ flexDirection: 'row' }}>
           <Button
             label={'Add event listener'}
             onPress={() => {
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/BlobTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/BlobTest.tsx
index 97b14170d845252e58f807e0643a82de69d8fcb6..985ae67f8e2da6ccbe704a5013d39189fe23ea93 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/BlobTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/BlobTest.tsx
@@ -13,7 +13,7 @@ export const BlobTest = () => {
     <TestSuite name="Blob">
       <TestCase
         itShould="return blob size and type correctly"
-        fn={async ({expect}) => {
+        fn={async ({ expect }) => {
           const blob = new Blob(['aaabbbccc'], {
             type: 'text/plain',
             lastModified: Date.now(),
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ButtonTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ButtonTest.tsx
index 99386475686afd596d3f5ab5a66f393f479a4641..56caff78129498e546c3c962bc213902e55a7cd2 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ButtonTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ButtonTest.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {View, Button, StyleSheet, Text} from 'react-native';
+import { View, Button, StyleSheet, Text } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
 
 export const ButtonTest = () => {
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ConsoleTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ConsoleTest.tsx
index 6e5bae53fbcfb99f015272d09698d4e34470ae73..9e52c7b5c23ba94fcca5a31b2f0ae87236a52254 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ConsoleTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ConsoleTest.tsx
@@ -6,7 +6,7 @@
  */
 
 import { TestSuite, TestCase } from '@rnoh/testerino';
-import {Button} from 'react-native';
+import { Button } from 'react-native';
 
 const SEVERITIES = ['log', 'info', 'warn', 'error', 'debug'] as const;
 
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/CustomNativeComponentTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/CustomNativeComponentTest.tsx
index 962e4881d185ad7d5c96402eb1dd2d0375b582f9..2634d5f147114390ab4d0af29a478710f57e115f 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/CustomNativeComponentTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/CustomNativeComponentTest.tsx
@@ -11,7 +11,7 @@ import { TestSuite, TestCase } from '@rnoh/testerino';
 export function CustomNativeComponentTest() {
   return (
     <TestSuite name="Custom Native Component">
-      <TestCase itShould="platform not supported" fn={() => {}} />
+      <TestCase itShould="platform not supported" fn={() => { }} />
     </TestSuite>
   );
 }
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/DevSettingsTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/DevSettingsTest.tsx
index 79c8b5414693c62c62f9f06778a054429575cf1e..d429349b4465b6aa185155ee3d882da80e5a76b6 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/DevSettingsTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/DevSettingsTest.tsx
@@ -7,8 +7,8 @@
 
 import { TestCase, TestSuite } from '@rnoh/testerino';
 import React from 'react';
-import {StyleSheet, View, DevSettings} from 'react-native';
-import {Button} from '../components';
+import { StyleSheet, View, DevSettings } from 'react-native';
+import { Button } from '../components';
 
 export const DevSettingsTest = () => {
   return (
@@ -16,8 +16,8 @@ export const DevSettingsTest = () => {
       <TestCase
         itShould="add custom DevMenu item and react to presses after opening DevMenu"
         initialState={false}
-        arrange={({setState}) => <AddMenuItemTest setState={setState} />}
-        assert={({state, expect}) => {
+        arrange={({ setState }) => <AddMenuItemTest setState={setState} />}
+        assert={({ state, expect }) => {
           expect(state).to.be.true;
         }}
       />
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/DimensionsTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/DimensionsTest.tsx
index f03fa70e203a59581c398008b603a90161006378..85f7f0ede66ad31ebd8bb35c907298f08714b974 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/DimensionsTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/DimensionsTest.tsx
@@ -6,8 +6,8 @@
  */
 
 import { TestSuite, TestCase } from '@rnoh/testerino';
-import React, {useState, useEffect} from 'react';
-import {Text, StyleSheet, Dimensions} from 'react-native';
+import React, { useState, useEffect } from 'react';
+import { Text, StyleSheet, Dimensions } from 'react-native';
 
 export function DimensionsTest() {
   const [windowDimensions, setWindowDimensions] = useState(
@@ -20,11 +20,11 @@ export function DimensionsTest() {
   useEffect(() => {
     const windowSubscription = Dimensions.addEventListener(
       'change',
-      ({window}) => setWindowDimensions(window),
+      ({ window }) => setWindowDimensions(window),
     );
     const screenSubscription = Dimensions.addEventListener(
       'change',
-      ({screen}) => setScreenDimensions(screen),
+      ({ screen }) => setScreenDimensions(screen),
     );
     return () => {
       windowSubscription.remove();
@@ -36,20 +36,20 @@ export function DimensionsTest() {
     <TestSuite name="Dimensions">
       <TestCase
         itShould="export dimensions"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(Dimensions).to.not.be.undefined;
           expect(Dimensions.get).to.not.be.undefined;
         }}
       />
       <TestCase
         itShould="gets window dimensions without throwing"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(Dimensions.get.bind(Dimensions, 'window')).to.not.throw();
         }}
       />
       <TestCase
         itShould="gets screen dimensions without throwing"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(Dimensions.get.bind(Dimensions, 'screen')).to.not.throw();
         }}
       />
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/FlatListTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/FlatListTest.tsx
index f2bf45698d3509e867c58889795fe2fd158514e1..1249d76d21bbda55388fb74cb9736a68a3fcd6d9 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/FlatListTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/FlatListTest.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useCallback, useRef, useState} from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import {
   View,
   FlatList,
@@ -19,7 +19,7 @@ import {
   Platform,
 } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {Button, ObjectDisplayer} from '../components';
+import { Button, ObjectDisplayer } from '../components';
 interface ItemData {
   title: string;
   id: string;
@@ -47,9 +47,9 @@ const DATA: ItemData[] = [
   },
 ];
 
-type ItemProps = {title: string};
+type ItemProps = { title: string };
 
-const Item = ({title}: ItemProps) => (
+const Item = ({ title }: ItemProps) => (
   <View style={styles.item}>
     <Text style={styles.title}>{title}</Text>
   </View>
@@ -60,7 +60,7 @@ const commonProps = {
   },
   data: DATA,
   nestedScrollEnabled: true,
-  renderItem: ({item}) => <Item title={item.title} />,
+  renderItem: ({ item }) => <Item title={item.title} />,
   keyExtractor: item => item.id,
 } satisfies FlatListProps<any>;
 
@@ -104,13 +104,13 @@ export const FlatListTest = () => {
         <MaxToRenderPerBatchTestCase />
       </TestCase>
       <TestCase itShould="display empty list with a text saying that the list is empty ">
-        <View style={{height: 40}}>
+        <View style={{ height: 40 }}>
           <FlatList
             data={[]}
             nestedScrollEnabled
             renderItem={() => null}
             ListEmptyComponent={
-              <Text style={{textAlign: 'center'}}>This list is empty</Text>
+              <Text style={{ textAlign: 'center' }}>This list is empty</Text>
             }
           />
         </View>
@@ -130,17 +130,17 @@ export const FlatListTest = () => {
         modal
         skip={Platform.OS === 'android'}
         itShould="support sticky headers (fails on Android with enabled Fabric)">
-        <View style={{height: 100, backgroundColor: '#fff'}}>
+        <View style={{ height: 100, backgroundColor: '#fff' }}>
           <FlatList
             data={DATA}
-            renderItem={({item}) => (
+            renderItem={({ item }) => (
               <View
                 style={{
                   padding: 20,
                   borderBottomWidth: 1,
                   borderBottomColor: '#ccc',
                 }}>
-                <Text style={{fontSize: 16}}>{item.title}</Text>
+                <Text style={{ fontSize: 16 }}>{item.title}</Text>
               </View>
             )}
             keyExtractor={item => item.id}
@@ -152,7 +152,7 @@ export const FlatListTest = () => {
                   justifyContent: 'center',
                   alignItems: 'center',
                 }}>
-                <Text style={{fontSize: 18, fontWeight: 'bold'}}>
+                <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
                   Sticky Header
                 </Text>
               </View>
@@ -164,36 +164,36 @@ export const FlatListTest = () => {
       <TestCase
         itShould="Get the node number - getScrollableNode()"
         initialState={undefined}
-        arrange={({state, setState}) => {
+        arrange={({ state, setState }) => {
           return (
             <FlatListGetScrollableNode state={state} setState={setState} />
           );
         }}
-        assert={({state, expect}) => {
+        assert={({ state, expect }) => {
           expect(state).to.be.an('number');
         }}
       />
       <TestCase
         itShould="Get the nativeScrollRef - getNativeScrollRef()"
         initialState={undefined}
-        arrange={({state, setState}) => {
+        arrange={({ state, setState }) => {
           return (
             <FlatListGetNativeScrollRef state={state} setState={setState} />
           );
         }}
-        assert={({state, expect}) => {
+        assert={({ state, expect }) => {
           expect(state).to.be.not.undefined;
         }}
       />
       <TestCase
         itShould="Get the scroll responder - getScrollResponder()"
         initialState={undefined}
-        arrange={({state, setState}) => {
+        arrange={({ state, setState }) => {
           return (
             <FlatListGetScrollResponder state={state} setState={setState} />
           );
         }}
-        assert={({state, expect}) => {
+        assert={({ state, expect }) => {
           expect(state).to.be.not.undefined;
         }}
       />
@@ -201,17 +201,17 @@ export const FlatListTest = () => {
         modal
         skip={Platform.OS === 'android'}
         itShould="stick first item to the bottom (invertStickyHeaders, fails on Android with enabled Fabric)">
-        <View style={{height: 100, backgroundColor: '#fff'}}>
+        <View style={{ height: 100, backgroundColor: '#fff' }}>
           <FlatList
             data={DATA}
-            renderItem={({item}) => (
+            renderItem={({ item }) => (
               <View
                 style={{
                   padding: 20,
                   borderBottomWidth: 1,
                   borderBottomColor: '#ccc',
                 }}>
-                <Text style={{fontSize: 16}}>{item.title}</Text>
+                <Text style={{ fontSize: 16 }}>{item.title}</Text>
               </View>
             )}
             keyExtractor={item => item.id}
@@ -223,7 +223,7 @@ export const FlatListTest = () => {
                   justifyContent: 'center',
                   alignItems: 'center',
                 }}>
-                <Text style={{fontSize: 18, fontWeight: 'bold'}}>Header</Text>
+                <Text style={{ fontSize: 18, fontWeight: 'bold' }}>Header</Text>
               </View>
             )}
             stickyHeaderIndices={[1]}
@@ -246,7 +246,7 @@ function InitialNumToRenderTestCase() {
         }}
         data={DATA}
         nestedScrollEnabled
-        renderItem={({item}) => {
+        renderItem={({ item }) => {
           return <Item title={item.title} />;
         }}
         keyExtractor={item => item.id}
@@ -261,14 +261,14 @@ function ViewabilityConfigTest({
 }: {
   setObject: (obj: Object) => void;
 }) {
-  const viewabilityConfig = {viewAreaCoveragePercentThreshold: 100};
+  const viewabilityConfig = { viewAreaCoveragePercentThreshold: 100 };
   const onViewableItemsChanged = useRef(
-    (item: {viewableItems: Array<ViewToken>; changed: Array<ViewToken>}) => {
+    (item: { viewableItems: Array<ViewToken>; changed: Array<ViewToken> }) => {
       setObject(item.viewableItems.map(i => i.item));
     },
   );
   return (
-    <View style={{height: 300}}>
+    <View style={{ height: 300 }}>
       <FlatList
         {...commonProps}
         viewabilityConfig={viewabilityConfig}
@@ -281,13 +281,13 @@ function ViewabilityConfigTest({
 function MaxToRenderPerBatchTestCase() {
   const [data, setData] = useState<string[]>([]);
 
-  const renderItem = ({item}: {item: string; index: number}) => {
-    return <Text style={{height: 20}}>{item}</Text>;
+  const renderItem = ({ item }: { item: string; index: number }) => {
+    return <Text style={{ height: 20 }}>{item}</Text>;
   };
 
   return (
-    <View style={{height: 500}}>
-      <View style={{flexDirection: 'row'}}>
+    <View style={{ height: 500 }}>
+      <View style={{ flexDirection: 'row' }}>
         <FlatList
           data={data}
           renderItem={renderItem}
@@ -306,7 +306,7 @@ function MaxToRenderPerBatchTestCase() {
         onPress={() => {
           setData(prevData => [
             ...prevData,
-            ...Array.from({length: 60}, (_, i) => `New item ${i + 1}`),
+            ...Array.from({ length: 60 }, (_, i) => `New item ${i + 1}`),
           ]);
         }}
       />
@@ -331,7 +331,7 @@ class SelectableListItem extends React.PureComponent<SelectableListItemProps> {
     return (
       <TouchableOpacity onPress={this._onPress}>
         <View>
-          <Text style={{color: textColor}}>{this.props.title}</Text>
+          <Text style={{ color: textColor }}>{this.props.title}</Text>
         </View>
       </TouchableOpacity>
     );
@@ -353,11 +353,11 @@ class ExtraDataTestCase extends React.PureComponent<{}, MultiSelectListState> {
     this.setState(state => {
       const selected = new Map(state.selected);
       selected.set(id, !selected.get(id));
-      return {selected};
+      return { selected };
     });
   };
 
-  _renderItem = ({item}: {item: ItemData}) => (
+  _renderItem = ({ item }: { item: ItemData }) => (
     <SelectableListItem
       id={item.id}
       onPressItem={this._onPressItem}
@@ -368,7 +368,7 @@ class ExtraDataTestCase extends React.PureComponent<{}, MultiSelectListState> {
 
   render() {
     return (
-      <View style={{height: 200}}>
+      <View style={{ height: 200 }}>
         <FlatList
           data={DATA}
           extraData={this.state}
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/HMLog.ts b/docs/Samples/Sample/SampleProject/MainProject/tests/HMLog.ts
index fc09d0b71f31123fc6fb2180d039014a6606b42e..f088aee7788cb8efd00c30a96e8496543d97bdbb 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/HMLog.ts
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/HMLog.ts
@@ -5,14 +5,14 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import type {TurboModule} from 'react-native/Libraries/TurboModule/RCTExport';
-import {TurboModuleRegistry} from 'react-native';
+import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
+import { TurboModuleRegistry } from 'react-native';
 
 interface LogTurboModuleProtocol {
   Log(arg: string): void;
 }
 
-interface Spec extends TurboModule, LogTurboModuleProtocol {}
+interface Spec extends TurboModule, LogTurboModuleProtocol { }
 const LogTurboModule = TurboModuleRegistry.get<Spec>('RNCLog')!;
 export function HMLog(arg: string) {
   LogTurboModule.Log(arg);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/I18nManagerTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/I18nManagerTest.tsx
index c7133829ae7fd5562f83ca6bf9f16c0cf6f481d9..ed4df3101e9cf62c180ac53c457e9fc0b4be6677 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/I18nManagerTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/I18nManagerTest.tsx
@@ -6,20 +6,20 @@
  */
 
 import { TestSuite, TestCase } from '@rnoh/testerino';
-import {I18nManager} from 'react-native';
+import { I18nManager } from 'react-native';
 
 export function I18nManagerTest() {
   return (
     <TestSuite name="I18nManager">
       <TestCase
         itShould="be LTR be true"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(I18nManager.isRTL).to.be.false;
         }}
       />
       <TestCase
         itShould="doLeftAndRightSwapInRTL to be true"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(I18nManager.doLeftAndRightSwapInRTL).to.be.true;
         }}
       />
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ImageBackgroundTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ImageBackgroundTest.tsx
index eac6909378b543950f16c38f85f61d3f462437bd..d8f6d2a794db0501d1bbc1d51ac6c08cc46d4e0f 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ImageBackgroundTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ImageBackgroundTest.tsx
@@ -6,7 +6,7 @@
  */
 
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {ImageBackground, Text} from 'react-native';
+import { ImageBackground, Text } from 'react-native';
 
 const LOCAL_IMAGE_ASSET_ID = require('../assets/pravatar-131.jpg');
 
@@ -16,8 +16,8 @@ export const ImageBackgroundTest = () => {
       <TestCase itShould="show centered text on image background with red border">
         <ImageBackground
           source={LOCAL_IMAGE_ASSET_ID}
-          style={{width: '100%', height: 100, justifyContent: 'center'}}
-          imageStyle={{borderWidth: 4, borderRadius: 50, borderColor: 'red'}}
+          style={{ width: '100%', height: 100, justifyContent: 'center' }}
+          imageStyle={{ borderWidth: 4, borderRadius: 50, borderColor: 'red' }}
           resizeMode="cover">
           <Text
             style={{
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ImageTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ImageTest.tsx
index 6878574d7ad82bd18c246ca089755302b944c3f2..06cd44bf9f0eccccbe08e9553c0dd7d8e8eb7643 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ImageTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ImageTest.tsx
@@ -5,10 +5,10 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {Image, ImageSourcePropType, ScrollView, Text, View} from 'react-native';
+import { Image, ImageSourcePropType, ScrollView, Text, View } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
 import React from 'react';
-import {Button} from '../components';
+import { Button } from '../components';
 
 const WRONG_IMAGE_SRC = 'not_image';
 const LOCAL_IMAGE_ASSET_ID = require('../assets/pravatar-131.jpg');
@@ -26,29 +26,29 @@ export const ImageTest = () => {
     <TestSuite name="Image">
       <TestCase itShould="support loading local images">
         <Image
-          style={{borderRadius: 8, borderWidth: 1}}
+          style={{ borderRadius: 8, borderWidth: 1 }}
           source={LOCAL_IMAGE_ASSET_ID}
         />
       </TestCase>
       <ImageExampleCase
         itShould="support loading remote images"
-        source={{uri: REMOTE_IMAGE_URL}}
+        source={{ uri: REMOTE_IMAGE_URL }}
       />
       <ImageExampleCase
         itShould="support loading remote images (with http redirect)"
-        source={{uri: REMOTE_REDIRECT_IMAGE_URL}}
+        source={{ uri: REMOTE_REDIRECT_IMAGE_URL }}
       />
       <ImageExampleCase
         itShould="support loading large remote images (over 5mb)"
-        source={{uri: LARGE_REMOTE_IMAGE_URL}}
+        source={{ uri: LARGE_REMOTE_IMAGE_URL }}
       />
       <ImageExampleCase
         itShould="support loading image data uris"
-        source={{uri: DATA_URI}}
+        source={{ uri: DATA_URI }}
       />
       <ImageExampleCase
         itShould="support loading remote animated gifs"
-        source={{uri: REMOTE_GIF_URL}}
+        source={{ uri: REMOTE_GIF_URL }}
       />
       <TestCase itShould="display alt when the image doesn't load">
         <View>
@@ -60,7 +60,7 @@ export const ImageTest = () => {
       </TestCase>
       <TestCase
         itShould="retrieve remote image size"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           return new Promise((resolve, reject) => {
             Image.getSize(
               REMOTE_IMAGE_URL,
@@ -78,7 +78,7 @@ export const ImageTest = () => {
       />
       <TestCase
         itShould="retrieve local image size"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           const resolvedAsset = Image.resolveAssetSource(LOCAL_IMAGE_ASSET_ID);
           expect(resolvedAsset.width).to.be.eq(150);
           expect(resolvedAsset.height).to.be.eq(150);
@@ -86,7 +86,7 @@ export const ImageTest = () => {
       />
       <TestCase
         itShould="prefetch image"
-        fn={async ({expect}) => {
+        fn={async ({ expect }) => {
           let ex: any;
           try {
             await Image.prefetch(WRONG_IMAGE_SRC);
@@ -100,7 +100,7 @@ export const ImageTest = () => {
       />
       <TestCase
         itShould="query cache"
-        fn={async ({expect}) => {
+        fn={async ({ expect }) => {
           await Image.prefetch(REMOTE_IMAGE_URL);
           expect(Image.queryCache).not.to.be.undefined;
           const result = await Image.queryCache?.([
@@ -118,13 +118,13 @@ export const ImageTest = () => {
         itShould="render circular image on a red rectangle (overlayColor)">
         <Image
           source={LOCAL_IMAGE_ASSET_ID}
-          style={{overlayColor: 'red', borderRadius: Number.MAX_SAFE_INTEGER}}
+          style={{ overlayColor: 'red', borderRadius: Number.MAX_SAFE_INTEGER }}
         />
       </TestCase>
       <TestCase
         itShould="call onLoadStart"
         initialState={'not called'}
-        arrange={({setState}) => {
+        arrange={({ setState }) => {
           return (
             <Image
               source={LOCAL_IMAGE_ASSET_ID}
@@ -132,14 +132,14 @@ export const ImageTest = () => {
             />
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.eq('called');
         }}
       />
       <TestCase
         itShould="call onLoad"
         initialState={{}}
-        arrange={({setState, state}) => {
+        arrange={({ setState, state }) => {
           return (
             <View>
               <Text>{JSON.stringify(state)}</Text>
@@ -152,14 +152,14 @@ export const ImageTest = () => {
             </View>
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.contain.all.keys('width', 'height', 'uri');
         }}
       />
       <TestCase
         itShould="call onError (local)"
         initialState={null}
-        arrange={({setState, state}) => {
+        arrange={({ setState, state }) => {
           return (
             <View>
               <Text>{JSON.stringify(state)}</Text>
@@ -172,19 +172,19 @@ export const ImageTest = () => {
             </View>
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.not.null;
         }}
       />
       <TestCase
         itShould="call onError (remote)"
         initialState={null}
-        arrange={({setState, state}) => {
+        arrange={({ setState, state }) => {
           return (
             <View>
               <Text>{JSON.stringify(state)}</Text>
               <Image
-                source={{uri: 'https://www.google.com/image'}}
+                source={{ uri: 'https://www.google.com/image' }}
                 onError={event => {
                   setState(event.nativeEvent.error);
                 }}
@@ -192,7 +192,7 @@ export const ImageTest = () => {
             </View>
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.not.null;
         }}
       />
@@ -201,35 +201,35 @@ export const ImageTest = () => {
       >
         <TestCase itShould="render small image in the center (center)">
           <Image
-            style={{width: '100%', height: 100}}
+            style={{ width: '100%', height: 100 }}
             source={LOCAL_IMAGE_ASSET_ID}
             resizeMode="center"
           />
         </TestCase>
         <TestCase itShould="render image touching top and bottom edges in the center (contain)">
           <Image
-            style={{width: '100%', height: 100}}
+            style={{ width: '100%', height: 100 }}
             source={LOCAL_IMAGE_ASSET_ID}
             resizeMode="contain"
           />
         </TestCase>
         <TestCase itShould="fully cover test case area while preserving aspect ratio (cover)">
           <Image
-            style={{width: '100%', height: 100}}
+            style={{ width: '100%', height: 100 }}
             source={LOCAL_IMAGE_ASSET_ID}
             resizeMode="cover"
           />
         </TestCase>
         <TestCase itShould="cover test case area by repeating image (repeat)">
           <Image
-            style={{width: '100%', height: 100}}
+            style={{ width: '100%', height: 100 }}
             source={LOCAL_IMAGE_ASSET_ID}
             resizeMode="repeat"
           />
         </TestCase>
         <TestCase itShould="cover test case area by stretching (stretch)">
           <Image
-            style={{width: '100%', height: 100}}
+            style={{ width: '100%', height: 100 }}
             source={LOCAL_IMAGE_ASSET_ID}
             resizeMode="stretch"
           />
@@ -237,34 +237,34 @@ export const ImageTest = () => {
       </TestSuite>
       <TestSuite name="blurRadius">
         <TestCase itShould="blur images with various blur radius">
-          <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
             <Image
-              style={{width: 64, height: 64, margin: 4}}
+              style={{ width: 64, height: 64, margin: 4 }}
               source={LOCAL_IMAGE_ASSET_ID}
               blurRadius={0}
             />
             <Image
-              style={{width: 64, height: 64, margin: 4}}
+              style={{ width: 64, height: 64, margin: 4 }}
               source={LOCAL_IMAGE_ASSET_ID}
               blurRadius={5}
             />
             <Image
-              style={{width: 64, height: 64, margin: 4}}
+              style={{ width: 64, height: 64, margin: 4 }}
               source={LOCAL_IMAGE_ASSET_ID}
               blurRadius={10}
             />
             <Image
-              style={{width: 64, height: 64, margin: 4}}
+              style={{ width: 64, height: 64, margin: 4 }}
               source={LOCAL_IMAGE_ASSET_ID}
               blurRadius={15}
             />
             <Image
-              style={{width: 64, height: 64, margin: 4}}
+              style={{ width: 64, height: 64, margin: 4 }}
               source={LOCAL_IMAGE_ASSET_ID}
               blurRadius={20}
             />
             <Image
-              style={{width: 64, height: 64, margin: 4}}
+              style={{ width: 64, height: 64, margin: 4 }}
               source={LOCAL_IMAGE_ASSET_ID}
               blurRadius={25}
             />
@@ -300,14 +300,14 @@ export const ImageTest = () => {
       </TestCase>
       <TestCase itShould="render top image in a bit lower quality (difference barely visible)">
         <Image
-          style={{width: 200, height: 200}}
+          style={{ width: 200, height: 200 }}
           source={require('../assets/noise.png')}
           resizeMethod="resize"
           resizeMode="stretch"
         />
-        <View style={{height: 10}} />
+        <View style={{ height: 10 }} />
         <Image
-          style={{width: 200, height: 200}}
+          style={{ width: 200, height: 200 }}
           source={require('../assets/noise.png')}
           resizeMethod="scale"
           resizeMode="stretch"
@@ -317,56 +317,56 @@ export const ImageTest = () => {
         modal
         skip // https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/483
         itShould="fade images with varying durations">
-        <View style={{flexDirection: 'row', gap: 24}}>
-          <View style={{width: 100}}>
+        <View style={{ flexDirection: 'row', gap: 24 }}>
+          <View style={{ width: 100 }}>
             <Image
               // HACK: ?v=Date.now() is used to prevent caching
               // - cached images are not fading/faded in
-              source={{uri: REMOTE_IMAGE_URL + '?v=' + Date.now()}}
-              style={{width: 100, height: 100, borderRadius: 8}}
+              source={{ uri: REMOTE_IMAGE_URL + '?v=' + Date.now() }}
+              style={{ width: 100, height: 100, borderRadius: 8 }}
               fadeDuration={0}
             />
             <Text>This image will fade in over the time of 0s.</Text>
           </View>
-          <View style={{width: 100}}>
+          <View style={{ width: 100 }}>
             <Image
-              source={{uri: REMOTE_IMAGE_URL + '?v=' + Date.now()}}
-              style={{width: 100, height: 100, borderRadius: 8}}
+              source={{ uri: REMOTE_IMAGE_URL + '?v=' + Date.now() }}
+              style={{ width: 100, height: 100, borderRadius: 8 }}
               fadeDuration={1500}
             />
             <Text>This image will fade in over the time of 1.5s.</Text>
           </View>
-          <View style={{width: 100}}>
+          <View style={{ width: 100 }}>
             <Image
-              source={{uri: REMOTE_IMAGE_URL + '?v=' + Date.now()}}
-              style={{width: 100, height: 100, borderRadius: 8}}
+              source={{ uri: REMOTE_IMAGE_URL + '?v=' + Date.now() }}
+              style={{ width: 100, height: 100, borderRadius: 8 }}
               fadeDuration={5000}
             />
             <Text>This image will fade in over the time of 5s.</Text>
           </View>
         </View>
         {/* To test local fadeDuration for localImages you have to disable caching */}
-        <View style={{flexDirection: 'row', gap: 24}}>
-          <View style={{width: 100}}>
+        <View style={{ flexDirection: 'row', gap: 24 }}>
+          <View style={{ width: 100 }}>
             <Image
               source={LOCAL_IMAGE_ASSET_ID}
-              style={{width: 100, height: 100, borderRadius: 8}}
+              style={{ width: 100, height: 100, borderRadius: 8 }}
               fadeDuration={0}
             />
             <Text>This image will fade in over the time of 0s.</Text>
           </View>
-          <View style={{width: 100}}>
+          <View style={{ width: 100 }}>
             <Image
               source={LOCAL_IMAGE_ASSET_ID}
-              style={{width: 100, height: 100, borderRadius: 8}}
+              style={{ width: 100, height: 100, borderRadius: 8 }}
               fadeDuration={1500}
             />
             <Text>This image will fade in over the time of 1.5s.</Text>
           </View>
-          <View style={{width: 100}}>
+          <View style={{ width: 100 }}>
             <Image
               source={LOCAL_IMAGE_ASSET_ID}
-              style={{width: 100, height: 100, borderRadius: 8}}
+              style={{ width: 100, height: 100, borderRadius: 8 }}
               fadeDuration={5000}
             />
             <Text>This image will fade in over the time of 5s.</Text>
@@ -377,11 +377,11 @@ export const ImageTest = () => {
         modal
         itShould="load many large images without causing out-of-memory issues">
         <ScrollView>
-          {Array.from({length: 25}, (_, index) => (
+          {Array.from({ length: 25 }, (_, index) => (
             <Image
               key={index}
-              style={{width: 200, height: 200}}
-              source={{uri: LARGE_REMOTE_IMAGE_URL}}
+              style={{ width: 200, height: 200 }}
+              source={{ uri: LARGE_REMOTE_IMAGE_URL }}
             />
           ))}
         </ScrollView>
@@ -399,10 +399,10 @@ const ImageExampleCase = ({
 }) => (
   <TestCase itShould={itShould}>
     <Image
-      style={{borderRadius: 8, borderWidth: 1, height: 150}}
+      style={{ borderRadius: 8, borderWidth: 1, height: 150 }}
       source={source}
       onError={e => console.error(e.nativeEvent.error)}
-      // resizeMode="contain"
+    // resizeMode="contain"
     />
   </TestCase>
 );
@@ -419,8 +419,8 @@ const SwitchSourceTest = () => {
 
   return (
     <View>
-      <View style={{flexDirection: 'row'}}>
-        <Image source={{uri: SOURCES[idx]}} style={{width: 100, height: 100}} />
+      <View style={{ flexDirection: 'row' }}>
+        <Image source={{ uri: SOURCES[idx] }} style={{ width: 100, height: 100 }} />
         <Text>{`Source: ${SOURCES[idx]}`}</Text>
       </View>
       <Button
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/InteractionManagerTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/InteractionManagerTest.tsx
index 5b423baa7d42108da9d6fa9df0cbdbb61ea9937e..d3feca8321ac776f937a46ee606a3606f4aecf2c 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/InteractionManagerTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/InteractionManagerTest.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {InteractionManager} from 'react-native';
+import { InteractionManager } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
 
 export function InteractionManagerTest() {
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/KeyboardAvoidingViewTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/KeyboardAvoidingViewTest.tsx
index 5c1ab8cf93c43197347c3fdbdf82e602453178a5..8d520236b8ba838aaf43aeeb8dd425fd734aa741 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/KeyboardAvoidingViewTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/KeyboardAvoidingViewTest.tsx
@@ -17,7 +17,7 @@ import {
 } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
 import React from 'react';
-import {Modal} from '../components';
+import { Modal } from '../components';
 
 export const KeyboardAvoidingViewTest = () => {
   return (
@@ -39,8 +39,8 @@ export const KeyboardAvoidingViewTest = () => {
         <KeyboardAvoidingViewTestCase
           behavior="position"
           justifyContent="flex-end"
-          contentContainerStyle={{borderWidth: 4, borderColor: 'firebrick'}}
-          style={{borderWidth: 4, borderColor: 'green'}}
+          contentContainerStyle={{ borderWidth: 4, borderColor: 'firebrick' }}
+          style={{ borderWidth: 4, borderColor: 'green' }}
         />
       </TestCase>
       <TestCase itShould="avoid keyboard by changing padding">
@@ -56,13 +56,13 @@ export const KeyboardAvoidingViewTest = () => {
 type KeyboardAvoidingViewTestCaseProps = {
   behavior?: 'height' | 'position' | 'padding' | undefined;
   justifyContent?:
-    | 'flex-start'
-    | 'flex-end'
-    | 'center'
-    | 'space-between'
-    | 'space-around'
-    | 'space-evenly'
-    | undefined;
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+  | undefined;
   contentContainerStyle?: StyleProp<ViewStyle> | undefined;
   enabled?: boolean | undefined;
   style?: StyleProp<ViewStyle> | undefined;
@@ -72,7 +72,7 @@ function KeyboardAvoidingViewTestCase(
 ) {
   return (
     <>
-      <Modal contentContainerStyle={{height: '100%'}}>
+      <Modal contentContainerStyle={{ height: '100%' }}>
         <KeyboardAvoidingView
           behavior={props.behavior}
           keyboardVerticalOffset={75} //magic value, corresponding to the height of the wrapper etc.
@@ -81,13 +81,13 @@ function KeyboardAvoidingViewTestCase(
           style={[styles.container, props.style]}>
           <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
             <View
-              style={{height: '100%', justifyContent: props.justifyContent}}>
+              style={{ height: '100%', justifyContent: props.justifyContent }}>
               <TextInput placeholder="TextInput" style={styles.textInput} />
               <View
-                style={{height: 150, width: 150, backgroundColor: 'firebrick'}}
+                style={{ height: 150, width: 150, backgroundColor: 'firebrick' }}
               />
               <View
-                style={{height: 150, width: 150, backgroundColor: 'beige'}}
+                style={{ height: 150, width: 150, backgroundColor: 'beige' }}
               />
             </View>
           </TouchableWithoutFeedback>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/KeyboardTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/KeyboardTest.tsx
index c441cfb64a1c7f42ac0d5e818bf3a3f9d923d69c..568647d3918107622e21f11bb1c0fe1b01b21e70 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/KeyboardTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/KeyboardTest.tsx
@@ -13,16 +13,16 @@ import {
   KeyboardEvent,
   Dimensions,
 } from 'react-native';
-import {Button} from '../components';
-import {useEffect} from 'react';
-import {EmitterSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter';
+import { Button } from '../components';
+import { useEffect } from 'react';
+import { EmitterSubscription } from 'react-native/Libraries/vendor/emitter/EventEmitter';
 
 export function KeyboardTest() {
   return (
     <TestSuite name="Keyboard">
       <TestCase
         itShould="not crash when using keyboard module"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(Keyboard.isVisible()).to.be.false;
         }}
       />
@@ -39,7 +39,7 @@ export function KeyboardTest() {
           keyboardEvent: {} as KeyboardEvent,
         }}
         itShould="not open the keyboard after opening the modal"
-        arrange={({setState, reset}) => {
+        arrange={({ setState, reset }) => {
           return (
             <KeyboardEventsView
               listenToShow
@@ -49,11 +49,11 @@ export function KeyboardTest() {
             />
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state.keyboardDidShow).to.be.false;
           expect(state.keyboardDidHide).to.be.false;
         }}
-        // https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/380
+      // https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/380
       />
       <TestCase
         modal
@@ -63,7 +63,7 @@ export function KeyboardTest() {
           keyboardEvent: {} as KeyboardEvent,
         }}
         itShould="pass after opening the keyboard"
-        arrange={({setState, reset}) => {
+        arrange={({ setState, reset }) => {
           return (
             <KeyboardEventsView
               listenToShow
@@ -73,7 +73,7 @@ export function KeyboardTest() {
             />
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state.keyboardDidShow).to.be.true;
           expect(state.keyboardDidHide).to.be.false;
           expect(state.keyboardEvent.endCoordinates.height).to.be.greaterThan(
@@ -94,7 +94,7 @@ export function KeyboardTest() {
           keyboardEvent: {} as KeyboardEvent,
         }}
         itShould="pass after dismissing the keyboard"
-        arrange={({setState, reset}) => {
+        arrange={({ setState, reset }) => {
           return (
             <KeyboardEventsView
               listenToHide
@@ -104,7 +104,7 @@ export function KeyboardTest() {
             />
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state.keyboardDidHide).to.be.true;
           expect(state.keyboardDidShow).to.be.false;
           expect(state.keyboardEvent.endCoordinates.height).to.be.equal(0);
@@ -160,7 +160,7 @@ function KeyboardEventsView(props: {
     if (props.checkIfKeyboardIsVisible) {
       setTimeout(() => {
         if (!Keyboard.isVisible()) {
-          props.onSetState(prev => ({...prev, keyboardDidShow: false}));
+          props.onSetState(prev => ({ ...prev, keyboardDidShow: false }));
         }
       }, 1000);
     }
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/LayoutAnimationsTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/LayoutAnimationsTest.tsx
index 0314011ff1649c0a645851230cdfad888992691a..3129d906ea77a354d9b6db7e4739afbb67ca1277 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/LayoutAnimationsTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/LayoutAnimationsTest.tsx
@@ -13,8 +13,8 @@ import {
   StyleSheet,
 } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {useState} from 'react';
-import {Button} from '../components';
+import { useState } from 'react';
+import { Button } from '../components';
 
 if (
   Platform.OS === 'android' &&
@@ -59,7 +59,7 @@ function LayoutAnimationExample() {
             setTimeout(() => {
               LayoutAnimation.configureNext({
                 duration: 500,
-                update: {type: 'spring'},
+                update: { type: 'spring' },
               });
               setBoxPosition('right');
               setTimeout(() => {
@@ -91,7 +91,7 @@ function LayoutAnimationExample() {
               backgroundColor: 'orange',
               position: 'absolute',
             },
-            boxPosition === 'left' ? null : {left: 200},
+            boxPosition === 'left' ? null : { left: 200 },
           ])}
         />
       )}
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/LinkingTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/LinkingTest.tsx
index d79a4841352169e784e771bd021e7e3db99da6d6..280b79b4b4d737c5118b312df92db5add984d9f7 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/LinkingTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/LinkingTest.tsx
@@ -5,35 +5,35 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {Linking} from 'react-native';
+import { Linking } from 'react-native';
 import { TestSuite, TestCase } from '@rnoh/testerino';
-import {Button} from '../components';
+import { Button } from '../components';
 
 export function LinkingTest() {
   return (
     <TestSuite name="Linking (Stub)">
       <TestCase
         itShould="not crash when checking if url can be opened"
-        fn={async ({expect}) => {
+        fn={async ({ expect }) => {
           expect(await Linking.canOpenURL('http://foobar.com')).to.be.true;
         }}
       />
       <TestCase
         itShould="support http/https urls"
-        fn={async ({expect}) => {
+        fn={async ({ expect }) => {
           expect(await Linking.canOpenURL('http://foobar.com')).to.be.true;
           expect(await Linking.canOpenURL('https://foobar.com')).to.be.true;
         }}
       />
       <TestCase
         itShould="support tel urls"
-        fn={async ({expect}) => {
+        fn={async ({ expect }) => {
           expect(await Linking.canOpenURL('tel:1234567890')).to.be.true;
         }}
       />
       <TestCase
         itShould="not support wrong schema urls"
-        fn={async ({expect}) => {
+        fn={async ({ expect }) => {
           expect(await Linking.canOpenURL('wrong://host')).to.be.false;
         }}
       />
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/MiscTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/MiscTest.tsx
index 23032b00db35f6fe133c6c9e84b1344f75ea9986..d3b19f100ac5e9e27fb937d10522f9df7e55f0d0 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/MiscTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/MiscTest.tsx
@@ -20,9 +20,9 @@ import {
   View,
 } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {useContext} from 'react';
+import { useContext } from 'react';
 import React from 'react';
-import {Button} from '../components';
+import { Button } from '../components';
 
 export const MiscPropsTest = () => {
   const rootTag: RootTag = useContext(RootTagContext);
@@ -34,21 +34,21 @@ export const MiscPropsTest = () => {
       </TestCase>
       <TestCase
         itShould="pass when __DEV__ is defined and have boolean type"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(typeof __DEV__).to.be.eq('boolean');
         }}
       />
       <TestCase
         skip={Platform.OS === 'android'}
         itShould="represent a color as a number"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(processColor('red')).to.be.eq(0xffff0000);
         }}
       />
       {Platform.OS === 'harmony' && (
         <TestCase
           itShould="export harmony specific utils: registerViewConfig, ReactNativeViewAttributes and dispatchCommand"
-          fn={({expect}) => {
+          fn={({ expect }) => {
             expect(registerViewConfig).to.be.not.undefined;
             expect(ReactNativeViewAttributes).to.be.not.undefined;
             expect(dispatchCommand).to.be.not.undefined;
@@ -57,25 +57,25 @@ export const MiscPropsTest = () => {
       )}
       <TestCase
         itShould="export DeviceEventEmitter"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(DeviceEventEmitter).to.be.not.undefined;
         }}
       />
       <TestCase
         itShould="export findNodeHandle"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(findNodeHandle).to.be.not.undefined;
         }}
       />
       <TestCase
         itShould="export DrawerLayoutAndroid"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(DrawerLayoutAndroid).to.be.not.undefined;
         }}
       />
       <TestCase
         itShould="pass when RootTagContext is defined and have sensible value"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(rootTag).to.be.greaterThan(0);
         }}
       />
@@ -91,7 +91,7 @@ function DisplayNoneUpdateTest() {
   const [counter, setCounter] = React.useState(0);
   return (
     <View>
-      <Text style={{display, backgroundColor: 'red'}}>{counter}</Text>
+      <Text style={{ display, backgroundColor: 'red' }}>{counter}</Text>
       <Button
         onPress={() => setDisplay(display ? undefined : 'none')}
         label={display ? 'Show' : 'Hide'}
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ModalTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ModalTest.tsx
index 4ff313a7f8333e4bf95b40d58e371fcc40e02fb3..d158d2a4aed0132934e2df3d0b7be7dafaba19d5 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ModalTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ModalTest.tsx
@@ -6,9 +6,9 @@
  */
 
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import React, {useState} from 'react';
-import {Modal, StyleSheet, Text, View, ModalProps} from 'react-native';
-import {Button} from '../components';
+import React, { useState } from 'react';
+import { Modal, StyleSheet, Text, View, ModalProps } from 'react-native';
+import { Button } from '../components';
 
 export function ModalTest() {
   return (
@@ -19,14 +19,14 @@ export function ModalTest() {
       <TestCase
         itShould="trigger onShow event after modal is shown"
         initialState={false}
-        arrange={({setState}) => (
+        arrange={({ setState }) => (
           <ModalExample
             onShow={() => {
               setState(true);
             }}
           />
         )}
-        assert={({state, expect}) => {
+        assert={({ state, expect }) => {
           expect(state).to.be.true;
         }}
       />
@@ -38,7 +38,7 @@ const ModalExample = (props: ModalProps) => {
   const [modalVisible, setModalVisible] = useState(false);
   return (
     <View>
-      <Text style={[styles.textStyle, {color: 'black'}]}>
+      <Text style={[styles.textStyle, { color: 'black' }]}>
         {modalVisible ? 'shown' : 'hidden'}
       </Text>
       <Modal
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/NativeEventEmitterTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/NativeEventEmitterTest.tsx
index f924a93098e90b21888ecf124d57ac43e8ca41c6..820bdecf95f173d776789ac490da67531e04b38a 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/NativeEventEmitterTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/NativeEventEmitterTest.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {NativeEventEmitter} from 'react-native';
+import { NativeEventEmitter } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
 
 export const NativeEventEmitterTest = () => {
@@ -13,7 +13,7 @@ export const NativeEventEmitterTest = () => {
     <TestSuite name="NativeEventEmitter">
       <TestCase
         itShould="emit and react to events"
-        fn={async ({expect}) => {
+        fn={async ({ expect }) => {
           const eventEmitter = new NativeEventEmitter();
           return new Promise(resolve => {
             eventEmitter.addListener('foo', event => {
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/NetworkingTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/NetworkingTest.tsx
index ccc94581806453b306197bc5c84849009d6c6edc..d45e63b789d07c72b8a6367c3a51023e0b3095ce 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/NetworkingTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/NetworkingTest.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {StyleSheet, Text, View} from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
 import React from 'react';
 
@@ -68,7 +68,7 @@ export const NetworkingTest = () => {
     <TestSuite name="Networking">
       <TestCase
         itShould="download data"
-        fn={async ({expect}) => {
+        fn={async ({ expect }) => {
           const response = await fetch('https://reactnative.dev/movies.json');
           const result = await response.text();
           const parsed = JSON.parse(result);
@@ -77,7 +77,7 @@ export const NetworkingTest = () => {
       />
       <TestCase
         itShould="download and parse JSON data"
-        fn={async ({expect}) => {
+        fn={async ({ expect }) => {
           const response = await fetch('https://reactnative.dev/movies.json');
           const result = await response.json();
           expect(result.title).to.be.eq('The Basics - Networking');
@@ -85,7 +85,7 @@ export const NetworkingTest = () => {
       />
       <TestCase
         itShould="download data to an ArrayBuffer"
-        fn={async ({expect}) => {
+        fn={async ({ expect }) => {
           const response = await fetch('https://reactnative.dev/movies.json');
           const result = await response.arrayBuffer();
           expect(result.byteLength).to.be.eq(458);
@@ -93,7 +93,7 @@ export const NetworkingTest = () => {
       />
       <TestCase
         itShould="download data to a blob"
-        fn={async ({expect}) => {
+        fn={async ({ expect }) => {
           const response = await fetch('https://reactnative.dev/movies.json');
           const result = await response.blob();
           expect(result.size).to.be.eq(458);
@@ -101,7 +101,7 @@ export const NetworkingTest = () => {
       />
       <TestCase
         itShould="fail on bad url"
-        fn={async ({expect}) => {
+        fn={async ({ expect }) => {
           const received = await canFetch(
             'https://reactnative.dev/bad_url.json',
           );
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/PanResponderTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/PanResponderTest.tsx
index f405feb64c1d469c80f31729a1592f0c8f9199cf..28a40b7e02429429000c7279d77aaa0584bea998 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/PanResponderTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/PanResponderTest.tsx
@@ -13,14 +13,14 @@ import {
   View,
 } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {useRef} from 'react';
+import { useRef } from 'react';
 
 export const PanResponderTest = () => {
   return (
     <TestSuite name="PanResponder">
       <TestCase
         itShould="create PanResponder"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(PanResponder.create({})).to.be.not.empty;
         }}
       />
@@ -38,7 +38,7 @@ const PanResponderInScrollView = () => {
     PanResponder.create({
       onMoveShouldSetPanResponder: () => true,
       onPanResponderMove: Animated.event(
-        [null, {dx: pan.x, dy: pan.y}],
+        [null, { dx: pan.x, dy: pan.y }],
         undefined,
       ),
       onPanResponderRelease: () => {
@@ -52,7 +52,7 @@ const PanResponderInScrollView = () => {
       <View style={[styles.base, styles.view1]}>
         <Animated.View
           style={{
-            transform: [{translateX: pan.x}, {translateY: pan.y}],
+            transform: [{ translateX: pan.x }, { translateY: pan.y }],
           }}
           {...panResponder.panHandlers}>
           <View style={styles.box} />
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/PixelRatioTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/PixelRatioTest.tsx
index 8beddf17281b0ceace313a9fcf1cb6442f31fffe..9f1bb048ca741cfa136a2320e00eee5c8a7301e0 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/PixelRatioTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/PixelRatioTest.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {PixelRatio, Text} from 'react-native';
+import { PixelRatio, Text } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
 
 export const PixelRatioTest = () => {
@@ -13,7 +13,7 @@ export const PixelRatioTest = () => {
     <TestSuite name="PixelRatio">
       <TestCase
         itShould="return plausible pixel ratio (greater than or equal  1, less than 4)"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(PixelRatio.get())
             .to.be.greaterThanOrEqual(1)
             .and.to.be.lessThan(4);
@@ -21,7 +21,7 @@ export const PixelRatioTest = () => {
       />
       <TestCase
         itShould="return plausible fontScale (greater than 0, less than 4)"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(PixelRatio.getFontScale())
             .to.be.greaterThan(0)
             .and.to.be.lessThan(4);
@@ -29,7 +29,7 @@ export const PixelRatioTest = () => {
       />
       <TestCase
         itShould="convert layout size to pixel size correctly"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(PixelRatio.getPixelSizeForLayoutSize(10)).to.be.equal(
             PixelRatio.get() * 10,
           );
@@ -37,7 +37,7 @@ export const PixelRatioTest = () => {
       />
       <TestCase
         itShould="round to nearest pixel correctly"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           const ratio = PixelRatio.get();
           const nearestPixel = Math.round(8.4 * ratio) / ratio;
           expect(PixelRatio.roundToNearestPixel(8.4)).to.be.equal(nearestPixel);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/PlatformConstantsTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/PlatformConstantsTest.tsx
index 66d8c43e567c8d331f2f1e082a74b96c75b3a71f..858bb9a04c014c8e897a83c259b7a853969dbb60 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/PlatformConstantsTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/PlatformConstantsTest.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {Platform} from 'react-native';
+import { Platform } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
 
 export function PlatformConstantsTest() {
@@ -13,25 +13,25 @@ export function PlatformConstantsTest() {
     <TestSuite name="PlatformConstants">
       <TestCase
         itShould="use 'harmony' as platform name"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(Platform.OS).to.be.eq('harmony');
         }}
       />
       <TestCase
         itShould="specify platform version"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(Platform.Version.toString().split('.').length - 1).to.be.eq(3);
         }}
       />
       <TestCase
         itShould="not be running in tv mode"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(Platform.isTV).to.be.false;
         }}
       />
       <TestCase
         itShould="select Platform properly"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(
             Platform.select({
               android: 'a',
@@ -44,7 +44,7 @@ export function PlatformConstantsTest() {
       />
       <TestCase
         itShould="provide some RN version"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(Platform.constants.reactNativeVersion).to.be.not.undefined;
           expect(Platform.constants.reactNativeVersion.major).to.be.not
             .undefined;
@@ -56,13 +56,13 @@ export function PlatformConstantsTest() {
       />
       <TestCase
         itShould="provide some value for isTesting"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(typeof Platform.constants.isTesting).to.be.eq('boolean');
         }}
       />
       <TestCase
         itShould="specify product model"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           if (Platform.OS === 'harmony') {
             expect(Platform.constants.Model).to.include('NOH');
           }
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/PressableTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/PressableTest.tsx
index 73ae032b8ae6d3212ae5a362c420b1ef47144666..5e725851e2be856025f461bd852ae5166e3a6797 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/PressableTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/PressableTest.tsx
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
-import {Pressable, StyleSheet, View} from 'react-native';
+import React, { useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
 
 export function PressableTest() {
@@ -18,16 +18,16 @@ export function PressableTest() {
           onPressIn: false,
           onPress: false,
         }}
-        arrange={({setState}) => {
+        arrange={({ setState }) => {
           return (
             <Pressable
-              onPressIn={() => setState(prev => ({...prev, onPressIn: true}))}
-              onPress={() => setState(prev => ({...prev, onPress: true}))}>
+              onPressIn={() => setState(prev => ({ ...prev, onPressIn: true }))}
+              onPress={() => setState(prev => ({ ...prev, onPress: true }))}>
               <View style={styles.unpressed} />
             </Pressable>
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.deep.eq({
             onPressIn: true,
             onPress: true,
@@ -39,14 +39,14 @@ export function PressableTest() {
         initialState={{
           onLongPress: false,
         }}
-        arrange={({setState}) => {
+        arrange={({ setState }) => {
           return (
-            <Pressable onLongPress={() => setState({onLongPress: true})}>
+            <Pressable onLongPress={() => setState({ onLongPress: true })}>
               <View style={styles.unpressed} />
             </Pressable>
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.deep.eq({
             onLongPress: true,
           });
@@ -57,14 +57,14 @@ export function PressableTest() {
         initialState={{
           onPressOut: false,
         }}
-        arrange={({setState}) => {
+        arrange={({ setState }) => {
           return (
-            <Pressable onPressOut={() => setState({onPressOut: true})}>
+            <Pressable onPressOut={() => setState({ onPressOut: true })}>
               <View style={styles.unpressed} />
             </Pressable>
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.deep.eq({
             onPressOut: true,
           });
@@ -76,20 +76,20 @@ export function PressableTest() {
           tested: false,
           pressed: false,
         }}
-        arrange={({setState}) => {
+        arrange={({ setState }) => {
           return (
             <Pressable
-              onPress={() => setState(prev => ({...prev, tested: true}))}
+              onPress={() => setState(prev => ({ ...prev, tested: true }))}
               style={styles.pressed}>
               <Pressable
-                onPress={() => setState(prev => ({...prev, pressed: true}))}
+                onPress={() => setState(prev => ({ ...prev, pressed: true }))}
                 style={styles.unpressed}
                 disabled
               />
             </Pressable>
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.deep.eq({
             tested: true,
             pressed: false,
@@ -99,14 +99,14 @@ export function PressableTest() {
       <TestCase
         itShould="change color to blue on hover"
         skip
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/417
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/417
       >
         <HoverView />
       </TestCase>
       <TestCase
         itShould="pass when blue background is pressed"
         initialState={false}
-        arrange={({setState}) => (
+        arrange={({ setState }) => (
           <View
             style={{
               backgroundColor: 'blue',
@@ -114,7 +114,7 @@ export function PressableTest() {
               position: 'relative',
             }}>
             <Pressable
-              hitSlop={{top: 48, left: 48, bottom: 48, right: 48}}
+              hitSlop={{ top: 48, left: 48, bottom: 48, right: 48 }}
               style={{
                 width: 48,
                 height: 48,
@@ -140,7 +140,7 @@ export function PressableTest() {
             />
           </View>
         )}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.true;
         }}
       />
@@ -158,7 +158,7 @@ const HoverView = () => {
       onHoverOut={() => {
         setHovered(false);
       }}
-      style={{...styles.unpressed, backgroundColor: hovered ? 'blue' : 'red'}}
+      style={{ ...styles.unpressed, backgroundColor: hovered ? 'blue' : 'red' }}
     />
   );
 };
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/RefreshControlTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/RefreshControlTest.tsx
index 6dc163a60f99a0eb87e470e906405af994ec508e..0ed5f04cca1b9b3c662d0dae42b83b895d769863 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/RefreshControlTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/RefreshControlTest.tsx
@@ -15,7 +15,7 @@ import {
   View,
 } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {useEffect, useState} from 'react';
+import { useEffect, useState } from 'react';
 
 export const RefreshControlTest = () => {
   const [refreshKey, setRefreshKey] = useState(0);
@@ -28,23 +28,23 @@ export const RefreshControlTest = () => {
     <TestSuite name="RefreshControl">
       <TestCase itShould="display refresh control every second">
         <ScrollView
-          style={{height: 128, backgroundColor: 'white'}}
+          style={{ height: 128, backgroundColor: 'white' }}
           refreshControl={
             <RefreshControl
               refreshing={refreshKey % 2 === 0}
-              onRefresh={() => {}}
+              onRefresh={() => { }}
             />
           }
         />
       </TestCase>
       <TestCase itShould="display refresh control with tintColor">
         <ScrollView
-          style={{height: 128, backgroundColor: 'white'}}
+          style={{ height: 128, backgroundColor: 'white' }}
           refreshControl={
             <RefreshControl
               refreshing={refreshKey % 2 === 0}
               tintColor={'#FFC0CB'}
-              onRefresh={() => {}}
+              onRefresh={() => { }}
             />
           }
         />
@@ -105,7 +105,7 @@ function PullToRefreshExample({
 
   return (
     <FlatList
-      style={{height: 256}}
+      style={{ height: 256 }}
       refreshing={isRefreshing}
       onRefresh={() => {
         if (!doNothingOnRefresh) {
@@ -114,8 +114,8 @@ function PullToRefreshExample({
         }
       }}
       data={[1, 2, 3, 4, 5]}
-      renderItem={({item}) => (
-        <Text style={{height: 96, borderBottomWidth: 1}}>{item}</Text>
+      renderItem={({ item }) => (
+        <Text style={{ height: 96, borderBottomWidth: 1 }}>{item}</Text>
       )}
     />
   );
@@ -130,7 +130,7 @@ function PullToRefreshProgressViewOffset({
 
   return (
     <ScrollView
-      style={{height: '90%', backgroundColor: 'lightgray'}}
+      style={{ height: '90%', backgroundColor: 'lightgray' }}
       refreshControl={
         <RefreshControl
           refreshing={refreshing}
@@ -141,13 +141,13 @@ function PullToRefreshProgressViewOffset({
           progressViewOffset={progressViewOffset}
         />
       }>
-      <View style={{height: 50, backgroundColor: 'lightblue'}}>
+      <View style={{ height: 50, backgroundColor: 'lightblue' }}>
         <Text>First Content Component</Text>
       </View>
-      <View style={{height: 50, backgroundColor: 'lightgreen'}}>
+      <View style={{ height: 50, backgroundColor: 'lightgreen' }}>
         <Text>Second Content Component</Text>
       </View>
-      <View style={{height: 50, backgroundColor: 'lightblue'}}>
+      <View style={{ height: 50, backgroundColor: 'lightblue' }}>
         <Text>Third Content Component</Text>
       </View>
     </ScrollView>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/RenderingTest.harmony.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/RenderingTest.harmony.tsx
index d17315f5bc4f3e8378c31c1cb451b89d830f5a25..7c736252853e0482451bb8695cf6d6079cd52d96 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/RenderingTest.harmony.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/RenderingTest.harmony.tsx
@@ -7,13 +7,13 @@
 
 import { TestSuite, TestCase } from '@rnoh/testerino';
 import React from 'react';
-import {useState} from 'react';
+import { useState } from 'react';
 import {
   View,
   registerViewConfig,
   ReactNativeViewAttributes,
 } from 'react-native';
-import {Button} from '../components';
+import { Button } from '../components';
 
 const PropsDisplayer: typeof View = registerViewConfig('PropsDisplayer', () => {
   return {
@@ -43,7 +43,7 @@ export function RenderingTest() {
         <Timeout
           ms={1000}
           renderItem={refreshKey => (
-            <View style={{height: 64}}>
+            <View style={{ height: 64 }}>
               {refreshKey % 2 === 0 ? (
                 <Rectangle backgroundColor={'red'} />
               ) : null}
@@ -66,9 +66,9 @@ export function RenderingTest() {
                   borderTopColor: 'red',
                   borderRadius: 4,
                   borderBottomRightRadius: 8,
-                  transform: [{translateX: 1}],
+                  transform: [{ translateX: 1 }],
                   pointerEvents: 'auto',
-                  shadowOffset: {width: 0, height: 0},
+                  shadowOffset: { width: 0, height: 0 },
                   shadowOpacity: 0.9,
                   shadowRadius: 9,
                   flexDirection: 'row',
@@ -86,7 +86,7 @@ export function RenderingTest() {
   );
 }
 
-function Rectangle({backgroundColor}: {backgroundColor: string}) {
+function Rectangle({ backgroundColor }: { backgroundColor: string }) {
   return (
     <View
       style={{
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/RenderingTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/RenderingTest.tsx
index fd3a52d32b5b1770426794a819d3724a1e735a1f..494a34694f8df6b557da073d6bf8d96a6207c74a 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/RenderingTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/RenderingTest.tsx
@@ -7,12 +7,12 @@
 
 import React from 'react';
 import { TestSuite } from '@rnoh/testerino';
-import {Text} from 'react-native';
+import { Text } from 'react-native';
 
 export function RenderingTest() {
   return (
     <TestSuite name="Rendering">
-      <Text style={{height: 20, color: 'white'}}>Platform not supported</Text>
+      <Text style={{ height: 20, color: 'white' }}>Platform not supported</Text>
     </TestSuite>
   );
 }
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest.tsx
index e0c067fa8ae60a4579788bef6af4ff08f306d1aa..5a34e863315baef1bb71cb1f2597c0862ac2145b 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest.tsx
@@ -17,9 +17,9 @@ import {
   ScrollViewProps,
 } from 'react-native';
 import { TestSuite, TestCase } from '@rnoh/testerino';
-import React, {useEffect, useRef, useState} from 'react';
-import {Button, ObjectDisplayer} from '../components';
-import {GestureResponderEvent} from 'react-native/Libraries/Types/CoreEventTypes';
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, ObjectDisplayer } from '../components';
+import { GestureResponderEvent } from 'react-native/Libraries/Types/CoreEventTypes';
 
 const COMMON_PROPS = {
   style: {
@@ -282,7 +282,7 @@ export function ScrollViewTest() {
         <TestCase
           skip={Platform.OS === 'android'}
           itShould="stick item 13 and 20 to the bottom (invertStickyHeaders)"
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/309
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/309
         >
           <View style={styles.wrapperView}>
             <ScrollView
@@ -307,8 +307,8 @@ export function ScrollViewTest() {
       <TestSuite name="pointer events">
         <TestCase
           itShould="call inner and outer view when pressing inner"
-          initialState={{inner: false, outer: false, outerContainer: false}}
-          arrange={({setState, reset}) => {
+          initialState={{ inner: false, outer: false, outerContainer: false }}
+          arrange={({ setState, reset }) => {
             return (
               <PointerEventsView
                 pointerEventsOuter="auto"
@@ -317,7 +317,7 @@ export function ScrollViewTest() {
               />
             );
           }}
-          assert={({expect, state}) => {
+          assert={({ expect, state }) => {
             expect(state).to.be.deep.eq({
               inner: true,
               outer: true,
@@ -329,8 +329,8 @@ export function ScrollViewTest() {
           //it seems there's a bug on Android, which causes pointerEvents to not work correctly for Scrollviews
           skip // https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/424
           itShould="[FAILS on Android/Harmony] call only outer when pressing inner view"
-          initialState={{inner: false, outer: false, outerContainer: true}}
-          arrange={({setState, reset}) => {
+          initialState={{ inner: false, outer: false, outerContainer: true }}
+          arrange={({ setState, reset }) => {
             return (
               <PointerEventsView
                 pointerEventsOuter="box-only"
@@ -339,7 +339,7 @@ export function ScrollViewTest() {
               />
             );
           }}
-          assert={({expect, state}) => {
+          assert={({ expect, state }) => {
             expect(state).to.be.deep.eq({
               inner: false,
               outer: true,
@@ -350,8 +350,8 @@ export function ScrollViewTest() {
         <TestCase
           //it seems there's a bug on Android, which causes pointerEvents to not work correctly for Scrollviews
           itShould="[FAILS on Android] call inner and outer only when pressing inner view"
-          initialState={{inner: false, outer: false, outerContainer: false}}
-          arrange={({setState, reset}) => {
+          initialState={{ inner: false, outer: false, outerContainer: false }}
+          arrange={({ setState, reset }) => {
             return (
               <PointerEventsView
                 disableOuterContainerTouch
@@ -361,7 +361,7 @@ export function ScrollViewTest() {
               />
             );
           }}
-          assert={({expect, state}) => {
+          assert={({ expect, state }) => {
             expect(state.inner).to.be.true;
             expect(state.outer).to.be.true;
           }}
@@ -369,8 +369,8 @@ export function ScrollViewTest() {
         <TestCase
           //it seems there's a bug on Android, which causes pointerEvents to not work correctly for Scrollviews
           itShould="[FAILS on Android] not call inner or outer when pressing inner or outer views"
-          initialState={{inner: false, outer: false, outerContainer: false}}
-          arrange={({setState, reset}) => {
+          initialState={{ inner: false, outer: false, outerContainer: false }}
+          arrange={({ setState, reset }) => {
             return (
               <PointerEventsView
                 pointerEventsOuter="none"
@@ -379,7 +379,7 @@ export function ScrollViewTest() {
               />
             );
           }}
-          assert={({expect, state}) => {
+          assert={({ expect, state }) => {
             expect(state).to.be.deep.eq({
               inner: false,
               outer: false,
@@ -390,12 +390,12 @@ export function ScrollViewTest() {
       </TestSuite>
       <TestSuite name="snapTo*">
         <SnapTestCases
-          scrollViewProps={{disableIntervalMomentum: false, horizontal: false}}
+          scrollViewProps={{ disableIntervalMomentum: false, horizontal: false }}
         />
       </TestSuite>
       <TestSuite name="disableIntervalMomentum">
         <SnapTestCases
-          scrollViewProps={{disableIntervalMomentum: true, horizontal: false}}
+          scrollViewProps={{ disableIntervalMomentum: true, horizontal: false }}
         />
       </TestSuite>
       <TestSuite name="other props">
@@ -418,14 +418,14 @@ export function ScrollViewTest() {
         <TestCase
           modal
           itShould="display ScrollView with the third view at the top (contentOffset)"
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/305
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/305
         >
           <ContentOffsetTestCase />
         </TestCase>
         <TestCase
           modal
           itShould="scroll when contentOffset property is changed (contentOffset)"
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/305
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/305
         >
           <ToggleContentOffsetTestCase />
         </TestCase>
@@ -438,12 +438,12 @@ export function ScrollViewTest() {
           modal
           skip
           itShould="[FAILS on Harmony/Android] display ScrollView with different contentInsets (contentInset)"
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/304
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/304
         >
           <View style={styles.wrapperView}>
             <ScrollView
               {...COMMON_PROPS}
-              contentInset={{top: 10, right: 20, bottom: 30, left: 40}}
+              contentInset={{ top: 10, right: 20, bottom: 30, left: 40 }}
             />
           </View>
         </TestCase>
@@ -451,7 +451,7 @@ export function ScrollViewTest() {
           modal
           skip
           itShould="[FAILS on Harmony/Android] adjust the scrollview when showing keyboard (automaticallyAdjustKeyboardInsets)"
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/302
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/302
         >
           <View style={styles.wrapperView}>
             <TextInput style={styles.textInput} />
@@ -477,7 +477,7 @@ export function ScrollViewTest() {
                 <ScrollView
                   {...COMMON_PROPS}
                   scrollEventThrottle={1000}
-                  onScroll={(e: {nativeEvent: Object}) => {
+                  onScroll={(e: { nativeEvent: Object }) => {
                     setObject(e.nativeEvent);
                   }}
                 />
@@ -488,7 +488,7 @@ export function ScrollViewTest() {
         <TestCase
           modal
           itShould="the left scrollview should decelerate faster (stops earlier) than the right one (decelarationRate)">
-          <View style={[styles.wrapperView, {flexDirection: 'row'}]}>
+          <View style={[styles.wrapperView, { flexDirection: 'row' }]}>
             <ScrollView {...COMMON_PROPS} decelerationRate={0.8} />
             <ScrollView {...COMMON_PROPS} decelerationRate={0.999} />
           </View>
@@ -497,11 +497,11 @@ export function ScrollViewTest() {
           modal
           skip
           itShould="the left scrollview should dismiss the keyboard on scroll and the right one shouldn't (keyboardDismissMode)"
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/310
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/310
         >
           <View>
             <TextInput style={styles.textInput} />
-            <View style={[styles.wrapperView, {flexDirection: 'row'}]}>
+            <View style={[styles.wrapperView, { flexDirection: 'row' }]}>
               <ScrollView {...COMMON_PROPS} keyboardDismissMode={'on-drag'}>
                 {getScrollViewContent({})}
               </ScrollView>
@@ -515,11 +515,11 @@ export function ScrollViewTest() {
           modal
           skip
           itShould="[FAILS on Harmony/ Android Emulator] the left scrollview should dismiss the keyboard on tap and the right one shouldn't (keyboardShouldPersistTaps)"
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/311
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/311
         >
           <View>
             <TextInput style={styles.textInput} />
-            <View style={[styles.wrapperView, {flexDirection: 'row'}]}>
+            <View style={[styles.wrapperView, { flexDirection: 'row' }]}>
               <ScrollView
                 {...COMMON_PROPS}
                 keyboardShouldPersistTaps={'never'}
@@ -534,7 +534,7 @@ export function ScrollViewTest() {
         <TestCase
           modal
           itShould="the left scrollview should bounce (briefly scroll beyond the content to show the view below and then come back to top/bottom accordingly)">
-          <View style={[styles.wrapperView, {flexDirection: 'row'}]}>
+          <View style={[styles.wrapperView, { flexDirection: 'row' }]}>
             <ScrollView {...COMMON_PROPS} />
             <ScrollView {...COMMON_PROPS} bounces={false} />
           </View>
@@ -543,7 +543,7 @@ export function ScrollViewTest() {
           modal
           skip
           itShould="[FAILS on Harmony/Android] scroll outside of the content when pressing the button (scrollToOverflowEnabled)"
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/315
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/315
         >
           <ScrollToOverflowEnabledTestCase />
         </TestCase>
@@ -551,12 +551,12 @@ export function ScrollViewTest() {
           modal
           skip
           itShould="the left scrollview should allow for nested scroll while the right one shouldn't (nestedScrollEnabled)"
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/312
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/312
         >
           <View
             style={[
               styles.wrapperView,
-              {flexDirection: 'row', alignContent: 'space-between'},
+              { flexDirection: 'row', alignContent: 'space-between' },
             ]}>
             <ScrollView {...COMMON_PROPS}>
               <ScrollView
@@ -568,7 +568,7 @@ export function ScrollViewTest() {
                   borderWidth: 2,
                 }}>
                 {getScrollViewContent({
-                  style: {backgroundColor: 'green'},
+                  style: { backgroundColor: 'green' },
                   amountOfChildren: 5,
                 })}
               </ScrollView>
@@ -584,7 +584,7 @@ export function ScrollViewTest() {
                   borderWidth: 2,
                 }}>
                 {getScrollViewContent({
-                  style: {backgroundColor: 'green'},
+                  style: { backgroundColor: 'green' },
                   amountOfChildren: 5,
                 })}
               </ScrollView>
@@ -616,7 +616,7 @@ export function ScrollViewTest() {
   );
 }
 
-function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
+function SnapTestCases(props: { scrollViewProps: ScrollViewProps }) {
   return (
     <>
       <TestCase
@@ -627,10 +627,10 @@ function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
           commonProps={{
             ...props.scrollViewProps,
             snapToOffsets: [ITEM_HEIGHT * 5],
-            children: getScrollViewContent({amountOfChildren: 25}),
+            children: getScrollViewContent({ amountOfChildren: 25 }),
           }}
-          lhsProps={{snapToEnd: true}}
-          rhsProps={{snapToEnd: false}}
+          lhsProps={{ snapToEnd: true }}
+          rhsProps={{ snapToEnd: false }}
         />
       </TestCase>
       <TestCase
@@ -641,10 +641,10 @@ function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
           commonProps={{
             ...props.scrollViewProps,
             snapToOffsets: [ITEM_HEIGHT * 5],
-            children: getScrollViewContent({amountOfChildren: 25}),
+            children: getScrollViewContent({ amountOfChildren: 25 }),
           }}
-          lhsProps={{snapToStart: true}}
-          rhsProps={{snapToStart: false}}
+          lhsProps={{ snapToStart: true }}
+          rhsProps={{ snapToStart: false }}
         />
       </TestCase>
       <TestCase modal itShould="snap to page">
@@ -652,10 +652,10 @@ function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
           scrollViewLength={ITEM_HEIGHT * 5}
           commonProps={{
             ...props.scrollViewProps,
-            children: getScrollViewContent({amountOfChildren: 25}),
+            children: getScrollViewContent({ amountOfChildren: 25 }),
           }}
-          lhsProps={{pagingEnabled: false}}
-          rhsProps={{pagingEnabled: true}}
+          lhsProps={{ pagingEnabled: false }}
+          rhsProps={{ pagingEnabled: true }}
         />
       </TestCase>
       <TestCase modal itShould="snap to item 1, 3, 5, 7, 9, ...">
@@ -663,10 +663,10 @@ function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
           scrollViewLength={ITEM_HEIGHT * 5}
           commonProps={{
             ...props.scrollViewProps,
-            children: getScrollViewContent({amountOfChildren: 25}),
+            children: getScrollViewContent({ amountOfChildren: 25 }),
           }}
           lhsProps={{}}
-          rhsProps={{snapToInterval: ITEM_HEIGHT * 2}}
+          rhsProps={{ snapToInterval: ITEM_HEIGHT * 2 }}
         />
       </TestCase>
       <TestCase modal itShould="snap to item 2, 3, 7, and 11 and 21">
@@ -674,7 +674,7 @@ function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
           scrollViewLength={ITEM_HEIGHT * 5}
           commonProps={{
             ...props.scrollViewProps,
-            children: getScrollViewContent({amountOfChildren: 25}),
+            children: getScrollViewContent({ amountOfChildren: 25 }),
           }}
           lhsProps={{}}
           rhsProps={{
@@ -693,11 +693,11 @@ function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
             scrollViewLength={ITEM_HEIGHT * 1.5}
             commonProps={{
               ...props.scrollViewProps,
-              children: getScrollViewContent({amountOfChildren: 25}),
+              children: getScrollViewContent({ amountOfChildren: 25 }),
               snapToInterval: ITEM_HEIGHT,
             }}
-            lhsProps={{snapToAlignment: 'start'}}
-            rhsProps={{snapToAlignment: 'center'}}
+            lhsProps={{ snapToAlignment: 'start' }}
+            rhsProps={{ snapToAlignment: 'center' }}
           />
         </TestCase>
         <TestCase modal itShould="snap to item {lhs: start, rhs: end}">
@@ -705,18 +705,18 @@ function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
             scrollViewLength={ITEM_HEIGHT * 1.5}
             commonProps={{
               ...props.scrollViewProps,
-              children: getScrollViewContent({amountOfChildren: 25}),
+              children: getScrollViewContent({ amountOfChildren: 25 }),
               snapToInterval: ITEM_HEIGHT,
             }}
-            lhsProps={{snapToAlignment: 'start'}}
-            rhsProps={{snapToAlignment: 'end'}}
+            lhsProps={{ snapToAlignment: 'start' }}
+            rhsProps={{ snapToAlignment: 'end' }}
           />
         </TestCase>
       </TestSuite>
     </>
   );
 }
-const Item = (props: {label: string; mode: 'dark' | 'light'}) => {
+const Item = (props: { label: string; mode: 'dark' | 'light' }) => {
   const stylesheet = StyleSheet.create({
     dark: {
       backgroundColor: '#47443D',
@@ -741,7 +741,7 @@ const Item = (props: {label: string; mode: 'dark' | 'light'}) => {
   );
 };
 
-const ITEMS = Array.from({length: 20}, (_, index) => (
+const ITEMS = Array.from({ length: 20 }, (_, index) => (
   <Item
     label={`Item${index}`}
     key={`item${index}`}
@@ -840,14 +840,14 @@ function MomentumTestCase() {
           setHasMomentumEnded(0);
         }}
       />
-      <View style={{backgroundColor: 'white', width: '100%'}}>
-        <Text style={{height: 16}}>hasMomentumBegan: {hasMomentumBegan}</Text>
-        <Text style={{height: 16}}>hasMomentumEnded: {hasMomentumEnded}</Text>
-        <Text style={{height: 16}}>hasDragBegan: {hasDragBegan}</Text>
-        <Text style={{height: 16}}>hasDragEnded: {hasDragEnded}</Text>
+      <View style={{ backgroundColor: 'white', width: '100%' }}>
+        <Text style={{ height: 16 }}>hasMomentumBegan: {hasMomentumBegan}</Text>
+        <Text style={{ height: 16 }}>hasMomentumEnded: {hasMomentumEnded}</Text>
+        <Text style={{ height: 16 }}>hasDragBegan: {hasDragBegan}</Text>
+        <Text style={{ height: 16 }}>hasDragEnded: {hasDragEnded}</Text>
       </View>
 
-      <View style={{width: 200, height: 200}}>
+      <View style={{ width: 200, height: 200 }}>
         <ScrollView
           onScrollBeginDrag={() => {
             setHasDragBegan(p => p + 1);
@@ -861,12 +861,12 @@ function MomentumTestCase() {
           onMomentumScrollEnd={() => {
             setHasMomentumEnded(p => p + 1);
           }}>
-          <View style={{backgroundColor: 'red', width: '100%', height: 150}} />
-          <View style={{backgroundColor: 'blue', width: '100%', height: 150}} />
+          <View style={{ backgroundColor: 'red', width: '100%', height: 150 }} />
+          <View style={{ backgroundColor: 'blue', width: '100%', height: 150 }} />
           <View
-            style={{backgroundColor: 'green', width: '100%', height: 150}}
+            style={{ backgroundColor: 'green', width: '100%', height: 150 }}
           />
-          <View style={{backgroundColor: 'red', width: '100%', height: 150}} />
+          <View style={{ backgroundColor: 'red', width: '100%', height: 150 }} />
         </ScrollView>
       </View>
     </>
@@ -880,10 +880,10 @@ function ScrollEnabledTestCase() {
       <Button
         label={'Scroll To offset y 150'}
         onPress={() => {
-          scrollRef.current?.scrollTo({x: 0, y: 150, animated: false});
+          scrollRef.current?.scrollTo({ x: 0, y: 150, animated: false });
         }}
       />
-      <ScrollView style={{flex: 1}} scrollEnabled={false} ref={scrollRef}>
+      <ScrollView style={{ flex: 1 }} scrollEnabled={false} ref={scrollRef}>
         {getScrollViewContent({})}
       </ScrollView>
     </View>
@@ -901,7 +901,7 @@ function FlashIndicatorsTest() {
         }}
       />
       <ScrollView
-        style={{flex: 1}}
+        style={{ flex: 1 }}
         scrollEnabled={true}
         showsVerticalScrollIndicator={false}
         ref={scrollRef}>
@@ -918,7 +918,7 @@ function ScrollToOverflowEnabledTestCase() {
       <Button
         label={'Scroll outside of the content'}
         onPress={() => {
-          ref.current?.scrollTo({x: 0, y: -60, animated: true});
+          ref.current?.scrollTo({ x: 0, y: -60, animated: true });
         }}
       />
       <ScrollView scrollToOverflowEnabled={true} ref={ref}>
@@ -933,7 +933,7 @@ function OnContentSizeChangeTestCase() {
     <ObjectDisplayer
       renderContent={setObject => {
         return (
-          <View style={{width: '100%', height: '70%'}}>
+          <View style={{ width: '100%', height: '70%' }}>
             <Button
               label={'Add one more item'}
               onPress={() => {
@@ -942,9 +942,9 @@ function OnContentSizeChangeTestCase() {
             />
             <ScrollView
               onContentSizeChange={(_, contentHeight) => {
-                setObject({contentHeight});
+                setObject({ contentHeight });
               }}>
-              {getScrollViewContent({amountOfChildren: amountOfChildren})}
+              {getScrollViewContent({ amountOfChildren: amountOfChildren })}
             </ScrollView>
           </View>
         );
@@ -960,7 +960,7 @@ function ContentOffsetTestCase() {
         style={{
           ...styles.wrapperView,
         }}
-        contentOffset={{x: 0, y: 100}}>
+        contentOffset={{ x: 0, y: 100 }}>
         {getScrollViewContent({})}
       </ScrollView>
     </View>
@@ -984,7 +984,7 @@ function ToggleContentOffsetTestCase() {
         style={{
           ...styles.wrapperView,
         }}
-        contentOffset={{x: 0, y: contentOffset}}>
+        contentOffset={{ x: 0, y: contentOffset }}>
         {getScrollViewContent({})}
       </ScrollView>
     </View>
@@ -1006,7 +1006,7 @@ function BackfaceVisibilityTestCase() {
         style={{
           ...styles.wrapperView,
           backfaceVisibility: backfaceVisibility ? 'visible' : 'hidden',
-          transform: [{rotateX: '180deg'}],
+          transform: [{ rotateX: '180deg' }],
         }}>
         {getScrollViewContent({})}
       </ScrollView>
@@ -1045,7 +1045,7 @@ function getScrollViewContent({
         ]}
         pointerEvents={pointerEvents}
         onTouchEnd={onTouchEnd}>
-        <Text style={{textAlign: 'center', height: 15}}> {idx + 1}</Text>
+        <Text style={{ textAlign: 'center', height: 15 }}> {idx + 1}</Text>
       </View>
     );
   });
@@ -1068,7 +1068,7 @@ function getScrollViewContentHorizontal({
           },
           style,
         ]}>
-        <Text style={{textAlign: 'center', height: 15}}> {idx + 1}</Text>
+        <Text style={{ textAlign: 'center', height: 15 }}> {idx + 1}</Text>
       </View>
     );
   });
@@ -1087,15 +1087,15 @@ function PointerEventsView(props: {
   reset: () => void;
 }) {
   return (
-    <View style={{height: 100, width: '100%', flexDirection: 'row'}}>
+    <View style={{ height: 100, width: '100%', flexDirection: 'row' }}>
       <View
-        style={{backgroundColor: 'red'}}
+        style={{ backgroundColor: 'red' }}
         onTouchEnd={
           props.disableOuterContainerTouch
             ? undefined
             : () => {
-                props.setState(prev => ({...prev, outerContainer: true}));
-              }
+              props.setState(prev => ({ ...prev, outerContainer: true }));
+            }
         }>
         <ScrollView
           nestedScrollEnabled
@@ -1107,12 +1107,12 @@ function PointerEventsView(props: {
           }}
           pointerEvents={props.pointerEventsOuter}
           onTouchEnd={() => {
-            props.setState(prev => ({...prev, outer: true}));
+            props.setState(prev => ({ ...prev, outer: true }));
           }}>
           {getScrollViewContent({
             amountOfChildren: 3,
             onTouchEnd: () => {
-              props.setState(prev => ({...prev, inner: true}));
+              props.setState(prev => ({ ...prev, inner: true }));
             },
             pointerEvents: props.pointerEventsInner,
           })}
@@ -1135,23 +1135,23 @@ function ScrollViewComparator({
   rhsProps: ScrollViewProps;
 }) {
   return (
-    <View style={{width: '100%'}}>
+    <View style={{ width: '100%' }}>
       <View
-        style={{flexDirection: 'row', width: '100%', alignItems: 'flex-end'}}>
-        <View style={{flex: 1}}>
-          <Text style={{fontSize: 12}}>{JSON.stringify(lhsProps)}</Text>
-          <View style={{height: scrollViewLength}}>
+        style={{ flexDirection: 'row', width: '100%', alignItems: 'flex-end' }}>
+        <View style={{ flex: 1 }}>
+          <Text style={{ fontSize: 12 }}>{JSON.stringify(lhsProps)}</Text>
+          <View style={{ height: scrollViewLength }}>
             <ScrollView
-              style={{flex: 1, height: scrollViewLength}}
-              {...{...commonProps, ...lhsProps}}
+              style={{ flex: 1, height: scrollViewLength }}
+              {...{ ...commonProps, ...lhsProps }}
             />
           </View>
         </View>
-        <View style={{width: 4, height: '100%', backgroundColor: 'gray'}} />
-        <View style={{flex: 1}}>
-          <Text style={{fontSize: 12}}>{JSON.stringify(rhsProps)}</Text>
-          <View style={{height: scrollViewLength}}>
-            <ScrollView {...{...commonProps, ...rhsProps}} style={{flex: 1}} />
+        <View style={{ width: 4, height: '100%', backgroundColor: 'gray' }} />
+        <View style={{ flex: 1 }}>
+          <Text style={{ fontSize: 12 }}>{JSON.stringify(rhsProps)}</Text>
+          <View style={{ height: scrollViewLength }}>
+            <ScrollView {...{ ...commonProps, ...rhsProps }} style={{ flex: 1 }} />
           </View>
         </View>
       </View>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ContentContainerStyleTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ContentContainerStyleTest.tsx
index 546c5a07b99165da2cf3bb139cdbcc9a9ce5aeaa..f47b08b9c84c52c123e1372c40ce6817823f78cf 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ContentContainerStyleTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ContentContainerStyleTest.tsx
@@ -6,8 +6,8 @@
  */
 
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {ScrollView, StyleSheet, View} from 'react-native';
-import {COMMON_PROPS} from './fixtures';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import { COMMON_PROPS } from './fixtures';
 
 export function ContentContainerStyleTest() {
   return (
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/KeyboardTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/KeyboardTest.tsx
index b750c37c78620a93277aff41ff6aad1688dfc54d..1aa9be73f0a735c70d64ad57c7df029bc503963c 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/KeyboardTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/KeyboardTest.tsx
@@ -6,8 +6,8 @@
  */
 
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {Platform, ScrollView, StyleSheet, TextInput, View} from 'react-native';
-import {COMMON_PROPS, getScrollViewContent} from './fixtures';
+import { Platform, ScrollView, StyleSheet, TextInput, View } from 'react-native';
+import { COMMON_PROPS, getScrollViewContent } from './fixtures';
 
 export function KeyboardTest() {
   return (
@@ -16,11 +16,11 @@ export function KeyboardTest() {
         modal
         skip
         itShould="the left scrollview should dismiss the keyboard on scroll and the right one shouldn't (keyboardDismissMode)"
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/310
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/310
       >
         <View>
           <TextInput style={styles.textInput} />
-          <View style={[styles.wrapperView, {flexDirection: 'row'}]}>
+          <View style={[styles.wrapperView, { flexDirection: 'row' }]}>
             <ScrollView {...COMMON_PROPS} keyboardDismissMode={'on-drag'}>
               {getScrollViewContent({})}
             </ScrollView>
@@ -32,9 +32,9 @@ export function KeyboardTest() {
       </TestCase>
       <TestCase
         modal
-        skip={Platform.select({android: 'fails', harmony: 'fails on Android'})}
+        skip={Platform.select({ android: 'fails', harmony: 'fails on Android' })}
         itShould="adjust the scrollview when showing keyboard (automaticallyAdjustKeyboardInsets)"
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/302
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/302
       >
         <View style={styles.wrapperView}>
           <TextInput style={styles.textInput} />
@@ -48,11 +48,11 @@ export function KeyboardTest() {
           harmony: 'fails on Android Emulator',
         })}
         itShould="the left scrollview should dismiss the keyboard on tap and the right one shouldn't (keyboardShouldPersistTaps)"
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/311
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/311
       >
         <View>
           <TextInput style={styles.textInput} />
-          <View style={[styles.wrapperView, {flexDirection: 'row'}]}>
+          <View style={[styles.wrapperView, { flexDirection: 'row' }]}>
             <ScrollView {...COMMON_PROPS} keyboardShouldPersistTaps={'never'} />
             <ScrollView
               {...COMMON_PROPS}
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/MiscPropsTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/MiscPropsTest.tsx
index 8457078179ead8bb6164a437753dd61c0dd06af6..d6c870ec6586592048852d6b4875383cf057dc0a 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/MiscPropsTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/MiscPropsTest.tsx
@@ -6,11 +6,11 @@
  */
 
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {Platform, ScrollView, StyleSheet, View} from 'react-native';
+import { Platform, ScrollView, StyleSheet, View } from 'react-native';
 import React from 'react';
-import {COMMON_PROPS, getScrollViewContent} from './fixtures';
-import {useEffect, useRef, useState} from 'react';
-import {Button, ObjectDisplayer} from '../../components';
+import { COMMON_PROPS, getScrollViewContent } from './fixtures';
+import { useEffect, useRef, useState } from 'react';
+import { Button, ObjectDisplayer } from '../../components';
 
 export function MiscPropsTest() {
   return (
@@ -34,14 +34,14 @@ export function MiscPropsTest() {
       <TestCase
         modal
         itShould="display ScrollView with the third view at the top (contentOffset)"
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/305
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/305
       >
         <ContentOffsetTestCase />
       </TestCase>
       <TestCase
         modal
         itShould="scroll when contentOffset property is changed (contentOffset)"
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/305
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/305
       >
         <ToggleContentOffsetTestCase />
       </TestCase>
@@ -52,14 +52,14 @@ export function MiscPropsTest() {
       </TestCase>
       <TestCase
         modal
-        skip={Platform.select({android: 'fails', harmony: 'fails on Android'})}
+        skip={Platform.select({ android: 'fails', harmony: 'fails on Android' })}
         itShould="display ScrollView with different contentInsets (contentInset)"
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/304
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/304
       >
         <View style={styles.wrapperView}>
           <ScrollView
             {...COMMON_PROPS}
-            contentInset={{top: 10, right: 20, bottom: 30, left: 40}}
+            contentInset={{ top: 10, right: 20, bottom: 30, left: 40 }}
           />
         </View>
       </TestCase>
@@ -77,7 +77,7 @@ export function MiscPropsTest() {
               <ScrollView
                 {...COMMON_PROPS}
                 scrollEventThrottle={1000}
-                onScroll={(e: {nativeEvent: Object}) => {
+                onScroll={(e: { nativeEvent: Object }) => {
                   setObject(e.nativeEvent);
                 }}
               />
@@ -88,7 +88,7 @@ export function MiscPropsTest() {
       <TestCase
         modal
         itShould="the left scrollview should decelerate faster (stops earlier) than the right one (decelarationRate)">
-        <View style={[styles.wrapperView, {flexDirection: 'row'}]}>
+        <View style={[styles.wrapperView, { flexDirection: 'row' }]}>
           <ScrollView {...COMMON_PROPS} decelerationRate={0.8} />
           <ScrollView {...COMMON_PROPS} decelerationRate={0.999} />
         </View>
@@ -97,16 +97,16 @@ export function MiscPropsTest() {
       <TestCase
         modal
         itShould="the left scrollview should bounce (briefly scroll beyond the content to show the view below and then come back to top/bottom accordingly)">
-        <View style={[styles.wrapperView, {flexDirection: 'row'}]}>
+        <View style={[styles.wrapperView, { flexDirection: 'row' }]}>
           <ScrollView {...COMMON_PROPS} />
           <ScrollView {...COMMON_PROPS} bounces={false} />
         </View>
       </TestCase>
       <TestCase
         modal
-        skip={Platform.select({android: 'fails', harmony: 'fails on Android'})}
+        skip={Platform.select({ android: 'fails', harmony: 'fails on Android' })}
         itShould="scroll outside of the content when pressing the button (scrollToOverflowEnabled)"
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/315
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/315
       >
         <ScrollToOverflowEnabledTestCase />
       </TestCase>
@@ -114,12 +114,12 @@ export function MiscPropsTest() {
         modal
         skip
         itShould="the left scrollview should allow for nested scroll while the right one shouldn't (nestedScrollEnabled)"
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/312
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/312
       >
         <View
           style={[
             styles.wrapperView,
-            {flexDirection: 'row', alignContent: 'space-between'},
+            { flexDirection: 'row', alignContent: 'space-between' },
           ]}>
           <ScrollView {...COMMON_PROPS}>
             <ScrollView
@@ -131,7 +131,7 @@ export function MiscPropsTest() {
                 borderWidth: 2,
               }}>
               {getScrollViewContent({
-                style: {backgroundColor: 'green'},
+                style: { backgroundColor: 'green' },
                 amountOfChildren: 5,
               })}
             </ScrollView>
@@ -147,7 +147,7 @@ export function MiscPropsTest() {
                 borderWidth: 2,
               }}>
               {getScrollViewContent({
-                style: {backgroundColor: 'green'},
+                style: { backgroundColor: 'green' },
                 amountOfChildren: 5,
               })}
             </ScrollView>
@@ -177,10 +177,10 @@ function ScrollEnabledTestCase() {
       <Button
         label={'Scroll To offset y 150'}
         onPress={() => {
-          scrollRef.current?.scrollTo({x: 0, y: 150, animated: false});
+          scrollRef.current?.scrollTo({ x: 0, y: 150, animated: false });
         }}
       />
-      <ScrollView style={{flex: 1}} scrollEnabled={false} ref={scrollRef}>
+      <ScrollView style={{ flex: 1 }} scrollEnabled={false} ref={scrollRef}>
         {getScrollViewContent({})}
       </ScrollView>
     </View>
@@ -194,7 +194,7 @@ function ScrollToOverflowEnabledTestCase() {
       <Button
         label={'Scroll outside of the content'}
         onPress={() => {
-          ref.current?.scrollTo({x: 0, y: -60, animated: true});
+          ref.current?.scrollTo({ x: 0, y: -60, animated: true });
         }}
       />
       <ScrollView scrollToOverflowEnabled={true} ref={ref}>
@@ -209,7 +209,7 @@ function OnContentSizeChangeTestCase() {
     <ObjectDisplayer
       renderContent={setObject => {
         return (
-          <View style={{width: '100%', height: '70%'}}>
+          <View style={{ width: '100%', height: '70%' }}>
             <Button
               label={'Add one more item'}
               onPress={() => {
@@ -218,9 +218,9 @@ function OnContentSizeChangeTestCase() {
             />
             <ScrollView
               onContentSizeChange={(_, contentHeight) => {
-                setObject({contentHeight});
+                setObject({ contentHeight });
               }}>
-              {getScrollViewContent({amountOfChildren: amountOfChildren})}
+              {getScrollViewContent({ amountOfChildren: amountOfChildren })}
             </ScrollView>
           </View>
         );
@@ -236,7 +236,7 @@ function ContentOffsetTestCase() {
         style={{
           ...styles.wrapperView,
         }}
-        contentOffset={{x: 0, y: 100}}>
+        contentOffset={{ x: 0, y: 100 }}>
         {getScrollViewContent({})}
       </ScrollView>
     </View>
@@ -260,7 +260,7 @@ function ToggleContentOffsetTestCase() {
         style={{
           ...styles.wrapperView,
         }}
-        contentOffset={{x: 0, y: contentOffset}}>
+        contentOffset={{ x: 0, y: contentOffset }}>
         {getScrollViewContent({})}
       </ScrollView>
     </View>
@@ -282,7 +282,7 @@ function BackfaceVisibilityTestCase() {
         style={{
           ...styles.wrapperView,
           backfaceVisibility: backfaceVisibility ? 'visible' : 'hidden',
-          transform: [{rotateX: '180deg'}],
+          transform: [{ rotateX: '180deg' }],
         }}>
         {getScrollViewContent({})}
       </ScrollView>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/MomentumCallbacksTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/MomentumCallbacksTest.tsx
index 6df559e1ab2be19a100c04f3a8ffbacf270e3662..0aa3fd17921b8c21477693b73c01af554e6761cb 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/MomentumCallbacksTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/MomentumCallbacksTest.tsx
@@ -6,9 +6,9 @@
  */
 
 import { TestCase } from '@rnoh/testerino';
-import {useState} from 'react';
-import {ScrollView, Text, View} from 'react-native';
-import {Button} from '../../components';
+import { useState } from 'react';
+import { ScrollView, Text, View } from 'react-native';
+import { Button } from '../../components';
 
 export function MomentumCallbacksTest() {
   return (
@@ -37,14 +37,14 @@ function MomentumTestCase() {
           setHasMomentumEnded(0);
         }}
       />
-      <View style={{backgroundColor: 'white', width: '100%'}}>
-        <Text style={{height: 16}}>hasMomentumBegan: {hasMomentumBegan}</Text>
-        <Text style={{height: 16}}>hasMomentumEnded: {hasMomentumEnded}</Text>
-        <Text style={{height: 16}}>hasDragBegan: {hasDragBegan}</Text>
-        <Text style={{height: 16}}>hasDragEnded: {hasDragEnded}</Text>
+      <View style={{ backgroundColor: 'white', width: '100%' }}>
+        <Text style={{ height: 16 }}>hasMomentumBegan: {hasMomentumBegan}</Text>
+        <Text style={{ height: 16 }}>hasMomentumEnded: {hasMomentumEnded}</Text>
+        <Text style={{ height: 16 }}>hasDragBegan: {hasDragBegan}</Text>
+        <Text style={{ height: 16 }}>hasDragEnded: {hasDragEnded}</Text>
       </View>
 
-      <View style={{width: 200, height: 200}}>
+      <View style={{ width: 200, height: 200 }}>
         <ScrollView
           onScrollBeginDrag={() => {
             setHasDragBegan(p => p + 1);
@@ -58,12 +58,12 @@ function MomentumTestCase() {
           onMomentumScrollEnd={() => {
             setHasMomentumEnded(p => p + 1);
           }}>
-          <View style={{backgroundColor: 'red', width: '100%', height: 150}} />
-          <View style={{backgroundColor: 'blue', width: '100%', height: 150}} />
+          <View style={{ backgroundColor: 'red', width: '100%', height: 150 }} />
+          <View style={{ backgroundColor: 'blue', width: '100%', height: 150 }} />
           <View
-            style={{backgroundColor: 'green', width: '100%', height: 150}}
+            style={{ backgroundColor: 'green', width: '100%', height: 150 }}
           />
-          <View style={{backgroundColor: 'red', width: '100%', height: 150}} />
+          <View style={{ backgroundColor: 'red', width: '100%', height: 150 }} />
         </ScrollView>
       </View>
     </>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/PointerEventsTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/PointerEventsTest.tsx
index 207e7d1e00fefbe5e197cd9132abd8849b9f224b..4bb636e00618e81e1e89d1a5edf6fa219710c4ef 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/PointerEventsTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/PointerEventsTest.tsx
@@ -6,17 +6,17 @@
  */
 
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {Platform, ScrollView, View} from 'react-native';
-import {getScrollViewContent} from './fixtures';
-import {Button} from '../../components';
+import { Platform, ScrollView, View } from 'react-native';
+import { getScrollViewContent } from './fixtures';
+import { Button } from '../../components';
 
 export function PointerEventsTest() {
   return (
     <TestSuite name="pointer events">
       <TestCase
         itShould="call inner and outer view when pressing inner"
-        initialState={{inner: false, outer: false, outerContainer: false}}
-        arrange={({setState, reset}) => {
+        initialState={{ inner: false, outer: false, outerContainer: false }}
+        arrange={({ setState, reset }) => {
           return (
             <PointerEventsView
               pointerEventsOuter="auto"
@@ -25,7 +25,7 @@ export function PointerEventsTest() {
             />
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.deep.eq({
             inner: true,
             outer: true,
@@ -40,8 +40,8 @@ export function PointerEventsTest() {
           harmony: 'fails on Android',
         })} // https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/424
         itShould="call only outer when pressing inner view"
-        initialState={{inner: false, outer: false, outerContainer: true}}
-        arrange={({setState, reset}) => {
+        initialState={{ inner: false, outer: false, outerContainer: true }}
+        arrange={({ setState, reset }) => {
           return (
             <PointerEventsView
               pointerEventsOuter="box-only"
@@ -50,7 +50,7 @@ export function PointerEventsTest() {
             />
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.deep.eq({
             inner: false,
             outer: true,
@@ -64,8 +64,8 @@ export function PointerEventsTest() {
           android: 'known bug',
         })}
         itShould="call inner and outer only when pressing inner view"
-        initialState={{inner: false, outer: false, outerContainer: false}}
-        arrange={({setState, reset}) => {
+        initialState={{ inner: false, outer: false, outerContainer: false }}
+        arrange={({ setState, reset }) => {
           return (
             <PointerEventsView
               disableOuterContainerTouch
@@ -75,7 +75,7 @@ export function PointerEventsTest() {
             />
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state.inner).to.be.true;
           expect(state.outer).to.be.true;
         }}
@@ -86,8 +86,8 @@ export function PointerEventsTest() {
           android: 'known bug',
         })}
         itShould="not call inner or outer when pressing inner or outer views"
-        initialState={{inner: false, outer: false, outerContainer: false}}
-        arrange={({setState, reset}) => {
+        initialState={{ inner: false, outer: false, outerContainer: false }}
+        arrange={({ setState, reset }) => {
           return (
             <PointerEventsView
               pointerEventsOuter="none"
@@ -96,7 +96,7 @@ export function PointerEventsTest() {
             />
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.deep.eq({
             inner: false,
             outer: false,
@@ -122,15 +122,15 @@ function PointerEventsView(props: {
   reset: () => void;
 }) {
   return (
-    <View style={{height: 100, width: '100%', flexDirection: 'row'}}>
+    <View style={{ height: 100, width: '100%', flexDirection: 'row' }}>
       <View
-        style={{backgroundColor: 'red'}}
+        style={{ backgroundColor: 'red' }}
         onTouchEnd={
           props.disableOuterContainerTouch
             ? undefined
             : () => {
-                props.setState(prev => ({...prev, outerContainer: true}));
-              }
+              props.setState(prev => ({ ...prev, outerContainer: true }));
+            }
         }>
         <ScrollView
           nestedScrollEnabled
@@ -142,12 +142,12 @@ function PointerEventsView(props: {
           }}
           pointerEvents={props.pointerEventsOuter}
           onTouchEnd={() => {
-            props.setState(prev => ({...prev, outer: true}));
+            props.setState(prev => ({ ...prev, outer: true }));
           }}>
           {getScrollViewContent({
             amountOfChildren: 3,
             onTouchEnd: () => {
-              props.setState(prev => ({...prev, inner: true}));
+              props.setState(prev => ({ ...prev, inner: true }));
             },
             pointerEvents: props.pointerEventsInner,
           })}
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ScrollBarsTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ScrollBarsTest.tsx
index 716c952179cf5e19b013741abc3302c0ddb06774..5c147f287ecd2f35d8597c93decf56420cb2a322 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ScrollBarsTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ScrollBarsTest.tsx
@@ -11,9 +11,9 @@ import {
   getScrollViewContent,
   getScrollViewContentHorizontal,
 } from './fixtures';
-import {ScrollView, StyleSheet, View} from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 import React from 'react';
-import {Button} from '../../components';
+import { Button } from '../../components';
 
 export function ScrollBarsTest() {
   return (
@@ -88,7 +88,7 @@ function FlashIndicatorsTest() {
         }}
       />
       <ScrollView
-        style={{flex: 1}}
+        style={{ flex: 1 }}
         scrollEnabled={true}
         showsVerticalScrollIndicator={false}
         ref={scrollRef}>
@@ -105,7 +105,7 @@ function ScrollViewScrollIndicatorInsetsTest() {
         style={{
           ...styles.wrapperView,
         }}
-        scrollIndicatorInsets={{right: 50, bottom: 200, top: 200}}>
+        scrollIndicatorInsets={{ right: 50, bottom: 200, top: 200 }}>
         {getScrollViewContent({})}
       </ScrollView>
     </View>
@@ -119,8 +119,8 @@ function ScrollViewContentInsetsTest() {
         style={{
           ...styles.wrapperView,
         }}
-        contentInset={{left: 50, bottom: 100, top: 100}}
-        scrollIndicatorInsets={{left: 50, bottom: 100, top: 100}}>
+        contentInset={{ left: 50, bottom: 100, top: 100 }}
+        scrollIndicatorInsets={{ left: 50, bottom: 100, top: 100 }}>
         {getScrollViewContent({})}
       </ScrollView>
     </View>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ScrollToTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ScrollToTest.tsx
index 7390e7fc2a332d914c212a153332cc7410bc816e..ca06d5c6db98ab05b5a0709ab077e0641c34ebc7 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ScrollToTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ScrollToTest.tsx
@@ -6,10 +6,10 @@
  */
 
 import { TestSuite, TestCase } from '@rnoh/testerino';
-import {View, ScrollView, StyleSheet, ScrollViewProps} from 'react-native';
-import {COMMON_PROPS} from './fixtures';
+import { View, ScrollView, StyleSheet, ScrollViewProps } from 'react-native';
+import { COMMON_PROPS } from './fixtures';
 import React from 'react';
-import {Button} from '../../components';
+import { Button } from '../../components';
 
 export function ScrollToTest() {
   return (
@@ -24,13 +24,13 @@ export function ScrollToTest() {
         modal
         itShould="call onScroll once when scrolling without animation"
         initialState={0}
-        arrange={({setState}) => (
+        arrange={({ setState }) => (
           <ScrollToTestCase
             animated={false}
             onScroll={() => setState(c => c + 1)}
           />
         )}
-        assert={({state, expect}) => {
+        assert={({ state, expect }) => {
           expect(state).to.eq(1);
         }}
       />
@@ -39,7 +39,7 @@ export function ScrollToTest() {
         itShould="call onScroll multiple times when scrolling with animation"
         initialState={0}
         arrange={AnimatedScrollToEventCountTestCase}
-        assert={({state, expect}) => {
+        assert={({ state, expect }) => {
           expect(state).to.be.greaterThan(10);
         }}
       />
@@ -50,11 +50,11 @@ export function ScrollToTest() {
 function ScrollToTestCase({
   animated,
   onScroll,
-}: {animated: boolean} & ScrollViewProps) {
+}: { animated: boolean } & ScrollViewProps) {
   const scrollToOffset = 600;
   const scrollRef = React.useRef<ScrollView>(null);
   const scrollTo = () => {
-    scrollRef.current?.scrollTo({y: scrollToOffset, animated});
+    scrollRef.current?.scrollTo({ y: scrollToOffset, animated });
   };
 
   return (
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ScrollViewTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ScrollViewTest.tsx
index a0303d05a2c1c4b94595eae39c6f1719e7d53af3..aa4cbdd8c9c2c2b594e5791b4ad1d9d8878b9eb0 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ScrollViewTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/ScrollViewTest.tsx
@@ -5,20 +5,20 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {View, ScrollView, Text, StyleSheet} from 'react-native';
+import { View, ScrollView, Text, StyleSheet } from 'react-native';
 import { TestSuite, TestCase } from '@rnoh/testerino';
-import React, {useState} from 'react';
-import {Button} from '../../components';
-import {StylesTest} from './StylesTest';
-import {ContentContainerStyleTest} from './ContentContainerStyleTest';
-import {ScrollBarsTest} from './ScrollBarsTest';
-import {StickyHeadersTest} from './StickyHeadersTest';
-import {PointerEventsTest} from './PointerEventsTest';
-import {SnapTest} from './SnapTest';
-import {MomentumCallbacksTest} from './MomentumCallbacksTest';
-import {KeyboardTest} from './KeyboardTest';
-import {MiscPropsTest} from './MiscPropsTest';
-import {ScrollToTest} from './ScrollToTest';
+import React, { useState } from 'react';
+import { Button } from '../../components';
+import { StylesTest } from './StylesTest';
+import { ContentContainerStyleTest } from './ContentContainerStyleTest';
+import { ScrollBarsTest } from './ScrollBarsTest';
+import { StickyHeadersTest } from './StickyHeadersTest';
+import { PointerEventsTest } from './PointerEventsTest';
+import { SnapTest } from './SnapTest';
+import { MomentumCallbacksTest } from './MomentumCallbacksTest';
+import { KeyboardTest } from './KeyboardTest';
+import { MiscPropsTest } from './MiscPropsTest';
+import { ScrollToTest } from './ScrollToTest';
 
 export function ScrollViewTest() {
   return (
@@ -48,7 +48,7 @@ export function ScrollViewTest() {
   );
 }
 
-const Item = (props: {label: string; mode: 'dark' | 'light'}) => {
+const Item = (props: { label: string; mode: 'dark' | 'light' }) => {
   const stylesheet = StyleSheet.create({
     dark: {
       backgroundColor: '#47443D',
@@ -73,7 +73,7 @@ const Item = (props: {label: string; mode: 'dark' | 'light'}) => {
   );
 };
 
-const ITEMS = Array.from({length: 20}, (_, index) => (
+const ITEMS = Array.from({ length: 20 }, (_, index) => (
   <Item
     label={`Item${index}`}
     key={`item${index}`}
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/SnapTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/SnapTest.tsx
index 5656b51f51d62b080db5cc06c8344e4cdd5fb47f..3bbccfded6ecffe132b2eab4c883d6318fd3aff8 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/SnapTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/SnapTest.tsx
@@ -6,8 +6,8 @@
  */
 
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {ScrollViewProps} from 'react-native';
-import {ScrollViewComparator, getScrollViewContent} from './fixtures';
+import { ScrollViewProps } from 'react-native';
+import { ScrollViewComparator, getScrollViewContent } from './fixtures';
 
 const ITEM_HEIGHT = 50;
 
@@ -16,19 +16,19 @@ export function SnapTest() {
     <>
       <TestSuite name="snapTo*">
         <SnapTestCases
-          scrollViewProps={{disableIntervalMomentum: false, horizontal: false}}
+          scrollViewProps={{ disableIntervalMomentum: false, horizontal: false }}
         />
       </TestSuite>
       <TestSuite name="disableIntervalMomentum">
         <SnapTestCases
-          scrollViewProps={{disableIntervalMomentum: true, horizontal: false}}
+          scrollViewProps={{ disableIntervalMomentum: true, horizontal: false }}
         />
       </TestSuite>
     </>
   );
 }
 
-function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
+function SnapTestCases(props: { scrollViewProps: ScrollViewProps }) {
   return (
     <>
       <TestCase
@@ -39,10 +39,10 @@ function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
           commonProps={{
             ...props.scrollViewProps,
             snapToOffsets: [ITEM_HEIGHT * 5],
-            children: getScrollViewContent({amountOfChildren: 25}),
+            children: getScrollViewContent({ amountOfChildren: 25 }),
           }}
-          lhsProps={{snapToEnd: true}}
-          rhsProps={{snapToEnd: false}}
+          lhsProps={{ snapToEnd: true }}
+          rhsProps={{ snapToEnd: false }}
         />
       </TestCase>
       <TestCase
@@ -53,10 +53,10 @@ function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
           commonProps={{
             ...props.scrollViewProps,
             snapToOffsets: [ITEM_HEIGHT * 5],
-            children: getScrollViewContent({amountOfChildren: 25}),
+            children: getScrollViewContent({ amountOfChildren: 25 }),
           }}
-          lhsProps={{snapToStart: true}}
-          rhsProps={{snapToStart: false}}
+          lhsProps={{ snapToStart: true }}
+          rhsProps={{ snapToStart: false }}
         />
       </TestCase>
       <TestCase modal itShould="snap to page">
@@ -64,10 +64,10 @@ function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
           scrollViewLength={ITEM_HEIGHT * 5}
           commonProps={{
             ...props.scrollViewProps,
-            children: getScrollViewContent({amountOfChildren: 25}),
+            children: getScrollViewContent({ amountOfChildren: 25 }),
           }}
-          lhsProps={{pagingEnabled: false}}
-          rhsProps={{pagingEnabled: true}}
+          lhsProps={{ pagingEnabled: false }}
+          rhsProps={{ pagingEnabled: true }}
         />
       </TestCase>
       <TestCase modal itShould="snap to item 1, 3, 5, 7, 9, ...">
@@ -75,10 +75,10 @@ function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
           scrollViewLength={ITEM_HEIGHT * 5}
           commonProps={{
             ...props.scrollViewProps,
-            children: getScrollViewContent({amountOfChildren: 25}),
+            children: getScrollViewContent({ amountOfChildren: 25 }),
           }}
           lhsProps={{}}
-          rhsProps={{snapToInterval: ITEM_HEIGHT * 2}}
+          rhsProps={{ snapToInterval: ITEM_HEIGHT * 2 }}
         />
       </TestCase>
       <TestCase modal itShould="snap to item 2, 3, 7, and 11 and 21">
@@ -86,7 +86,7 @@ function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
           scrollViewLength={ITEM_HEIGHT * 5}
           commonProps={{
             ...props.scrollViewProps,
-            children: getScrollViewContent({amountOfChildren: 25}),
+            children: getScrollViewContent({ amountOfChildren: 25 }),
           }}
           lhsProps={{}}
           rhsProps={{
@@ -105,11 +105,11 @@ function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
             scrollViewLength={ITEM_HEIGHT * 1.5}
             commonProps={{
               ...props.scrollViewProps,
-              children: getScrollViewContent({amountOfChildren: 25}),
+              children: getScrollViewContent({ amountOfChildren: 25 }),
               snapToInterval: ITEM_HEIGHT,
             }}
-            lhsProps={{snapToAlignment: 'start'}}
-            rhsProps={{snapToAlignment: 'center'}}
+            lhsProps={{ snapToAlignment: 'start' }}
+            rhsProps={{ snapToAlignment: 'center' }}
           />
         </TestCase>
         <TestCase modal itShould="snap to item {lhs: start, rhs: end}">
@@ -117,11 +117,11 @@ function SnapTestCases(props: {scrollViewProps: ScrollViewProps}) {
             scrollViewLength={ITEM_HEIGHT * 1.5}
             commonProps={{
               ...props.scrollViewProps,
-              children: getScrollViewContent({amountOfChildren: 25}),
+              children: getScrollViewContent({ amountOfChildren: 25 }),
               snapToInterval: ITEM_HEIGHT,
             }}
-            lhsProps={{snapToAlignment: 'start'}}
-            rhsProps={{snapToAlignment: 'end'}}
+            lhsProps={{ snapToAlignment: 'start' }}
+            rhsProps={{ snapToAlignment: 'end' }}
           />
         </TestCase>
       </TestSuite>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/StickyHeadersTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/StickyHeadersTest.tsx
index 63413a6ee7d061f591d7457ba1357623b1878c50..0d66d4fbabf2554c4ffa532295793306d8a53446 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/StickyHeadersTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/StickyHeadersTest.tsx
@@ -6,8 +6,8 @@
  */
 
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {Platform, ScrollView, StyleSheet, Text, View} from 'react-native';
-import {getScrollViewContent} from './fixtures';
+import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { getScrollViewContent } from './fixtures';
 
 export function StickyHeadersTest() {
   return (
@@ -38,7 +38,7 @@ export function StickyHeadersTest() {
       <TestCase
         skip={Platform.OS === 'android'}
         itShould="stick item 13 and 20 to the bottom (invertStickyHeaders)"
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/309
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/309
       >
         <View style={styles.wrapperView}>
           <ScrollView
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/StylesTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/StylesTest.tsx
index 864a988397db9e5c45e8759d64cbf5150a6ec0a3..c49f88bc91aef6500fdab5d6f0a96d5ca3714188 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/StylesTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/StylesTest.tsx
@@ -5,9 +5,9 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {View, ScrollView, StyleSheet} from 'react-native';
+import { View, ScrollView, StyleSheet } from 'react-native';
 import { TestSuite, TestCase } from '@rnoh/testerino';
-import {COMMON_PROPS} from './fixtures';
+import { COMMON_PROPS } from './fixtures';
 
 export function StylesTest() {
   return (
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/fixtures.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/fixtures.tsx
index fa5ed9f43e2b612b7961f77d9a3f75f1f5fb5046..943a0a30b552f20e7e78ea6428e6e962455282ee 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/fixtures.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ScrollViewTest/fixtures.tsx
@@ -56,7 +56,7 @@ export function getScrollViewContent({
         ]}
         pointerEvents={pointerEvents}
         onTouchEnd={onTouchEnd}>
-        <Text style={{textAlign: 'center', height: 15}}> {idx + 1}</Text>
+        <Text style={{ textAlign: 'center', height: 15 }}> {idx + 1}</Text>
       </View>
     );
   });
@@ -79,7 +79,7 @@ export function getScrollViewContentHorizontal({
           },
           style,
         ]}>
-        <Text style={{textAlign: 'center', height: 15}}> {idx + 1}</Text>
+        <Text style={{ textAlign: 'center', height: 15 }}> {idx + 1}</Text>
       </View>
     );
   });
@@ -97,23 +97,23 @@ export function ScrollViewComparator({
   rhsProps: ScrollViewProps;
 }) {
   return (
-    <View style={{width: '100%'}}>
+    <View style={{ width: '100%' }}>
       <View
-        style={{flexDirection: 'row', width: '100%', alignItems: 'flex-end'}}>
-        <View style={{flex: 1}}>
-          <Text style={{fontSize: 12}}>{JSON.stringify(lhsProps)}</Text>
-          <View style={{height: scrollViewLength}}>
+        style={{ flexDirection: 'row', width: '100%', alignItems: 'flex-end' }}>
+        <View style={{ flex: 1 }}>
+          <Text style={{ fontSize: 12 }}>{JSON.stringify(lhsProps)}</Text>
+          <View style={{ height: scrollViewLength }}>
             <ScrollView
-              style={{flex: 1, height: scrollViewLength}}
-              {...{...commonProps, ...lhsProps}}
+              style={{ flex: 1, height: scrollViewLength }}
+              {...{ ...commonProps, ...lhsProps }}
             />
           </View>
         </View>
-        <View style={{width: 4, height: '100%', backgroundColor: 'gray'}} />
-        <View style={{flex: 1}}>
-          <Text style={{fontSize: 12}}>{JSON.stringify(rhsProps)}</Text>
-          <View style={{height: scrollViewLength}}>
-            <ScrollView {...{...commonProps, ...rhsProps}} style={{flex: 1}} />
+        <View style={{ width: 4, height: '100%', backgroundColor: 'gray' }} />
+        <View style={{ flex: 1 }}>
+          <Text style={{ fontSize: 12 }}>{JSON.stringify(rhsProps)}</Text>
+          <View style={{ height: scrollViewLength }}>
+            <ScrollView {...{ ...commonProps, ...rhsProps }} style={{ flex: 1 }} />
           </View>
         </View>
       </View>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/SectionListTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/SectionListTest.tsx
index ca8ec3910786de3a72b07b30d7eec0cedc20659c..c24f4145ff8cb5ac5b2ca2070075cc93f54089d2 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/SectionListTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/SectionListTest.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   View,
   SectionList,
@@ -17,7 +17,7 @@ import {
   ViewabilityConfig,
 } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {Button, Modal, ObjectDisplayer} from '../components';
+import { Button, Modal, ObjectDisplayer } from '../components';
 
 interface SectionData {
   id: string;
@@ -49,13 +49,13 @@ const DATA: SectionData[] = [
 ];
 
 const commonProps = {
-  style: {width: 256},
+  style: { width: 256 },
   sections: DATA,
   keyExtractor: (item, _index) => item.id,
-  renderSectionHeader: ({section}) => (
+  renderSectionHeader: ({ section }) => (
     <Text style={styles.title}>{section.title}</Text>
   ),
-  renderItem: ({item}) => (
+  renderItem: ({ item }) => (
     <View style={styles.item}>
       <Text style={styles.title}>{item}</Text>
     </View>
@@ -71,12 +71,12 @@ export const SectionListTest = () => {
             <SectionList
               sections={DATA}
               keyExtractor={(item, index) => item + index}
-              renderItem={({item}) => (
+              renderItem={({ item }) => (
                 <View style={styles.item}>
                   <Text style={styles.title}>{item}</Text>
                 </View>
               )}
-              renderSectionHeader={({section: {title}}) => (
+              renderSectionHeader={({ section: { title } }) => (
                 <Text style={styles.title}>{title}</Text>
               )}
             />
@@ -90,7 +90,7 @@ export const SectionListTest = () => {
               return (
                 <SectionList
                   {...commonProps}
-                  viewabilityConfig={{viewAreaCoveragePercentThreshold: 100}}
+                  viewabilityConfig={{ viewAreaCoveragePercentThreshold: 100 }}
                   onViewableItemsChanged={item => {
                     setObject(item.viewableItems.map(i => i.item));
                   }}
@@ -105,7 +105,7 @@ export const SectionListTest = () => {
           <SectionList
             {...commonProps}
             windowSize={2}
-            renderItem={({item}) => {
+            renderItem={({ item }) => {
               return (
                 <DelayedDisplayer
                   delayInMs={1000}
@@ -130,7 +130,7 @@ export const SectionListTest = () => {
                 <SectionList
                   {...commonProps}
                   onMomentumScrollBegin={e => {
-                    setObject({nativeEvent: e.nativeEvent});
+                    setObject({ nativeEvent: e.nativeEvent });
                   }}
                 />
               );
@@ -146,7 +146,7 @@ export const SectionListTest = () => {
                 <SectionList
                   {...commonProps}
                   onMomentumScrollEnd={e => {
-                    setObject({nativeEvent: e.nativeEvent});
+                    setObject({ nativeEvent: e.nativeEvent });
                   }}
                 />
               );
@@ -184,7 +184,7 @@ export const SectionListTest = () => {
       </TestCase>
       <TestCase itShould="show horizontal scroll indicator">
         <Modal>
-          <View style={{width: 200, height: '100%'}}>
+          <View style={{ width: 200, height: '100%' }}>
             <SectionList
               {...commonProps}
               showsHorizontalScrollIndicator={true}
@@ -195,7 +195,7 @@ export const SectionListTest = () => {
       </TestCase>
       <TestCase itShould="hide horizontal scroll indicator">
         <Modal>
-          <View style={{width: 200, height: '100%'}}>
+          <View style={{ width: 200, height: '100%' }}>
             <SectionList
               {...commonProps}
               showsHorizontalScrollIndicator={false}
@@ -221,7 +221,7 @@ export const SectionListTest = () => {
                     // only RefreshControl can be provided
                     <RefreshControl
                       onRefresh={() => {
-                        setObject({onRefreshCalled: true});
+                        setObject({ onRefreshCalled: true });
                       }}
                       refreshing={false}
                       tintColor={'red'} // iOS. It's unknown how to set the color of the refreshing widget in ArkUI.
@@ -242,7 +242,7 @@ export const SectionListTest = () => {
                 <SectionList
                   {...commonProps}
                   onRefresh={() => {
-                    setObject({onRefreshCalled: true});
+                    setObject({ onRefreshCalled: true });
                   }}
                   refreshing={false}
                 />
@@ -306,7 +306,7 @@ export const SectionListTest = () => {
         </Modal>
       </TestCase>
       <TestCase itShould="click on 'Record interaction' button changes the first three items background color to blue">
-        <Modal contentContainerStyle={{width: '85%'}}>
+        <Modal contentContainerStyle={{ width: '85%' }}>
           <SectionListRecordInteractionTest />
         </Modal>
       </TestCase>
@@ -431,9 +431,9 @@ function SectionListRecordInteractionTest() {
 
   return (
     <>
-      <View style={{marginBottom: 10}}>
+      <View style={{ marginBottom: 10 }}>
         <Button label="Record interaction" onPress={handleOnPress} />
-        <Text style={{padding: 10}}>
+        <Text style={{ padding: 10 }}>
           Visible Items are: {JSON.stringify(visibleItems)}
         </Text>
       </View>
@@ -442,10 +442,10 @@ function SectionListRecordInteractionTest() {
         sections={DATA}
         scrollEnabled={false}
         keyExtractor={(_, index) => String(index)}
-        renderSectionHeader={({section}) => (
+        renderSectionHeader={({ section }) => (
           <Text style={styles.title}>{section.title}</Text>
         )}
-        renderItem={({item}) => (
+        renderItem={({ item }) => (
           <View
             style={[
               {
@@ -453,7 +453,7 @@ function SectionListRecordInteractionTest() {
                 backgroundColor: 'lightblue',
                 marginBottom: 10,
               },
-              visibleItems.includes(item) && {backgroundColor: 'blue'},
+              visibleItems.includes(item) && { backgroundColor: 'blue' },
             ]}>
             <Text
               style={{
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/StatusBarTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/StatusBarTest.tsx
index 01c464414314dbb6b458311a781fb7277a19bc8d..af7d950af7f5ee2af978819753f2a6d0f8c6ad79 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/StatusBarTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/StatusBarTest.tsx
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
-import {StyleSheet, StatusBar, Text, View, StatusBarStyle} from 'react-native';
+import React, { useState } from 'react';
+import { StyleSheet, StatusBar, Text, View, StatusBarStyle } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
 
 export function StatusBarTest() {
@@ -119,7 +119,7 @@ function StatusBarView() {
       </TestCase>
       <TestCase
         itShould="return correct status bar height for device"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(StatusBar.currentHeight).to.be.closeTo(38.8, 0.1);
         }}
       />
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/StyleSheetTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/StyleSheetTest.tsx
index 2f967b8cb24637659089c14f596a5487d2b39089..f38be3926088d2d95486ca7f75814785860965d3 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/StyleSheetTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/StyleSheetTest.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {StyleSheet} from 'react-native';
+import { StyleSheet } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
 
 export const StyleSheetTest = () => {
@@ -13,13 +13,13 @@ export const StyleSheetTest = () => {
     <TestSuite name="Stylesheet">
       <TestCase
         itShould="see if StyleSheet.create returns reference to an object with the correct props"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(styles.test).to.be.eql(testStyle);
         }}
       />
       <TestCase
         itShould="compose styles correctly"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           const composed = StyleSheet.compose(testStyle, testStyle2);
           expect(composed).to.be.an('array');
           expect(composed).to.include(testStyle);
@@ -28,7 +28,7 @@ export const StyleSheetTest = () => {
       />
       <TestCase
         itShould="flatten styles correctly"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(StyleSheet.flatten([testStyle, testStyle2])).to.be.eql(
             flattenedStyle,
           );
@@ -36,7 +36,7 @@ export const StyleSheetTest = () => {
       />
       <TestCase
         itShould="return a sensible hairlineWidth value"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(StyleSheet.hairlineWidth).to.be.greaterThan(0).and.lessThan(2);
         }}
       />
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/SwitchTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/SwitchTest.tsx
index 7311121fd49e569c6e7410e21a72ad2b4bb68adf..575fe979453207e18a8d12e4a37b6ac9725dea92 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/SwitchTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/SwitchTest.tsx
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
-import {View, Switch, StyleSheet, Text} from 'react-native';
+import React, { useState } from 'react';
+import { View, Switch, StyleSheet, Text } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
 
 export function SwitchTest() {
@@ -17,12 +17,12 @@ export function SwitchTest() {
     <TestSuite name="Switch">
       <TestCase itShould="Render a working switch and display it's state and SwitchChangeEvent details">
         <View style={styles.container}>
-          <Text style={{height: 30}}>
+          <Text style={{ height: 30 }}>
             Switch isEnabled: {isEnabled.toString()}
           </Text>
-          <Text style={{height: 30}}>OnChange event: {event}</Text>
+          <Text style={{ height: 30 }}>OnChange event: {event}</Text>
           <Switch
-            trackColor={{false: 'green', true: 'firebrick'}}
+            trackColor={{ false: 'green', true: 'firebrick' }}
             thumbColor={'beige'}
             onValueChange={toggleSwitch}
             value={isEnabled}
@@ -33,7 +33,7 @@ export function SwitchTest() {
       <TestCase itShould="Render a disabled switch">
         <View style={styles.container}>
           <Switch
-            trackColor={{false: 'green', true: 'firebrick'}}
+            trackColor={{ false: 'green', true: 'firebrick' }}
             thumbColor={'beige'}
             disabled
           />
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/TextInputTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/TextInputTest.tsx
index 7f37abf59b77985ceee2bbb9388a93d8cf2f89f4..c46dd919c95c69cd5113fc00d1fdd8d0125ae69b 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/TextInputTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/TextInputTest.tsx
@@ -15,8 +15,8 @@ import {
   View,
 } from 'react-native';
 import { TestSuite, TestCase } from '@rnoh/testerino';
-import {useState, useRef} from 'react';
-import {Button, Effect, StateKeeper} from '../components';
+import { useState, useRef } from 'react';
+import { Button, Effect, StateKeeper } from '../components';
 
 export function TextInputTest() {
   return (
@@ -31,7 +31,7 @@ export function TextInputTest() {
       </TestCase>
       <TestCase modal itShould="render textInput with Pacifico Regular font">
         <TextInputWithText
-          style={[styles.textInput, {fontFamily: 'Pacifico-Regular'}]}
+          style={[styles.textInput, { fontFamily: 'Pacifico-Regular' }]}
         />
       </TestCase>
       <TestCase modal itShould="render textInput with caret hidden">
@@ -42,7 +42,7 @@ export function TextInputTest() {
           modal
           itShould="blur text on submit (singleline)"
           initialState={false}
-          arrange={({setState}) => {
+          arrange={({ setState }) => {
             return (
               <>
                 <TextInputWithText
@@ -53,7 +53,7 @@ export function TextInputTest() {
               </>
             );
           }}
-          assert={({expect, state}) => {
+          assert={({ expect, state }) => {
             expect(state).to.be.true;
           }}
         />
@@ -61,7 +61,7 @@ export function TextInputTest() {
           modal
           itShould="blur text after switching to another textinput"
           initialState={false}
-          arrange={({setState}) => {
+          arrange={({ setState }) => {
             return (
               <>
                 <TextInputWithText
@@ -75,7 +75,7 @@ export function TextInputTest() {
               </>
             );
           }}
-          assert={({expect, state}) => {
+          assert={({ expect, state }) => {
             expect(state).to.be.true;
           }}
         />
@@ -83,7 +83,7 @@ export function TextInputTest() {
           modal
           itShould="not blur text on submit"
           skip
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/403
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/403
         >
           <TextInputWithText style={styles.textInput} blurOnSubmit={false} />
           <TextInputWithText
@@ -96,14 +96,14 @@ export function TextInputTest() {
           modal
           itShould="automatically focus textInput when displayed"
           initialState={false}
-          arrange={({setState}) => (
+          arrange={({ setState }) => (
             <TextInputWithText
               style={styles.textInput}
               autoFocus
               onFocus={() => setState(true)}
             />
           )}
-          assert={({expect, state}) => {
+          assert={({ expect, state }) => {
             expect(state).to.be.true;
           }}
         />
@@ -111,13 +111,13 @@ export function TextInputTest() {
           modal
           itShould="focus textInput on click"
           initialState={false}
-          arrange={({setState}) => (
+          arrange={({ setState }) => (
             <TextInput
               style={styles.textInput}
               onFocus={() => setState(true)}
             />
           )}
-          assert={({expect, state}) => {
+          assert={({ expect, state }) => {
             expect(state).to.be.true;
           }}
         />
@@ -125,8 +125,8 @@ export function TextInputTest() {
           modal
           itShould="focus textInput when pressing the button"
           initialState={false}
-          arrange={({setState}) => <FocusTextInputTest setState={setState} />}
-          assert={({state, expect}) => {
+          arrange={({ setState }) => <FocusTextInputTest setState={setState} />}
+          assert={({ state, expect }) => {
             expect(state).to.be.true;
           }}
         />
@@ -135,7 +135,7 @@ export function TextInputTest() {
         modal
         itShould="render textInput with blue underline"
         skip
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/404
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/404
       >
         <TextInputWithText
           style={styles.textInput}
@@ -159,7 +159,7 @@ export function TextInputTest() {
         modal
         itShould="render multiline text input with Pacifico Regular font">
         <TextInputWithText
-          style={[styles.textInputBigger, {fontFamily: 'Pacifico-Regular'}]}
+          style={[styles.textInputBigger, { fontFamily: 'Pacifico-Regular' }]}
           multiline
         />
       </TestCase>
@@ -194,7 +194,7 @@ export function TextInputTest() {
         modal
         itShould="toggle between different capitalization modes"
         skip
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/408
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/408
       >
         <AutoCapitalize />
       </TestCase>
@@ -202,13 +202,13 @@ export function TextInputTest() {
         modal
         itShould="trigger onSubmitEditing event after submiting"
         initialState={false}
-        arrange={({setState}) => (
+        arrange={({ setState }) => (
           <TextInputWithText
             style={styles.textInput}
             onSubmitEditing={() => setState(true)}
           />
         )}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.true;
         }}
       />
@@ -224,14 +224,14 @@ export function TextInputTest() {
         //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/736
         itShould="trigger onKeyPress event after pressing key (press 'A' to pass)"
         initialState={''}
-        arrange={({setState}) => (
+        arrange={({ setState }) => (
           <TextInputWithText
             style={styles.textInput}
             autoFocus
             onKeyPress={event => setState(event.nativeEvent.key)}
           />
         )}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.eq('A');
         }}
       />
@@ -242,7 +242,7 @@ export function TextInputTest() {
         modal
         itShould="trigger onLayout event on mount"
         initialState={{}}
-        arrange={({setState, state}) => {
+        arrange={({ setState, state }) => {
           return (
             <>
               <Text>{JSON.stringify(state)}</Text>
@@ -255,7 +255,7 @@ export function TextInputTest() {
             </>
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.include.all.keys('width', 'height', 'x', 'y');
         }}
       />
@@ -284,18 +284,18 @@ export function TextInputTest() {
           defaultValue="Not scaled"
         />
         <TextInputWithText
-          style={[styles.textInput, {fontSize: 40}]}
+          style={[styles.textInput, { fontSize: 40 }]}
           allowFontScaling={true}
           defaultValue="Scaled big"
         />
         <TextInputWithText
-          style={[styles.textInput, {fontSize: 40}]}
+          style={[styles.textInput, { fontSize: 40 }]}
           allowFontScaling={false}
           defaultValue="Not scaled big"
         />
       </TestCase>
       <TestCase itShould="show textInput with padding" modal>
-        <View style={{width: 300, height: 200}}>
+        <View style={{ width: 300, height: 200 }}>
           <TextInputWithText
             style={{
               paddingLeft: 10,
@@ -308,7 +308,7 @@ export function TextInputTest() {
         </View>
       </TestCase>
       <TestCase itShould="show textInput multiline with padding" modal>
-        <View style={{width: 300, height: 200}}>
+        <View style={{ width: 300, height: 200 }}>
           <TextInputWithText
             style={{
               paddingLeft: 10,
@@ -340,7 +340,7 @@ export function TextInputTest() {
         />
       </TestCase>
       <TestCase modal itShould="render textinput with red text color">
-        <TextInputWithText style={[styles.textInput, {color: 'red'}]} />
+        <TextInputWithText style={[styles.textInput, { color: 'red' }]} />
       </TestCase>
       <TestCase modal itShould="clear text on focus">
         {/* iOS only */}
@@ -366,7 +366,7 @@ const TextInputKeyboardType = (props: TextInputProps) => {
     <>
       <Text>{props.keyboardType}</Text>
       <TextInput
-        style={{...styles.textInputSmall, marginBottom: 10}}
+        style={{ ...styles.textInputSmall, marginBottom: 10 }}
         keyboardType={props.keyboardType}
       />
     </>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/TextTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/TextTest.tsx
index 7fab8b08db3982152ac4d20bf66a8b147b73c9c8..fdca5381bd841159ea79f5d3a05f4095ec297861 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/TextTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/TextTest.tsx
@@ -5,10 +5,10 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {Platform, StyleSheet, Text, View} from 'react-native';
+import { Platform, StyleSheet, Text, View } from 'react-native';
 import { TestSuite, TestCase } from '@rnoh/testerino';
-import {Button, PressCounter} from '../components';
-import {useState} from 'react';
+import { Button, PressCounter } from '../components';
+import { useState } from 'react';
 
 const SAMPLE_PARAGRAPH_TEXT =
   'Quis exercitation do eu in laboris nulla sit elit officia. Incididunt ipsum aliquip commodo proident ad laborum aliquip fugiat sunt aute ea laboris mollit reprehenderit. Culpa non incididunt cupidatat esse laborum nulla quis mollit voluptate proident commodo. Consectetur ad deserunt do nulla sunt veniam magna laborum reprehenderit et ullamco fugiat fugiat.';
@@ -24,14 +24,14 @@ export function TextTest() {
         </View>
       </TestCase>
       <TestCase itShould="render text in one line">
-        <View style={{flexDirection: 'row'}}>
-          <Text style={{fontSize: 10}}>/ {'100'}</Text>
+        <View style={{ flexDirection: 'row' }}>
+          <Text style={{ fontSize: 10 }}>/ {'100'}</Text>
         </View>
       </TestCase>
       <TestCase
         itShould="show 3 texts each with a different line break startegy"
         skip
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/274
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/274
       >
         <View style={styles.bigContainer}>
           <Text style={styles.smallTextWidth} lineBreakStrategyIOS="none">
@@ -48,7 +48,7 @@ export function TextTest() {
       <TestCase
         itShould="wrap two texts differently (hangul-word linebreak stategy)"
         skip
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/274
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/274
       >
         <View style={styles.container}>
           <Text style={styles.smallTextWidth} lineBreakStrategyIOS="none">
@@ -90,23 +90,23 @@ export function TextTest() {
         itShould="fire onTextLayoutEvent after layout change"
         initialState={false}
         arrange={ctx => <OnTextLayoutView ctx={ctx} />}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.true;
         }}
         skip
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/277
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/277
       />
       <TestCase
         itShould="fire onLayout event after layout change"
         initialState={{}}
         arrange={ctx => <OnLayoutView ctx={ctx} />}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.have.all.keys('x', 'y', 'width', 'height');
         }}
       />
       <TestSuite name="TextStyle">
         <TestCase itShould="show text with the Pacifico Regular font">
-          <View style={{height: 30, width: '100%'}}>
+          <View style={{ height: 30, width: '100%' }}>
             <Text
               style={{
                 ...styles.blackText,
@@ -118,18 +118,18 @@ export function TextTest() {
           </View>
         </TestCase>
         <TestCase itShould="show text with different horizontal alignments">
-          <Text style={{textAlign: 'left'}}>Left:</Text>
-          <Text style={{fontSize: 8}}>{SAMPLE_PARAGRAPH_TEXT}</Text>
-          <Text style={{textAlign: 'center'}}>Center:</Text>
-          <Text style={{fontSize: 8, textAlign: 'center'}}>
+          <Text style={{ textAlign: 'left' }}>Left:</Text>
+          <Text style={{ fontSize: 8 }}>{SAMPLE_PARAGRAPH_TEXT}</Text>
+          <Text style={{ textAlign: 'center' }}>Center:</Text>
+          <Text style={{ fontSize: 8, textAlign: 'center' }}>
             {SAMPLE_PARAGRAPH_TEXT}
           </Text>
-          <Text style={{textAlign: 'right'}}>Right:</Text>
-          <Text style={{fontSize: 8, textAlign: 'right'}}>
+          <Text style={{ textAlign: 'right' }}>Right:</Text>
+          <Text style={{ fontSize: 8, textAlign: 'right' }}>
             {SAMPLE_PARAGRAPH_TEXT}
           </Text>
-          <Text style={{textAlign: 'justify'}}>Justify:</Text>
-          <Text style={{fontSize: 8, textAlign: 'justify'}}>
+          <Text style={{ textAlign: 'justify' }}>Justify:</Text>
+          <Text style={{ fontSize: 8, textAlign: 'justify' }}>
             {SAMPLE_PARAGRAPH_TEXT}
           </Text>
         </TestCase>
@@ -162,7 +162,7 @@ export function TextTest() {
         <TestCase itShould="show text with different vertical alignments (verticalAlign)">
           <View style={styles.smallContainerRow}>
             <Text style={styles.blueShortText}>Auto</Text>
-            <Text style={{...styles.blueShortText, verticalAlign: 'top'}}>
+            <Text style={{ ...styles.blueShortText, verticalAlign: 'top' }}>
               Top
             </Text>
             <Text
@@ -183,14 +183,14 @@ export function TextTest() {
         </TestCase>
         <TestCase itShould="format nested Text components">
           <View style={styles.container}>
-            <Text style={{...styles.text, textAlign: 'right'}}>
-              <Text style={{fontWeight: 'bold'}}>Bold</Text>
-              <Text style={{fontStyle: 'italic'}}>Italic</Text>
+            <Text style={{ ...styles.text, textAlign: 'right' }}>
+              <Text style={{ fontWeight: 'bold' }}>Bold</Text>
+              <Text style={{ fontStyle: 'italic' }}>Italic</Text>
             </Text>
           </View>
         </TestCase>
         <TestCase itShould="test the the left and right padding of the text">
-          <View style={{height: 32, flexDirection: 'row'}}>
+          <View style={{ height: 32, flexDirection: 'row' }}>
             <Text
               style={{
                 height: '100%',
@@ -202,13 +202,13 @@ export function TextTest() {
               left
             </Text>
             <Text
-              style={{height: '100%', backgroundColor: 'red', color: 'white'}}>
+              style={{ height: '100%', backgroundColor: 'red', color: 'white' }}>
               right
             </Text>
           </View>
         </TestCase>
         <TestCase itShould="align text same way after adding padding">
-          <View style={{height: 70, flexDirection: 'column'}}>
+          <View style={{ height: 70, flexDirection: 'column' }}>
             <Text
               style={{
                 paddingLeft: 10,
@@ -252,10 +252,10 @@ export function TextTest() {
         <TestCase itShould="show text with different textDecorationLines">
           <View style={styles.container}>
             <Text style={styles.text}>None</Text>
-            <Text style={{...styles.text, textDecorationLine: 'underline'}}>
+            <Text style={{ ...styles.text, textDecorationLine: 'underline' }}>
               underline
             </Text>
-            <Text style={{...styles.text, textDecorationLine: 'line-through'}}>
+            <Text style={{ ...styles.text, textDecorationLine: 'line-through' }}>
               line-through
             </Text>
           </View>
@@ -263,7 +263,7 @@ export function TextTest() {
         <TestCase
           itShould="show lined-through text with text decoration color or font color"
           skip
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/271
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/271
         >
           <View style={styles.container}>
             <Text
@@ -285,7 +285,7 @@ export function TextTest() {
         </TestCase>
         <TestCase itShould="show text with big letter spacing">
           <View style={styles.smallContainer}>
-            <Text style={{...styles.smallText, letterSpacing: 8}}>
+            <Text style={{ ...styles.smallText, letterSpacing: 8 }}>
               Spacing: 8
             </Text>
           </View>
@@ -293,7 +293,7 @@ export function TextTest() {
         <TestCase
           itShould="show text with shadow"
           skip
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/278
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/278
         >
           <View>
             <Text
@@ -302,7 +302,7 @@ export function TextTest() {
                 fontSize: 20,
                 fontWeight: '900',
                 textShadowColor: 'rgba(0,0,255,0.8)',
-                textShadowOffset: {width: 1, height: 1},
+                textShadowOffset: { width: 1, height: 1 },
                 textShadowRadius: 20,
               }}>
               Text with shadow
@@ -311,7 +311,7 @@ export function TextTest() {
         </TestCase>
         <TestCase
           itShould="show text with correct textTransform"
-          //  123 1one is added to the end of text to see if the code correctly handles number
+        //  123 1one is added to the end of text to see if the code correctly handles number
         >
           <View style={styles.bigContainer}>
             <Text style={styles.smallText}>Text transform none 123 1one</Text>
@@ -341,7 +341,7 @@ export function TextTest() {
         <TestCase
           itShould="show text with different writing direction"
           skip
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/280
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/280
         >
           <View style={styles.container}>
             <Text style={styles.smallText}>Writing direction auto</Text>
@@ -364,7 +364,7 @@ export function TextTest() {
         <TestCase
           itShould="show text aligned vertically with/without font padding included"
           skip
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/281
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/281
         >
           <View style={styles.smallContainerRow}>
             <Text
@@ -415,7 +415,7 @@ export function TextTest() {
               },
             ].map((item, index) => (
               <View
-                style={{width: '20%', flexDirection: 'column'}}
+                style={{ width: '20%', flexDirection: 'column' }}
                 key={item.sortCode + '_' + index}>
                 <View
                   style={{
@@ -428,7 +428,7 @@ export function TextTest() {
                   <Text
                     ellipsizeMode={'tail'}
                     numberOfLines={1}
-                    style={{fontSize: 14, lineHeight: 19}}>
+                    style={{ fontSize: 14, lineHeight: 19 }}>
                     {item.sortName}
                   </Text>
                 </View>
@@ -437,35 +437,35 @@ export function TextTest() {
           </View>
         </TestCase>
         <TestCase itShould="display all texts in one line">
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
-            <Text style={{backgroundColor: 'cyan'}}>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
+            <Text style={{ backgroundColor: 'cyan' }}>
               {'0:12'}
               {'场'}
             </Text>
           </View>
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
-            <Text style={{backgroundColor: 'pink'}}>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
+            <Text style={{ backgroundColor: 'pink' }}>
               {'0;12'}
               {'场'}
             </Text>
           </View>
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
-            <Text style={{backgroundColor: 'cyan'}}>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
+            <Text style={{ backgroundColor: 'cyan' }}>
               {'0.12'}
               {'场'}
             </Text>
           </View>
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
-            <Text style={{backgroundColor: 'pink'}}>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
+            <Text style={{ backgroundColor: 'pink' }}>
               {'0,12'}
               {'场'}
             </Text>
           </View>
         </TestCase>
         <TestCase itShould="display: 'FOO''BAR' next to each other">
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
-            <Text style={{height: '100%', backgroundColor: 'pink'}}>FOO</Text>
-            <Text style={{height: '100%', backgroundColor: 'cyan'}}>BAR</Text>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
+            <Text style={{ height: '100%', backgroundColor: 'pink' }}>FOO</Text>
+            <Text style={{ height: '100%', backgroundColor: 'cyan' }}>BAR</Text>
           </View>
         </TestCase>
         <TestCase itShould="display: 'FOO''BAR' in two lines">
@@ -475,14 +475,14 @@ export function TextTest() {
               flexDirection: 'row',
               borderWidth: 1,
             }}>
-            <Text style={{height: '100%', backgroundColor: 'pink'}}>
+            <Text style={{ height: '100%', backgroundColor: 'pink' }}>
               FOO BAR
             </Text>
           </View>
         </TestCase>
         <TestCase itShould="display: 'FOO''BAR' next to each other with different fonts">
           <View
-            style={{height: 32, alignSelf: 'flex-start', flexDirection: 'row'}}>
+            style={{ height: 32, alignSelf: 'flex-start', flexDirection: 'row' }}>
             <Text
               style={{
                 height: '100%',
@@ -502,7 +502,7 @@ export function TextTest() {
           </View>
         </TestCase>
         <TestCase itShould="display: 'FOO''BAR' next to each other with different letterSpacing">
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
             <Text
               style={{
                 height: '100%',
@@ -522,51 +522,51 @@ export function TextTest() {
           </View>
         </TestCase>
         <TestCase itShould="text should not exceed cyan background (measuring text on cpp side)">
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
-            <Text style={{backgroundColor: 'silver'}}>FONT SIZE</Text>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
+            <Text style={{ backgroundColor: 'silver' }}>FONT SIZE</Text>
           </View>
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
-            <Text style={{fontSize: 20, backgroundColor: 'cyan'}}>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
+            <Text style={{ fontSize: 20, backgroundColor: 'cyan' }}>
               FONT SIZE
             </Text>
           </View>
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
-            <Text style={{backgroundColor: 'silver'}}>FONT WEIGHT</Text>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
+            <Text style={{ backgroundColor: 'silver' }}>FONT WEIGHT</Text>
           </View>
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
-            <Text style={{fontWeight: 'bold', backgroundColor: 'cyan'}}>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
+            <Text style={{ fontWeight: 'bold', backgroundColor: 'cyan' }}>
               FONT WEIGHT
             </Text>
           </View>
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
-            <Text style={{backgroundColor: 'silver'}}>LETTER SPACING!</Text>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
+            <Text style={{ backgroundColor: 'silver' }}>LETTER SPACING!</Text>
           </View>
           {/* On Android letter spacing may cause the bounding box to be full width (remove ! to see the problem) */}
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
-            <Text style={{letterSpacing: 1, backgroundColor: 'cyan'}}>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
+            <Text style={{ letterSpacing: 1, backgroundColor: 'cyan' }}>
               LETTER SPACING!
             </Text>
           </View>
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
-            <Text style={{backgroundColor: 'silver'}}>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
+            <Text style={{ backgroundColor: 'silver' }}>
               NUMBER OF LINES @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @
               @ @ @
             </Text>
           </View>
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
             <Text
-              style={{width: 256, backgroundColor: 'cyan'}}
+              style={{ width: 256, backgroundColor: 'cyan' }}
               numberOfLines={1}>
               NUMBER OF LINES @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @
               @ @ @
             </Text>
           </View>
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
-            <Text style={{backgroundColor: 'silver'}}>LINE HEIGHT</Text>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
+            <Text style={{ backgroundColor: 'silver' }}>LINE HEIGHT</Text>
           </View>
-          <View style={{alignSelf: 'flex-start', flexDirection: 'row'}}>
+          <View style={{ alignSelf: 'flex-start', flexDirection: 'row' }}>
             <Text
-              style={{lineHeight: 32, backgroundColor: 'cyan'}}
+              style={{ lineHeight: 32, backgroundColor: 'cyan' }}
               numberOfLines={1}>
               LINE HEIGHT
             </Text>
@@ -574,37 +574,37 @@ export function TextTest() {
         </TestCase>
         <TestSuite name="views in text">
           <TestCase itShould="vertically align text and view">
-            <Text style={{color: 'red', lineHeight: 82}}>
+            <Text style={{ color: 'red', lineHeight: 82 }}>
               {'Hello World'}
-              <View style={{width: 12, height: 12, backgroundColor: 'blue'}} />
+              <View style={{ width: 12, height: 12, backgroundColor: 'blue' }} />
             </Text>
           </TestCase>
           <TestCase itShould="not crash when a view is trimmed by number of lines (#1)">
             <Text numberOfLines={1}>
               '中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试'
-              {<View style={{width: 64, height: 64, backgroundColor: 'red'}} />}
+              {<View style={{ width: 64, height: 64, backgroundColor: 'red' }} />}
             </Text>
           </TestCase>
           <TestCase itShould="not crash when a view is trimmed by number of lines (#2)">
             <Text numberOfLines={1}>
               {'中文测试中文测试'}
-              {<View style={{width: 308, height: 5, backgroundColor: 'red'}} />}
+              {<View style={{ width: 308, height: 5, backgroundColor: 'red' }} />}
             </Text>
           </TestCase>
           <TestCase itShould="wrap first and second paragraph in the same way">
-            <View style={{width: 200, backgroundColor: 'silver'}}>
+            <View style={{ width: 200, backgroundColor: 'silver' }}>
               <Text>
                 天地玄黄 宇宙洪荒 日月盈昃 辰宿列张 寒来暑往 秋收冬藏 闰馀成岁
               </Text>
-              <Text style={{marginTop: 16}}>
-                <Text style={{fontWeight: 'bold'}}>天地玄黄</Text> 宇宙洪荒
+              <Text style={{ marginTop: 16 }}>
+                <Text style={{ fontWeight: 'bold' }}>天地玄黄</Text> 宇宙洪荒
                 日月盈昃 辰宿列张 寒来暑往 秋收冬藏 闰馀成岁
               </Text>
             </View>
           </TestCase>
           <TestCase itShould="not crash the app">
             <Text>
-              <View style={{width: 64, height: 64, backgroundColor: 'red'}} />
+              <View style={{ width: 64, height: 64, backgroundColor: 'red' }} />
             </Text>
           </TestCase>
           <TestCase itShould="render red rectangle after 'FOO'">
@@ -614,9 +614,9 @@ export function TextTest() {
                 alignSelf: 'flex-start',
                 flexDirection: 'row',
               }}>
-              <Text style={{height: '100%', backgroundColor: 'pink'}}>
+              <Text style={{ height: '100%', backgroundColor: 'pink' }}>
                 FOO
-                <View style={{width: 32, height: 16, backgroundColor: 'red'}} />
+                <View style={{ width: 32, height: 16, backgroundColor: 'red' }} />
                 BAR
               </Text>
             </View>
@@ -653,7 +653,7 @@ export function TextTest() {
                   flexDirection: 'row',
                 }}>
                 FOO
-                <View style={{flex: 1, height: 32, backgroundColor: 'red'}} />
+                <View style={{ flex: 1, height: 32, backgroundColor: 'red' }} />
                 BAR
               </Text>
             </View>
@@ -665,10 +665,10 @@ export function TextTest() {
                 alignSelf: 'flex-start',
                 flexDirection: 'row',
               }}>
-              <Text style={{height: '100%', backgroundColor: 'pink'}}>
+              <Text style={{ height: '100%', backgroundColor: 'pink' }}>
                 FOO
                 <View
-                  style={{width: '50%', height: '50%', backgroundColor: 'red'}}
+                  style={{ width: '50%', height: '50%', backgroundColor: 'red' }}
                 />
                 BAR
               </Text>
@@ -681,9 +681,9 @@ export function TextTest() {
                 alignSelf: 'flex-start',
                 flexDirection: 'row',
               }}>
-              <Text style={{height: '100%', backgroundColor: 'pink'}}>
+              <Text style={{ height: '100%', backgroundColor: 'pink' }}>
                 FOO
-                <View style={{backgroundColor: 'red'}}>
+                <View style={{ backgroundColor: 'red' }}>
                   <Text>BAZ</Text>
                 </View>
                 BAR
@@ -695,15 +695,15 @@ export function TextTest() {
           <Text>{SAMPLE_PARAGRAPH_TEXT}</Text>
         </TestCase>
         <TestCase itShould="show a long text without a space below or above (fontFamily)">
-          <Text style={{fontFamily: 'StintUltraCondensed-Regular'}}>
+          <Text style={{ fontFamily: 'StintUltraCondensed-Regular' }}>
             {SAMPLE_PARAGRAPH_TEXT}
           </Text>
         </TestCase>
         <TestCase itShould="show a long text without a space below or above (font size)">
-          <Text style={{fontSize: 8}}>{SAMPLE_PARAGRAPH_TEXT}</Text>
+          <Text style={{ fontSize: 8 }}>{SAMPLE_PARAGRAPH_TEXT}</Text>
         </TestCase>
         <TestCase itShould="show a long text without a space below or above (line height)">
-          <Text style={{lineHeight: 21}}>{SAMPLE_PARAGRAPH_TEXT}</Text>
+          <Text style={{ lineHeight: 21 }}>{SAMPLE_PARAGRAPH_TEXT}</Text>
         </TestCase>
         <TestCase itShould="show 2 lines of text">
           <Text numberOfLines={2}>{SAMPLE_PARAGRAPH_TEXT}</Text>
@@ -714,7 +714,7 @@ export function TextTest() {
               Nostrud irure ex sunt dolor [\n]{'\n'}cillum irure laboris ex ut
               adipisicing magna reprehenderit Lorem.
             </Text>
-            <Text style={{fontSize: 24}}>
+            <Text style={{ fontSize: 24 }}>
               Do ullamco excepteur quis labore Lorem mollit tempor ex minim.
             </Text>
             <Text>
@@ -726,15 +726,15 @@ export function TextTest() {
         <TestCase
           itShould="show text without a space below or above (fragments with different fonts)"
           skip
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/564
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/565
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/564
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/565
         >
           <Text>
-            <Text style={{fontFamily: 'StintUltraCondensed-Regular'}}>
+            <Text style={{ fontFamily: 'StintUltraCondensed-Regular' }}>
               Nostrud irure ex sunt dolor [\n]{'\n'}cillum irure laboris ex ut
               adipisicing magna reprehenderit Lorem.
             </Text>
-            <Text style={{fontSize: 24, fontFamily: 'Pacifico-Regular'}}>
+            <Text style={{ fontSize: 24, fontFamily: 'Pacifico-Regular' }}>
               Do ullamco excepteur quis labore Lorem mollit tempor ex minim.
             </Text>
             <Text>
@@ -746,14 +746,14 @@ export function TextTest() {
       </TestSuite>
       <TestSuite name="padding">
         <TestCase itShould="preserve a gap of atleast 24 pixels from each container edge">
-          <View style={{width: 300}}>
-            <Text style={{padding: 24, borderWidth: 1}}>
-              <Text style={{color: 'blue'}}>Fragment1</Text>
+          <View style={{ width: 300 }}>
+            <Text style={{ padding: 24, borderWidth: 1 }}>
+              <Text style={{ color: 'blue' }}>Fragment1</Text>
               {
                 'Fragment2 Fragment2 Fragment2 Fragment2 Fragment2 Fragment2 Fragment2 '
               }
             </Text>
-            <Text style={{padding: 24, borderWidth: 1}}>
+            <Text style={{ padding: 24, borderWidth: 1 }}>
               Fragment1 Fragment1 Fragment1 Fragment1 Fragment1 Fragment1
               Fragment1 Fragment1
             </Text>
@@ -765,7 +765,7 @@ export function TextTest() {
             harmony: 'RN problem, also fails on Android',
           })}
           itShould="display the attachment inline with text">
-          <Text style={{padding: 20}}>
+          <Text style={{ padding: 20 }}>
             Fragment1ii
             <PressCounter />
           </Text>
@@ -773,7 +773,7 @@ export function TextTest() {
         <TestCase
           skip // Inserting zero-width space in RNSimpleText that fixes this issue breaks wrapping. This problem needs to be fixed on ArkUI's side.
           itShould="insert ellipsis at same location">
-          <View style={{width: 300}}>
+          <View style={{ width: 300 }}>
             <Text
               style={{
                 paddingRight: 10,
@@ -807,8 +807,8 @@ export function TextTest() {
             style={{
               flexDirection: 'row',
             }}>
-            <Text style={{lineHeight: 20, backgroundColor: 'green'}}>
-              <Text style={{lineHeight: 25, backgroundColor: 'yellow'}}>
+            <Text style={{ lineHeight: 20, backgroundColor: 'green' }}>
+              <Text style={{ lineHeight: 25, backgroundColor: 'yellow' }}>
                 INNER
               </Text>
               OUTER
@@ -826,40 +826,40 @@ export function TextTest() {
             style={{
               flexDirection: 'row',
             }}>
-            <Text style={{backgroundColor: 'red'}}>
-              <Text style={{backgroundColor: 'green'}}>INNER</Text>
+            <Text style={{ backgroundColor: 'red' }}>
+              <Text style={{ backgroundColor: 'green' }}>INNER</Text>
               OUTER
             </Text>
           </View>
         </TestCase>
         <TestCase itShould="show text with different vertical alignments (verticalAlign)">
-          <View style={{...styles.smallContainerRow}}>
-            <Text style={{verticalAlign: 'auto'}}>
+          <View style={{ ...styles.smallContainerRow }}>
+            <Text style={{ verticalAlign: 'auto' }}>
               -<Text style={styles.blueShortText}>Auto</Text>-
             </Text>
-            <Text style={{verticalAlign: 'top'}}>
+            <Text style={{ verticalAlign: 'top' }}>
               -<Text style={styles.blueShortText}>Top</Text>-
             </Text>
-            <Text style={{verticalAlign: 'middle'}}>
+            <Text style={{ verticalAlign: 'middle' }}>
               -<Text style={styles.blueShortText}>Middle</Text>-
             </Text>
-            <Text style={{verticalAlign: 'bottom'}}>
+            <Text style={{ verticalAlign: 'bottom' }}>
               -<Text style={styles.blueShortText}>Bottom</Text>-
             </Text>
           </View>
         </TestCase>
         <TestCase itShould="show text with different fontStyles">
-          <View style={{...styles.smallContainerRow}}>
-            <Text style={{fontStyle: 'normal'}}>
+          <View style={{ ...styles.smallContainerRow }}>
+            <Text style={{ fontStyle: 'normal' }}>
               <Text style={styles.blueShortText}>Normal</Text>
             </Text>
-            <Text style={{fontStyle: 'italic'}}>
+            <Text style={{ fontStyle: 'italic' }}>
               <Text style={styles.blueShortText}>Top</Text>
             </Text>
           </View>
         </TestCase>
         <TestCase itShould="show text with different text decorations">
-          <View style={{...styles.smallContainerRow}}>
+          <View style={{ ...styles.smallContainerRow }}>
             <Text
               style={{
                 textDecorationLine: 'line-through',
@@ -879,13 +879,13 @@ export function TextTest() {
         <TestCase
           itShould="show text with shadow"
           skip
-          //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/278
+        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/278
         >
           <View style={styles.smallContainer}>
             <Text
               style={{
                 textShadowColor: 'rgba(0,0,255,0.8)',
-                textShadowOffset: {width: 1, height: 1},
+                textShadowOffset: { width: 1, height: 1 },
                 textShadowRadius: 20,
               }}>
               <Text style={styles.smallText}>Text with shadow</Text>
@@ -894,7 +894,7 @@ export function TextTest() {
         </TestCase>
         <TestCase
           itShould="show text with correct textTransform "
-          //  123 1one is added to the end of text to see if the code correctly handles number
+        //  123 1one is added to the end of text to see if the code correctly handles number
         >
           <View style={styles.bigContainer}>
             <Text style={styles.smallText}>Text transform none 123 1one</Text>
@@ -925,47 +925,47 @@ export function TextTest() {
           </View>
         </TestCase>
         <TestCase itShould="show text with different vertical alignments (textAlignVertical)">
-          <View style={{...styles.smallContainerRow}}>
-            <Text style={{textAlignVertical: 'auto'}}>
+          <View style={{ ...styles.smallContainerRow }}>
+            <Text style={{ textAlignVertical: 'auto' }}>
               -<Text style={styles.blueShortText}>Auto</Text>-
             </Text>
-            <Text style={{textAlignVertical: 'top'}}>
+            <Text style={{ textAlignVertical: 'top' }}>
               -<Text style={styles.blueShortText}>Top</Text>-
             </Text>
-            <Text style={{textAlignVertical: 'center'}}>
+            <Text style={{ textAlignVertical: 'center' }}>
               -<Text style={styles.blueShortText}>Center</Text>-
             </Text>
-            <Text style={{textAlignVertical: 'bottom'}}>
+            <Text style={{ textAlignVertical: 'bottom' }}>
               -<Text style={styles.blueShortText}>Bottom</Text>-
             </Text>
           </View>
         </TestCase>
         <TestCase itShould="align text vertically">
-          <View style={{width: 300, borderRightWidth: 1}}>
+          <View style={{ width: 300, borderRightWidth: 1 }}>
             <Text>
-              <Text style={{lineHeight: 64, backgroundColor: 'red'}}>
+              <Text style={{ lineHeight: 64, backgroundColor: 'red' }}>
                 lineHeight: 64
               </Text>
-              <Text style={{lineHeight: 16, backgroundColor: 'blue'}}>
+              <Text style={{ lineHeight: 16, backgroundColor: 'blue' }}>
                 lineHeight: 16; lineHeight: 16; lineHeight: 16; lineHeight: 16;
               </Text>
               <View
-                style={{backgroundColor: 'purple', width: 16, height: 16}}
+                style={{ backgroundColor: 'purple', width: 16, height: 16 }}
               />
             </Text>
-            <Text style={{marginTop: 16}}>
-              <Text style={{lineHeight: 16, backgroundColor: 'blue'}}>
+            <Text style={{ marginTop: 16 }}>
+              <Text style={{ lineHeight: 16, backgroundColor: 'blue' }}>
                 lineHeight: 16
               </Text>
-              <Text style={{lineHeight: 64, backgroundColor: 'red'}}>
+              <Text style={{ lineHeight: 64, backgroundColor: 'red' }}>
                 lineHeight: 64; lineHeight: 64; lineHeight: 64; lineHeight: 64
               </Text>
               <View
-                style={{backgroundColor: 'purple', width: 16, height: 16}}
+                style={{ backgroundColor: 'purple', width: 16, height: 16 }}
               />
             </Text>
 
-            <Text style={{marginTop: 16}}>
+            <Text style={{ marginTop: 16 }}>
               <Text
                 style={{
                   lineHeight: 64,
@@ -987,50 +987,50 @@ export function TextTest() {
           </View>
         </TestCase>
         <TestCase itShould="show text with different horizontal alignments">
-          <Text style={{textAlign: 'left'}}>
+          <Text style={{ textAlign: 'left' }}>
             <Text>Left: </Text>
-            <Text style={{fontSize: 8}}>{SAMPLE_PARAGRAPH_TEXT}</Text>
+            <Text style={{ fontSize: 8 }}>{SAMPLE_PARAGRAPH_TEXT}</Text>
           </Text>
-          <Text style={{textAlign: 'center'}}>
+          <Text style={{ textAlign: 'center' }}>
             <Text>Center: </Text>
-            <Text style={{fontSize: 8}}>{SAMPLE_PARAGRAPH_TEXT}</Text>
+            <Text style={{ fontSize: 8 }}>{SAMPLE_PARAGRAPH_TEXT}</Text>
           </Text>
-          <Text style={{textAlign: 'right'}}>
+          <Text style={{ textAlign: 'right' }}>
             <Text>Right: </Text>
-            <Text style={{fontSize: 8}}>{SAMPLE_PARAGRAPH_TEXT}</Text>
+            <Text style={{ fontSize: 8 }}>{SAMPLE_PARAGRAPH_TEXT}</Text>
           </Text>
-          <Text style={{textAlign: 'justify'}}>
+          <Text style={{ textAlign: 'justify' }}>
             <Text>Justify: </Text>
-            <Text style={{fontSize: 8}}>{SAMPLE_PARAGRAPH_TEXT}</Text>
+            <Text style={{ fontSize: 8 }}>{SAMPLE_PARAGRAPH_TEXT}</Text>
           </Text>
         </TestCase>
         <TestCase itShould="display 1 line of text">
-          <View style={{width: 200, backgroundColor: 'silver'}}>
-            <Text style={{textAlign: 'left'}} numberOfLines={1}>
-              <Text style={{fontSize: 12, backgroundColor: 'cyan'}}>{'>'}</Text>
-              <Text style={{fontSize: 8}}>{SAMPLE_PARAGRAPH_TEXT}</Text>
+          <View style={{ width: 200, backgroundColor: 'silver' }}>
+            <Text style={{ textAlign: 'left' }} numberOfLines={1}>
+              <Text style={{ fontSize: 12, backgroundColor: 'cyan' }}>{'>'}</Text>
+              <Text style={{ fontSize: 8 }}>{SAMPLE_PARAGRAPH_TEXT}</Text>
             </Text>
           </View>
         </TestCase>
         <TestCase itShould="display 2 lines of text">
-          <Text style={{textAlign: 'left'}} numberOfLines={2}>
-            <Text style={{fontSize: 12, backgroundColor: 'cyan'}}>
+          <Text style={{ textAlign: 'left' }} numberOfLines={2}>
+            <Text style={{ fontSize: 12, backgroundColor: 'cyan' }}>
               {'@@@@@'}
             </Text>
-            <Text style={{fontSize: 8}}>{SAMPLE_PARAGRAPH_TEXT}</Text>
+            <Text style={{ fontSize: 8 }}>{SAMPLE_PARAGRAPH_TEXT}</Text>
           </Text>
         </TestCase>
         <TestCase itShould="display 2 lines of text (placeholder test)">
-          <Text style={{textAlign: 'left'}} numberOfLines={2}>
-            <View style={{width: 0, height: 8, backgroundColor: 'red'}} />
-            <Text style={{fontSize: 8}}>{SAMPLE_PARAGRAPH_TEXT}</Text>
+          <Text style={{ textAlign: 'left' }} numberOfLines={2}>
+            <View style={{ width: 0, height: 8, backgroundColor: 'red' }} />
+            <Text style={{ fontSize: 8 }}>{SAMPLE_PARAGRAPH_TEXT}</Text>
           </Text>
         </TestCase>
         <TestCase itShould="wrap long words">
-          <View style={{backgroundColor: 'silver', width: 200}}>
-            <Text style={{textAlign: 'left'}}>
-              <View style={{width: 8, height: 8, backgroundColor: 'red'}} />
-              <Text style={{fontSize: 8}}>
+          <View style={{ backgroundColor: 'silver', width: 200 }}>
+            <Text style={{ textAlign: 'left' }}>
+              <View style={{ width: 8, height: 8, backgroundColor: 'red' }} />
+              <Text style={{ fontSize: 8 }}>
                 0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
               </Text>
             </Text>
@@ -1045,12 +1045,12 @@ export function TextTest() {
               textAlign: 'justify',
               backgroundColor: 'green',
             }}>
-            <Text style={{fontSize: 16}}>Justify te st</Text>
-            <Text style={{fontSize: 8, backgroundColor: 'purple'}}>
+            <Text style={{ fontSize: 16 }}>Justify te st</Text>
+            <Text style={{ fontSize: 8, backgroundColor: 'purple' }}>
               Quis exercitation do eu in laboris nulla sit elit officia.
               Incididunt ipsum aliquip IncididuntIncididunt commodo proident
             </Text>
-            <Text style={{fontSize: 38, backgroundColor: 'blue'}}>
+            <Text style={{ fontSize: 38, backgroundColor: 'blue' }}>
               Quis exercitation do eu in laboris nulla sit elit officia.
               Incididunt ipsum aliquip IncididuntIncididunrumbumlublum commodo
               proident
@@ -1162,16 +1162,16 @@ export function TextTest() {
           skip // https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/586
           itShould="render Text with different text decoration styles">
           <View>
-            <Text style={[styles.styledBox, {textDecorationStyle: 'dashed'}]}>
+            <Text style={[styles.styledBox, { textDecorationStyle: 'dashed' }]}>
               Text decoration style dashed
             </Text>
-            <Text style={[styles.styledBox, {textDecorationStyle: 'dotted'}]}>
+            <Text style={[styles.styledBox, { textDecorationStyle: 'dotted' }]}>
               Text decoration style dotted
             </Text>
-            <Text style={[styles.styledBox, {textDecorationStyle: 'double'}]}>
+            <Text style={[styles.styledBox, { textDecorationStyle: 'double' }]}>
               Text decoration style double
             </Text>
-            <Text style={[styles.styledBox, {textDecorationStyle: 'solid'}]}>
+            <Text style={[styles.styledBox, { textDecorationStyle: 'solid' }]}>
               Text decoration style solid
             </Text>
           </View>
@@ -1182,10 +1182,10 @@ export function TextTest() {
         <TestCase modal itShould="render text with allowFontScaling">
           <Text allowFontScaling>Scaled</Text>
           <Text allowFontScaling={false}>Not scaled</Text>
-          <Text style={{fontSize: 40}} allowFontScaling>
+          <Text style={{ fontSize: 40 }} allowFontScaling>
             Scaled big
           </Text>
-          <Text style={{fontSize: 40}} allowFontScaling={false}>
+          <Text style={{ fontSize: 40 }} allowFontScaling={false}>
             Not scaled big
           </Text>
         </TestCase>
@@ -1273,8 +1273,8 @@ const TextPressRetentionOffsetTest = () => {
   const [pressCount, setPressCount] = useState(0);
 
   return (
-    <View style={{height: 500, justifyContent: 'center'}}>
-      <Text style={{textAlign: 'center'}}> Press count: {pressCount} </Text>
+    <View style={{ height: 500, justifyContent: 'center' }}>
+      <Text style={{ textAlign: 'center' }}> Press count: {pressCount} </Text>
       <View
         style={{
           backgroundColor: 'lightblue',
@@ -1308,17 +1308,17 @@ const TextPressNestedTest = () => {
   const [pressCount, setPressCount] = useState(0);
 
   return (
-    <View style={{height: 500, justifyContent: 'center'}}>
-      <Text style={{textAlign: 'center'}}> Press count: {pressCount} </Text>
+    <View style={{ height: 500, justifyContent: 'center' }}>
+      <Text style={{ textAlign: 'center' }}> Press count: {pressCount} </Text>
       <View
         style={{
           backgroundColor: 'lightblue',
           height: 250,
           justifyContent: 'center',
         }}>
-        <Text style={{backgroundColor: 'green', height: 250}}>
+        <Text style={{ backgroundColor: 'green', height: 250 }}>
           <Text
-            style={{backgroundColor: 'purple', height: 150, fontSize: 34}}
+            style={{ backgroundColor: 'purple', height: 150, fontSize: 34 }}
             onPress={() => setPressCount(pressCount + 1)}>
             press me (on android press below also triggers event)
           </Text>
@@ -1330,16 +1330,16 @@ const TextPressNestedTest = () => {
 
 const TextAdjustsFontSizeToFitTest = () => {
   const testCases = [
-    {adjustsFontSizeToFit: true, minimumFontScale: 0.1},
-    {adjustsFontSizeToFit: true, minimumFontScale: 0.5},
-    {adjustsFontSizeToFit: true, minimumFontScale: 0.9},
-    {adjustsFontSizeToFit: false, minimumFontScale: 0.2},
+    { adjustsFontSizeToFit: true, minimumFontScale: 0.1 },
+    { adjustsFontSizeToFit: true, minimumFontScale: 0.5 },
+    { adjustsFontSizeToFit: true, minimumFontScale: 0.9 },
+    { adjustsFontSizeToFit: false, minimumFontScale: 0.2 },
   ];
   return (
-    <View style={{height: 400, marginTop: 50}}>
+    <View style={{ height: 400, marginTop: 50 }}>
       {testCases.map((testCase, index) => (
-        <View key={index} style={{backgroundColor: 'purple'}}>
-          <Text {...testCase} style={{fontSize: 50}} numberOfLines={1}>
+        <View key={index} style={{ backgroundColor: 'purple' }}>
+          <Text {...testCase} style={{ fontSize: 50 }} numberOfLines={1}>
             4x Very long text Very long text Very long text Very long text
           </Text>
         </View>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/TimerTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/TimerTest.tsx
index 4348e47ca26c9b71f111ca4a7f547f61eed63bf5..c7788ae5b0988363f9196072d7a2e851a6694923 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/TimerTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/TimerTest.tsx
@@ -6,9 +6,9 @@
  */
 
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import React, {useEffect} from 'react';
-import {AppState, AppStateStatus, Text} from 'react-native';
-import {Button} from '../components';
+import React, { useEffect } from 'react';
+import { AppState, AppStateStatus, Text } from 'react-native';
+import { Button } from '../components';
 
 async function wait(ms: number) {
   return new Promise(resolve => {
@@ -24,7 +24,7 @@ export function TimerTest() {
       <TestCase
         itShould="take three seconds to finish this test (setTimeout)"
         initialState={0}
-        arrange={({setState}) => {
+        arrange={({ setState }) => {
           return (
             <Button
               label="Start Timeout"
@@ -34,7 +34,7 @@ export function TimerTest() {
             />
           );
         }}
-        assert={async ({expect}) => {
+        assert={async ({ expect }) => {
           const waitTimeInMs = 3000;
           const time1 = new Date().getTime();
           await wait(waitTimeInMs);
@@ -50,7 +50,7 @@ export function TimerTest() {
       <TestCase
         itShould="take three seconds to finish this test (setInterval)"
         initialState={0}
-        arrange={({setState}) => {
+        arrange={({ setState }) => {
           return (
             <Button
               label="Start Interval"
@@ -60,7 +60,7 @@ export function TimerTest() {
             />
           );
         }}
-        assert={async ({expect}) => {
+        assert={async ({ expect }) => {
           await wait(3000);
           let i = 0;
           const time1 = new Date().getTime();
@@ -80,11 +80,11 @@ export function TimerTest() {
           );
         }}
       />
-      <TestCase<{date: Date; appStateStatus: AppStateStatus}[]>
+      <TestCase<{ date: Date; appStateStatus: AppStateStatus }[]>
         modal
         itShould="not trigger updates when the application is in background"
         initialState={[]}
-        arrange={({state, setState}) => {
+        arrange={({ state, setState }) => {
           return (
             <Effect
               onEffect={() => {
@@ -121,7 +121,7 @@ export function TimerTest() {
             </Effect>
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(
             state.filter(tick => tick.appStateStatus !== 'active').length,
           ).to.be.eq(0);
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/TouchHandlingTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/TouchHandlingTest.tsx
index bf3522c791067433599c17e7921f9ea173da2c69..5b28d52b73d302842628e4d31e306103352273a6 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/TouchHandlingTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/TouchHandlingTest.tsx
@@ -6,7 +6,7 @@
  */
 
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {useEffect, useRef, useState} from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
   Animated,
   PanResponder,
@@ -17,7 +17,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import {Button} from '../components';
+import { Button } from '../components';
 import React from 'react';
 
 export function TouchHandlingTest() {
@@ -26,7 +26,7 @@ export function TouchHandlingTest() {
       <TestCase
         itShould="pass when pressed red rectangle"
         initialState={false}
-        arrange={({setState}) => {
+        arrange={({ setState }) => {
           return (
             <TouchIssue1
               onPress={() => {
@@ -35,7 +35,7 @@ export function TouchHandlingTest() {
             />
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.true;
         }}
       />
@@ -43,69 +43,69 @@ export function TouchHandlingTest() {
       <TestCase
         itShould="register a touch after native transform animation"
         initialState={false}
-        arrange={({setState}) => (
+        arrange={({ setState }) => (
           <RectangleSlider
             onPress={() => {
               setState(prev => !prev);
             }}
           />
         )}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.true;
         }}
       />
       <TestCase
         itShould="handle press on rotated view"
         initialState={false}
-        arrange={({setState}) => (
+        arrange={({ setState }) => (
           <TouchableTransformedTest
             setState={setState}
-            transform={[{rotate: '180deg'}, {translateX: 100}]}
+            transform={[{ rotate: '180deg' }, { translateX: 100 }]}
           />
         )}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.true;
         }}
       />
       <TestCase
         itShould="handle press on scaled view"
         initialState={false}
-        arrange={({setState}) => (
+        arrange={({ setState }) => (
           <TouchableTransformedTest
             setState={setState}
-            transform={[{scaleX: -1}, {translateX: 100}]}
+            transform={[{ scaleX: -1 }, { translateX: 100 }]}
           />
         )}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.true;
         }}
       />
       <TestCase itShould="report transformed touch coordinates">
         <TouchCoordinatesTest
           transform={[
-            {rotate: '45deg'},
-            {translateY: 50},
-            {translateX: -50},
-            {scaleY: -1},
-            {scale: 0.75},
+            { rotate: '45deg' },
+            { translateY: 50 },
+            { translateX: -50 },
+            { scaleY: -1 },
+            { scale: 0.75 },
           ]}
         />
       </TestCase>
       <TestCase itShould="report transformed touch coordinates">
         <TouchCoordinatesTest
           transform={[
-            {rotate: '-45deg'},
-            {translateY: 50},
-            {translateX: -50},
-            {scaleX: -1},
-            {scaleY: 1.25},
+            { rotate: '-45deg' },
+            { translateY: 50 },
+            { translateX: -50 },
+            { scaleX: -1 },
+            { scaleY: 1.25 },
           ]}
         />
       </TestCase>
       <TestCase
         itShould="respond to touches on disabled components when wrapped in Touchables"
         initialState={false}
-        arrange={({setState}) => (
+        arrange={({ setState }) => (
           <TouchableOpacity
             onPress={() => {
               setState(true);
@@ -120,7 +120,7 @@ export function TouchHandlingTest() {
             />
           </TouchableOpacity>
         )}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.true;
         }}
       />
@@ -133,7 +133,7 @@ export function TouchHandlingTest() {
   );
 }
 
-function RectangleSlider(props: {onPress: () => void}) {
+function RectangleSlider(props: { onPress: () => void }) {
   const square1Anim = useRef(new Animated.Value(0)).current;
   const animation = Animated.timing(square1Anim, {
     toValue: 64,
@@ -194,10 +194,10 @@ function TouchCoordinatesTest({
 }: {
   transform?: ViewStyle['transform'];
 }) {
-  const [position, setPosition] = React.useState({x: 0, y: 0});
+  const [position, setPosition] = React.useState({ x: 0, y: 0 });
 
   return (
-    <View style={{height: 250}}>
+    <View style={{ height: 250 }}>
       <Text>Touch coordinates: {JSON.stringify(position)}</Text>
       <View
         style={{
@@ -226,7 +226,7 @@ function TouchCoordinatesTest({
   );
 }
 
-const TouchIssue1 = ({onPress}: {onPress: () => void}) => {
+const TouchIssue1 = ({ onPress }: { onPress: () => void }) => {
   const nPressesRef = useRef(0);
   const [nRenders, setNRenders] = useState(0);
   const [label, setLabel] = useState('hello');
@@ -242,7 +242,7 @@ const TouchIssue1 = ({onPress}: {onPress: () => void}) => {
 
   if (nRenders > 0) {
     return (
-      <View style={{opacity: 1, marginTop: 50}}>
+      <View style={{ opacity: 1, marginTop: 50 }}>
         <View collapsable={false}>
           <TouchableOpacity
             onPress={() => {
@@ -253,7 +253,7 @@ const TouchIssue1 = ({onPress}: {onPress: () => void}) => {
             <Text>{label}</Text>
             <View
               id="foo"
-              style={{height: 100, width: 100, backgroundColor: 'red'}}
+              style={{ height: 100, width: 100, backgroundColor: 'red' }}
             />
           </TouchableOpacity>
         </View>
@@ -261,9 +261,9 @@ const TouchIssue1 = ({onPress}: {onPress: () => void}) => {
     );
   } else {
     return (
-      <View style={{opacity: 0, marginTop: 50}}>
+      <View style={{ opacity: 0, marginTop: 50 }}>
         <View collapsable={false}>
-          <View style={{height: 100, width: 100}} />
+          <View style={{ height: 100, width: 100 }} />
         </View>
       </View>
     );
@@ -294,12 +294,12 @@ class ScrollViewLockedIssue extends React.Component {
 
   render(): React.ReactNode {
     return (
-      <ScrollView style={{height: '75%'}}>
-        <View style={{height: 100}}>
+      <ScrollView style={{ height: '75%' }}>
+        <View style={{ height: 100 }}>
           <Text>this is first part</Text>
         </View>
         <View
-          style={{height: 300, backgroundColor: 'green'}}
+          style={{ height: 300, backgroundColor: 'green' }}
           {...this._gestureHandlers.panHandlers}>
           <Text>this is second part</Text>
         </View>
@@ -310,7 +310,7 @@ class ScrollViewLockedIssue extends React.Component {
           }}
           {...this._gestureHandlers.panHandlers}>
           <TouchableOpacity>
-            <Text style={{backgroundColor: 'gray', height: 100}}>
+            <Text style={{ backgroundColor: 'gray', height: 100 }}>
               SWIPE HORIZONTALLY HERE
             </Text>
           </TouchableOpacity>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/TouchableOpacityTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/TouchableOpacityTest.tsx
index 5f4091389cceef78d3825ffc2af3edba08eedb2c..aae95f51acd1300b686615ae019ad739d4b3e330 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/TouchableOpacityTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/TouchableOpacityTest.tsx
@@ -5,9 +5,9 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {Text, TouchableOpacity, View, ViewProps} from 'react-native';
+import { Text, TouchableOpacity, View, ViewProps } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {useState} from 'react';
+import { useState } from 'react';
 
 export const TouchableOpacityTest = () => {
   const [pressCountOpacity, setPressCountOpacity] = useState(0);
@@ -15,12 +15,12 @@ export const TouchableOpacityTest = () => {
   return (
     <TestSuite name="TouchableOpacity">
       <TestCase itShould="make the text less visible on press">
-        <TouchableOpacity onPress={() => {}}>
+        <TouchableOpacity onPress={() => { }}>
           <PressMe />
         </TouchableOpacity>
       </TestCase>
       <TestCase itShould="make the text slightly less visible on press (activeOpacity)">
-        <TouchableOpacity activeOpacity={0.5} onPress={() => {}}>
+        <TouchableOpacity activeOpacity={0.5} onPress={() => { }}>
           <PressMe />
         </TouchableOpacity>
       </TestCase>
@@ -63,10 +63,10 @@ export const TouchableOpacityTest = () => {
   );
 };
 
-function PressMe(props: ViewProps & {endLabel?: string | number}) {
+function PressMe(props: ViewProps & { endLabel?: string | number }) {
   return (
-    <View {...props} style={{padding: 16, borderWidth: 1}}>
-      <Text style={{color: 'blue', height: 24, width: '100%'}}>
+    <View {...props} style={{ padding: 16, borderWidth: 1 }}>
+      <Text style={{ color: 'blue', height: 24, width: '100%' }}>
         Press me{props.endLabel !== undefined ? ` (${props.endLabel})` : ''}
       </Text>
     </View>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/TouchablesTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/TouchablesTest.tsx
index 57972bb46cde2c8c426a3d0d2f0a62a003e8554a..afcdfb64e65f0712defc1bb8591e6c658aeb10f3 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/TouchablesTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/TouchablesTest.tsx
@@ -15,7 +15,7 @@ import {
   ViewProps,
 } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {useState} from 'react';
+import { useState } from 'react';
 
 export const TouchablesTest = () => {
   const [pressCountHighlight, setPressCountHighlight] = useState(0);
@@ -23,7 +23,7 @@ export const TouchablesTest = () => {
     <TestSuite name="Touchables">
       <TestCase
         itShould="export Touchable"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(Touchable).to.be.not.undefined;
         }}
       />
@@ -31,7 +31,7 @@ export const TouchablesTest = () => {
         <TouchableHighlight
           activeOpacity={1}
           underlayColor="cyan"
-          onPress={() => {}}>
+          onPress={() => { }}>
           <PressMe />
         </TouchableHighlight>
       </TestCase>
@@ -43,7 +43,7 @@ export const TouchablesTest = () => {
       </TestCase>
       <TestCase
         itShould="export TouchableNativeFeedback (Android only)"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(TouchableNativeFeedback).to.be.not.undefined;
         }}
       />
@@ -53,23 +53,23 @@ export const TouchablesTest = () => {
       <TestCase
         itShould="handle presses on empty views"
         initialState={false}
-        arrange={({setState}) => {
+        arrange={({ setState }) => {
           return (
-            <View style={{height: 100, backgroundColor: 'red'}}>
+            <View style={{ height: 100, backgroundColor: 'red' }}>
               <TouchableWithoutFeedback onPress={() => setState(true)}>
-                <View style={{height: '100%', width: '100%'}} />
+                <View style={{ height: '100%', width: '100%' }} />
               </TouchableWithoutFeedback>
             </View>
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.true;
         }}
       />
       <TestCase
         itShould="pass when blue background is pressed"
         initialState={false}
-        arrange={({setState}) => (
+        arrange={({ setState }) => (
           <View
             style={{
               backgroundColor: 'blue',
@@ -77,11 +77,11 @@ export const TouchablesTest = () => {
               position: 'relative',
             }}>
             <TouchableWithoutFeedback
-              hitSlop={{top: 48, left: 48, bottom: 48, right: 48}}
+              hitSlop={{ top: 48, left: 48, bottom: 48, right: 48 }}
               onPress={() => {
                 setState(true);
               }}>
-              <View style={{width: 48, height: 48, margin: 48}} />
+              <View style={{ width: 48, height: 48, margin: 48 }} />
             </TouchableWithoutFeedback>
             <View
               style={{
@@ -98,7 +98,7 @@ export const TouchablesTest = () => {
             />
           </View>
         )}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.true;
         }}
       />
@@ -115,10 +115,10 @@ function TouchableWithoutFeedbackDemo() {
   );
 }
 
-function PressMe(props: ViewProps & {endLabel?: string | number}) {
+function PressMe(props: ViewProps & { endLabel?: string | number }) {
   return (
-    <View {...props} style={{padding: 16, borderWidth: 1}}>
-      <Text style={{color: 'blue', height: 24, width: '100%'}}>
+    <View {...props} style={{ padding: 16, borderWidth: 1 }}>
+      <Text style={{ color: 'blue', height: 24, width: '100%' }}>
         Press me{props.endLabel !== undefined ? ` (${props.endLabel})` : ''}
       </Text>
     </View>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/TransformTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/TransformTest.tsx
index 4fd70a8d9df36e7d936d1ced2ccd49032c1c2dec..5bedd25cbeafa872c71990fb1d0af3fafdd1dbaf 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/TransformTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/TransformTest.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {StyleSheet, Text, View} from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import { TestSuite, TestCase } from '@rnoh/testerino';
 
 export function TransformTest() {
@@ -20,7 +20,7 @@ export function TransformTest() {
             style={[
               styles.box,
               {
-                transform: [{scale: 2}],
+                transform: [{ scale: 2 }],
               },
             ]}>
             <Text style={styles.text}>Scale by 2</Text>
@@ -29,7 +29,7 @@ export function TransformTest() {
             style={[
               styles.box,
               {
-                transform: [{scaleX: 2}],
+                transform: [{ scaleX: 2 }],
               },
             ]}>
             <Text style={styles.text}>ScaleX by 2</Text>
@@ -38,7 +38,7 @@ export function TransformTest() {
             style={[
               styles.box,
               {
-                transform: [{scaleY: 2}],
+                transform: [{ scaleY: 2 }],
               },
             ]}>
             <Text style={styles.text}>ScaleY by 2</Text>
@@ -54,7 +54,7 @@ export function TransformTest() {
             style={[
               styles.box,
               {
-                transform: [{rotate: '45deg'}],
+                transform: [{ rotate: '45deg' }],
               },
             ]}>
             <Text style={styles.text}>Rotate by 45 deg</Text>
@@ -64,7 +64,7 @@ export function TransformTest() {
             style={[
               styles.box,
               {
-                transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
+                transform: [{ rotateX: '45deg' }, { rotateZ: '45deg' }],
               },
             ]}>
             <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
@@ -74,7 +74,7 @@ export function TransformTest() {
             style={[
               styles.box,
               {
-                transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
+                transform: [{ rotateY: '45deg' }, { rotateZ: '45deg' }],
               },
             ]}>
             <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
@@ -90,7 +90,7 @@ export function TransformTest() {
             style={[
               styles.box,
               {
-                transform: [{skewX: '45deg'}],
+                transform: [{ skewX: '45deg' }],
               },
             ]}>
             <Text style={styles.text}>SkewX by 45 deg</Text>
@@ -100,7 +100,7 @@ export function TransformTest() {
             style={[
               styles.box,
               {
-                transform: [{skewY: '45deg'}],
+                transform: [{ skewY: '45deg' }],
               },
             ]}>
             <Text style={styles.text}>SkewY by 45 deg</Text>
@@ -109,7 +109,7 @@ export function TransformTest() {
             style={[
               styles.box,
               {
-                transform: [{skewX: '30deg'}, {skewY: '30deg'}],
+                transform: [{ skewX: '30deg' }, { skewY: '30deg' }],
               },
             ]}>
             <Text style={styles.text}>Skew X&Y by 30 deg</Text>
@@ -125,7 +125,7 @@ export function TransformTest() {
             style={[
               styles.box,
               {
-                transform: [{translateX: -20}],
+                transform: [{ translateX: -20 }],
               },
             ]}>
             <Text style={styles.text}>TranslateX by -20 </Text>
@@ -135,7 +135,7 @@ export function TransformTest() {
             style={[
               styles.box,
               {
-                transform: [{translateY: 20}],
+                transform: [{ translateY: 20 }],
               },
             ]}>
             <Text style={styles.text}>TranslateY by 20 </Text>
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/UIManagerTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/UIManagerTest.tsx
index 29b0a69f8b538b2ae34672055f7ebc29996d2266..30fa7cea51ab893225003b5654bc111cdf99b083 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/UIManagerTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/UIManagerTest.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useRef} from 'react';
+import React, { useRef } from 'react';
 import {
   View,
   StyleSheet,
@@ -15,7 +15,7 @@ import {
   findNodeHandle,
 } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {Effect, Ref, Button} from '../components';
+import { Effect, Ref, Button } from '../components';
 
 export function UIManagerTest() {
   return (
@@ -23,10 +23,10 @@ export function UIManagerTest() {
       <TestCase
         itShould="not round text measurement to integers"
         initialState={{
-          view: {width: 0, height: 0},
-          text: {width: 0, height: 0},
+          view: { width: 0, height: 0 },
+          text: { width: 0, height: 0 },
         }}
-        arrange={({setState}) => {
+        arrange={({ setState }) => {
           return (
             <Ref<View>
               render={refView => {
@@ -41,7 +41,7 @@ export function UIManagerTest() {
                                 (x, y, width, height, _left, _top) => {
                                   setState(prev => ({
                                     ...prev,
-                                    text: {width, height},
+                                    text: { width, height },
                                   }));
                                 },
                               );
@@ -49,7 +49,7 @@ export function UIManagerTest() {
                                 (x, y, width, height, _left, _top) => {
                                   setState(prev => ({
                                     ...prev,
-                                    view: {width, height},
+                                    view: { width, height },
                                   }));
                                 },
                               );
@@ -87,7 +87,7 @@ export function UIManagerTest() {
             />
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state.view.width).to.be.closeTo(16.5, 0.4);
           expect(state.view.width).not.to.be.eq(16);
           expect(state.view.width).not.to.be.eq(17);
@@ -104,19 +104,19 @@ export function UIManagerTest() {
       </TestCase>
       <TestCase
         itShould="return view manager config"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(UIManager.getViewManagerConfig('RCTView')).to.be.an('object');
         }}
       />
       <TestCase
         itShould="not return view manager config for non-existing view"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(UIManager.getViewManagerConfig('RCTNotAView')).to.be.null;
         }}
       />
       <TestCase
         itShould="check if view manager config exists"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(UIManager.hasViewManagerConfig('RCTView')).to.be.true;
           expect(UIManager.hasViewManagerConfig('RCTNotAView')).to.be.false;
         }}
@@ -124,10 +124,10 @@ export function UIManagerTest() {
       <TestCase
         itShould="measure the view with respect to the window"
         initialState={
-          {} as {x: number; y: number; width: number; height: number}
+          {} as { x: number; y: number; width: number; height: number }
         }
-        arrange={({setState}) => <MeasureInWindowTest setState={setState} />}
-        assert={({state, expect}) => {
+        arrange={({ setState }) => <MeasureInWindowTest setState={setState} />}
+        assert={({ state, expect }) => {
           expect(state.width).to.be.equal(20);
           expect(state.height).to.be.equal(20);
           expect(state.x).to.be.greaterThan(10);
@@ -137,10 +137,10 @@ export function UIManagerTest() {
       <TestCase
         itShould="measure the view with respect to the parent"
         initialState={
-          {} as {x: number; y: number; width: number; height: number}
+          {} as { x: number; y: number; width: number; height: number }
         }
-        arrange={({setState}) => <MeasureLayoutTest setState={setState} />}
-        assert={({state, expect}) => {
+        arrange={({ setState }) => <MeasureLayoutTest setState={setState} />}
+        assert={({ state, expect }) => {
           expect(state.width).to.be.equal(20);
           expect(state.height).to.be.equal(20);
           expect(state.x).to.be.equal(10);
@@ -152,7 +152,7 @@ export function UIManagerTest() {
 }
 const MeasureLayoutTest = (props: {
   setState: React.Dispatch<
-    React.SetStateAction<{x: number; y: number; width: number; height: number}>
+    React.SetStateAction<{ x: number; y: number; width: number; height: number }>
   >;
 }) => {
   const ref = useRef<View>(null);
@@ -184,10 +184,10 @@ const MeasureLayoutTest = (props: {
             ref.current?.measureLayout(
               containerRef.current,
               (x, y, width, height) => {
-                props.setState({x: x, y: y, width: width, height: height});
+                props.setState({ x: x, y: y, width: width, height: height });
               },
               () => {
-                props.setState({x: -1, y: -1, width: -1, height: -1});
+                props.setState({ x: -1, y: -1, width: -1, height: -1 });
               },
             );
           }
@@ -199,7 +199,7 @@ const MeasureLayoutTest = (props: {
 
 const MeasureInWindowTest = (props: {
   setState: React.Dispatch<
-    React.SetStateAction<{x: number; y: number; width: number; height: number}>
+    React.SetStateAction<{ x: number; y: number; width: number; height: number }>
   >;
 }) => {
   const ref = useRef<View>(null);
@@ -217,7 +217,7 @@ const MeasureInWindowTest = (props: {
         label="measureInWindow"
         onPress={() => {
           ref.current?.measureInWindow((x, y, width, height) => {
-            props.setState({x: x, y: y, width: width, height: height});
+            props.setState({ x: x, y: y, width: width, height: height });
           });
         }}
       />
@@ -230,9 +230,9 @@ function DispatchCommandTest() {
 
   return (
     <View>
-      <ScrollView ref={ref} style={{height: 100}}>
-        <View style={[styles.box, {backgroundColor: 'red'}]} />
-        <View style={[styles.box, {backgroundColor: 'blue'}]} />
+      <ScrollView ref={ref} style={{ height: 100 }}>
+        <View style={[styles.box, { backgroundColor: 'red' }]} />
+        <View style={[styles.box, { backgroundColor: 'blue' }]} />
       </ScrollView>
       <Button
         label="scroll to bottom"
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/UseColorSchemeTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/UseColorSchemeTest.tsx
index a9866719c4536ec8116ef856b4e86b844a8eaf71..4df2d440cfc8ab3402f09f8bb199d3a9c30d6448 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/UseColorSchemeTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/UseColorSchemeTest.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {Appearance, useColorScheme} from 'react-native';
+import { Appearance, useColorScheme } from 'react-native';
 import { TestSuite, TestCase } from '@rnoh/testerino';
 
 export function UseColorSchemeTest() {
@@ -16,13 +16,13 @@ export function UseColorSchemeTest() {
     <TestSuite name="useColorScheme">
       <TestCase
         itShould="return sensible value"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(colorScheme).to.oneOf(['light', 'dark', null]);
         }}
       />
       <TestCase
         itShould="return equal value to Appearance.getColorScheme"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(colorScheme).to.be.equal(colorSchemeFromAppearance);
         }}
       />
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/UseWindowDimensionsTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/UseWindowDimensionsTest.tsx
index 04d3b813c15f5ddb35ca69ca41624d1bdb3dac4f..0d3727efa431208cd6e9f9c3b6589449fc9534da 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/UseWindowDimensionsTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/UseWindowDimensionsTest.tsx
@@ -5,35 +5,35 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {useWindowDimensions} from 'react-native';
+import { useWindowDimensions } from 'react-native';
 import { TestSuite, TestCase } from '@rnoh/testerino';
 
 export function UseWindowDimensionsTest() {
-  const {height, width, scale, fontScale} = useWindowDimensions();
+  const { height, width, scale, fontScale } = useWindowDimensions();
 
   return (
     <TestSuite name="useWindowDimensions">
       <TestCase
         itShould="return plausible width (greater than 0)"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(width).to.be.greaterThan(0);
         }}
       />
       <TestCase
         itShould="return plausible height (greater than 0)"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(height).to.be.greaterThan(0);
         }}
       />
       <TestCase
         itShould="return plausible scale (greater than 0)"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(scale).to.be.greaterThan(0);
         }}
       />
       <TestCase
         itShould="return plausible fontScale (greater than 0)"
-        fn={({expect}) => {
+        fn={({ expect }) => {
           expect(fontScale).to.be.greaterThan(0);
         }}
       />
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/VibrationTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/VibrationTest.tsx
index 07b605c6d43db34fac85df59c07dcba95432e1c6..d7957ab5ea8120026ffd549a56099cf65423f70b 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/VibrationTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/VibrationTest.tsx
@@ -6,9 +6,9 @@
  */
 
 import React from 'react';
-import {Vibration} from 'react-native';
+import { Vibration } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {Button} from '../components';
+import { Button } from '../components';
 
 export const VibrationTest = () => {
   const ONE_SECOND_IN_MS = 1000;
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/ViewTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/ViewTest.tsx
index c9ce0b164c6c1f69ff1f44d4d4df6db4d170bbf3..e7a12d4555f76fdca15c6257203ec1f6973006a2 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/ViewTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/ViewTest.tsx
@@ -13,8 +13,8 @@ import {
   View,
 } from 'react-native';
 import { TestSuite, TestCase } from '@rnoh/testerino';
-import React, {useState} from 'react';
-import {Button} from '../components';
+import React, { useState } from 'react';
+import { Button } from '../components';
 
 export function ViewTest() {
   return (
@@ -24,11 +24,11 @@ export function ViewTest() {
         itShould="log the descriptor on the native side when 'debug' hint is provided">
         <View
           id="__harmony::debug:sampleNativeId"
-          style={{width: 64, height: 64, backgroundColor: 'red'}}
+          style={{ width: 64, height: 64, backgroundColor: 'red' }}
         />
       </TestCase>
       <TestCase itShould="render square with transparent background on gray background">
-        <View style={{width: '100%', height: 100, backgroundColor: 'gray'}}>
+        <View style={{ width: '100%', height: 100, backgroundColor: 'gray' }}>
           <View
             style={{
               width: 100,
@@ -40,7 +40,7 @@ export function ViewTest() {
         </View>
       </TestCase>
       <TestCase itShould="render square with rounded corners with different radii (left/right)">
-        <View style={{width: '100%', height: 100, backgroundColor: 'gray'}}>
+        <View style={{ width: '100%', height: 100, backgroundColor: 'gray' }}>
           <View
             style={{
               width: 100,
@@ -56,7 +56,7 @@ export function ViewTest() {
         </View>
       </TestCase>
       <TestCase itShould="render square with rounded corners with different radii (start/end)">
-        <View style={{width: '100%', height: 100, backgroundColor: 'gray'}}>
+        <View style={{ width: '100%', height: 100, backgroundColor: 'gray' }}>
           <View
             style={{
               width: 100,
@@ -73,16 +73,16 @@ export function ViewTest() {
       </TestCase>
       <TestCase itShould="render squares with borderTopStartRadius and borderTopEndRadius">
         <View style={styles.squaresContainer}>
-          <View style={[styles.square, {borderTopStartRadius: 24}]}>
+          <View style={[styles.square, { borderTopStartRadius: 24 }]}>
             <Text style={styles.squareContent}>borderTopStartRadius</Text>
           </View>
-          <View style={[styles.square, {borderTopEndRadius: 24}]}>
+          <View style={[styles.square, { borderTopEndRadius: 24 }]}>
             <Text style={styles.squareContent}>borderTopEndRadius</Text>
           </View>
           <View
             style={[
               styles.square,
-              {borderTopEndRadius: 24, borderTopStartRadius: 20},
+              { borderTopEndRadius: 24, borderTopStartRadius: 20 },
             ]}>
             <Text style={styles.squareContent}>
               borderTopEndRadius + borderTopStartRadius
@@ -92,16 +92,16 @@ export function ViewTest() {
       </TestCase>
       <TestCase itShould="render squares with borderBottomStartRadius + borderBottomEndRadius">
         <View style={styles.squaresContainer}>
-          <View style={[styles.square, {borderBottomStartRadius: 24}]}>
+          <View style={[styles.square, { borderBottomStartRadius: 24 }]}>
             <Text style={styles.squareContent}>borderBottomStartRadius</Text>
           </View>
-          <View style={[styles.square, {borderBottomEndRadius: 24}]}>
+          <View style={[styles.square, { borderBottomEndRadius: 24 }]}>
             <Text style={styles.squareContent}>borderBottomEndRadius</Text>
           </View>
           <View
             style={[
               styles.square,
-              {borderBottomEndRadius: 24, borderBottomStartRadius: 24},
+              { borderBottomEndRadius: 24, borderBottomStartRadius: 24 },
             ]}>
             <Text style={styles.squareContent}>
               borderBottomStartRadius + borderBottomEndRadius
@@ -111,7 +111,7 @@ export function ViewTest() {
       </TestCase>
       <TestCase itShould="render circles">
         <View style={styles.squaresContainer}>
-          <View style={[styles.square, {borderRadius: 50}]} />
+          <View style={[styles.square, { borderRadius: 50 }]} />
           <View
             style={[
               styles.square,
@@ -137,7 +137,7 @@ export function ViewTest() {
         </View>
       </TestCase>
       <TestCase itShould="render square with borders with different widths">
-        <View style={{width: '100%', height: 100, backgroundColor: 'gray'}}>
+        <View style={{ width: '100%', height: 100, backgroundColor: 'gray' }}>
           <View
             style={{
               width: 100,
@@ -152,7 +152,7 @@ export function ViewTest() {
         </View>
       </TestCase>
       <TestCase itShould="render rectangle with borders with different widths and colors">
-        <View style={{width: '100%', height: 100, backgroundColor: 'gray'}}>
+        <View style={{ width: '100%', height: 100, backgroundColor: 'gray' }}>
           <View
             style={{
               height: 80,
@@ -170,7 +170,7 @@ export function ViewTest() {
         </View>
       </TestCase>
       <TestCase itShould="render square with borders with different colors">
-        <View style={{width: '100%', height: 100, backgroundColor: 'gray'}}>
+        <View style={{ width: '100%', height: 100, backgroundColor: 'gray' }}>
           <View
             style={{
               width: 100,
@@ -185,7 +185,7 @@ export function ViewTest() {
         </View>
       </TestCase>
       <TestCase itShould="render square with borders with different start/end colors">
-        <View style={{width: '100%', height: 100, backgroundColor: 'gray'}}>
+        <View style={{ width: '100%', height: 100, backgroundColor: 'gray' }}>
           <View
             style={{
               width: 100,
@@ -298,9 +298,9 @@ export function ViewTest() {
       <TestCase
         itShould="render square with elevation"
         skip
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/238
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/238
       >
-        <View style={{width: '100%', height: 100}}>
+        <View style={{ width: '100%', height: 100 }}>
           <View
             style={{
               width: 80,
@@ -315,7 +315,7 @@ export function ViewTest() {
       <TestCase
         skip
         itShould="show inner rectangle with the same color as the reference (needsOffscreenAlphaCompositing)"
-        //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/322
+      //https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/322
       >
         <View
           style={{
@@ -334,7 +334,7 @@ export function ViewTest() {
             }}
           />
         </View>
-        <Text style={{height: 20}}>
+        <Text style={{ height: 20 }}>
           Reference black color with opacity: 0.5
         </Text>
         <View
@@ -349,8 +349,8 @@ export function ViewTest() {
       <TestSuite name="pointerEvents">
         <TestCase
           itShould="call inner and outer view when pressing inner"
-          initialState={{inner: false, outer: false, outerContainer: false}}
-          arrange={({setState, reset}) => {
+          initialState={{ inner: false, outer: false, outerContainer: false }}
+          arrange={({ setState, reset }) => {
             return (
               <PointerEventsView
                 pointerEventsOuter="auto"
@@ -359,7 +359,7 @@ export function ViewTest() {
               />
             );
           }}
-          assert={({expect, state}) => {
+          assert={({ expect, state }) => {
             expect(state).to.be.deep.eq({
               inner: true,
               outer: true,
@@ -369,8 +369,8 @@ export function ViewTest() {
         />
         <TestCase
           itShould="call only outer when pressing inner view"
-          initialState={{inner: false, outer: false, outerContainer: true}}
-          arrange={({setState, reset}) => {
+          initialState={{ inner: false, outer: false, outerContainer: true }}
+          arrange={({ setState, reset }) => {
             return (
               <PointerEventsView
                 pointerEventsOuter="box-only"
@@ -379,7 +379,7 @@ export function ViewTest() {
               />
             );
           }}
-          assert={({expect, state}) => {
+          assert={({ expect, state }) => {
             expect(state).to.be.deep.eq({
               inner: false,
               outer: true,
@@ -389,8 +389,8 @@ export function ViewTest() {
         />
         <TestCase
           itShould="call inner and outer only when pressing inner view"
-          initialState={{inner: false, outer: false, outerContainer: false}}
-          arrange={({setState, reset}) => {
+          initialState={{ inner: false, outer: false, outerContainer: false }}
+          arrange={({ setState, reset }) => {
             return (
               <PointerEventsView
                 disableOuterContainerTouch
@@ -400,15 +400,15 @@ export function ViewTest() {
               />
             );
           }}
-          assert={({expect, state}) => {
+          assert={({ expect, state }) => {
             expect(state.inner).to.be.true;
             expect(state.outer).to.be.true;
           }}
         />
         <TestCase
           itShould="not call inner or outer when pressing inner or outer views"
-          initialState={{inner: false, outer: false, outerContainer: false}}
-          arrange={({setState, reset}) => {
+          initialState={{ inner: false, outer: false, outerContainer: false }}
+          arrange={({ setState, reset }) => {
             return (
               <PointerEventsView
                 pointerEventsOuter="none"
@@ -417,7 +417,7 @@ export function ViewTest() {
               />
             );
           }}
-          assert={({expect, state}) => {
+          assert={({ expect, state }) => {
             expect(state).to.be.deep.eq({
               inner: false,
               outer: false,
@@ -429,10 +429,10 @@ export function ViewTest() {
       <TestCase
         itShould="pass on touching blue background"
         initialState={false}
-        arrange={({setState}) => (
-          <View style={{backgroundColor: 'blue', alignSelf: 'center'}}>
+        arrange={({ setState }) => (
+          <View style={{ backgroundColor: 'blue', alignSelf: 'center' }}>
             <View
-              hitSlop={{top: 48, left: 48, bottom: 48, right: 48}}
+              hitSlop={{ top: 48, left: 48, bottom: 48, right: 48 }}
               style={{
                 width: 48,
                 height: 48,
@@ -443,7 +443,7 @@ export function ViewTest() {
                 setState(true);
               }}>
               <View
-                style={{width: 48, height: 48, backgroundColor: 'red'}}
+                style={{ width: 48, height: 48, backgroundColor: 'red' }}
                 onTouchEnd={e => {
                   e.stopPropagation();
                 }}
@@ -451,18 +451,18 @@ export function ViewTest() {
             </View>
           </View>
         )}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.true;
         }}
       />
       <TestCase
         itShould="blue view should not allow clicks with non-touch input device"
         modal
-        initialState={{first: false, second: false, third: false}}
-        arrange={({setState}) => (
-          <View style={{width: '100%', height: 100, flexDirection: 'row'}}>
+        initialState={{ first: false, second: false, third: false }}
+        arrange={({ setState }) => (
+          <View style={{ width: '100%', height: 100, flexDirection: 'row' }}>
             <TouchableWithoutFeedback
-              onPress={() => setState(prev => ({...prev, first: true}))}>
+              onPress={() => setState(prev => ({ ...prev, first: true }))}>
               <View
                 style={{
                   width: 76,
@@ -473,7 +473,7 @@ export function ViewTest() {
               />
             </TouchableWithoutFeedback>
             <TouchableWithoutFeedback
-              onPress={() => setState(prev => ({...prev, second: true}))}>
+              onPress={() => setState(prev => ({ ...prev, second: true }))}>
               <View
                 style={{
                   width: 76,
@@ -486,7 +486,7 @@ export function ViewTest() {
               />
             </TouchableWithoutFeedback>
             <TouchableWithoutFeedback
-              onPress={() => setState(prev => ({...prev, third: true}))}>
+              onPress={() => setState(prev => ({ ...prev, third: true }))}>
               <View
                 style={{
                   width: 76,
@@ -498,7 +498,7 @@ export function ViewTest() {
             </TouchableWithoutFeedback>
           </View>
         )}
-        assert={({state, expect}) => {
+        assert={({ state, expect }) => {
           expect(state).to.be.deep.eq({
             first: true,
             second: false,
@@ -507,7 +507,7 @@ export function ViewTest() {
         }}
       />
       <TestCase itShould="render view with fixed width and aspectRatio 1">
-        <View style={{width: '100%', height: 100}}>
+        <View style={{ width: '100%', height: 100 }}>
           <View
             style={{
               width: 100,
@@ -518,7 +518,7 @@ export function ViewTest() {
         </View>
       </TestCase>
       <TestCase itShould="render views with set flex and aspectRatio 1">
-        <View style={{width: '100%', height: 100}}>
+        <View style={{ width: '100%', height: 100 }}>
           <View
             style={{
               width: 100,
@@ -538,28 +538,28 @@ export function ViewTest() {
         </View>
       </TestCase>
       <TestCase itShould="show view rotated by 180deg(backfaceVisibility: visible)">
-        <View style={{width: '100%', height: 20}}>
+        <View style={{ width: '100%', height: 20 }}>
           <View
             style={{
               width: 100,
               backgroundColor: 'blue',
-              transform: [{rotateY: '180deg'}],
+              transform: [{ rotateY: '180deg' }],
               backfaceVisibility: 'visible',
             }}>
-            <Text style={{height: 20}}>Backface</Text>
+            <Text style={{ height: 20 }}>Backface</Text>
           </View>
         </View>
       </TestCase>
       <TestCase itShould="not show view rotated by 180deg(backfaceVisibility: hidden)">
-        <View style={{width: '100%', height: 20}}>
+        <View style={{ width: '100%', height: 20 }}>
           <View
             style={{
               width: 100,
               backgroundColor: 'blue',
-              transform: [{rotateY: '180deg'}],
+              transform: [{ rotateY: '180deg' }],
               backfaceVisibility: 'hidden',
             }}>
-            <Text style={{height: 20}}>Backface</Text>
+            <Text style={{ height: 20 }}>Backface</Text>
           </View>
         </View>
       </TestCase>
@@ -571,7 +571,7 @@ export function ViewTest() {
             margin: 8,
             backgroundColor: 'green',
             shadowColor: 'blue',
-            shadowOffset: {width: 16, height: 16},
+            shadowOffset: { width: 16, height: 16 },
             shadowOpacity: 0.25,
             shadowRadius: 16,
           }}
@@ -596,7 +596,7 @@ export function ViewTest() {
           responderGrantedCount: 0,
           childResponderGrantedCount: 0,
         }}
-        arrange={({setState}) => {
+        arrange={({ setState }) => {
           return (
             <View
               onStartShouldSetResponder={() => true}
@@ -617,7 +617,7 @@ export function ViewTest() {
                 padding: 20,
               }}>
               <View
-                style={{backgroundColor: 'blue', width: 64, height: 64}}
+                style={{ backgroundColor: 'blue', width: 64, height: 64 }}
                 onResponderTerminationRequest={() => false}
                 onStartShouldSetResponder={() => true}
                 onResponderGrant={() => {
@@ -631,7 +631,7 @@ export function ViewTest() {
             </View>
           );
         }}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state.responderRejectedCount).to.be.greaterThan(0);
         }}
       />
@@ -640,10 +640,10 @@ export function ViewTest() {
         itShould='call the "escape" gesture handler'
         initialState={false}
         skip // https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/602
-        arrange={({setState}) => (
+        arrange={({ setState }) => (
           <View
             accessible={true}
-            style={{width: '100%', height: 100, backgroundColor: 'gray'}}
+            style={{ width: '100%', height: 100, backgroundColor: 'gray' }}
             onAccessibilityEscape={() => {
               console.log('onAccessibilityEscape called!');
               setState(true);
@@ -657,7 +657,7 @@ export function ViewTest() {
             />
           </View>
         )}
-        assert={({expect, state}) => {
+        assert={({ expect, state }) => {
           expect(state).to.be.true;
         }}
       />
@@ -666,12 +666,12 @@ export function ViewTest() {
         itShould='render "First Layout" view and ignore "Ignored Layout" when accessibility is true'>
         <View accessible={true} style={styles.accessibilityContainer}>
           <View
-            style={[styles.accessibilityLayout, {backgroundColor: 'green'}]}
+            style={[styles.accessibilityLayout, { backgroundColor: 'green' }]}
             importantForAccessibility="yes">
             <Text>First layout</Text>
           </View>
           <View
-            style={[styles.accessibilityLayout, {backgroundColor: 'yellow'}]}
+            style={[styles.accessibilityLayout, { backgroundColor: 'yellow' }]}
             importantForAccessibility="no-hide-descendants">
             <Text>Ignored Layout</Text>
           </View>
@@ -684,7 +684,7 @@ export function ViewTest() {
         <View
           accessible={true}
           aria-valuemax={1000}
-          style={[styles.accessibilityLayout, {backgroundColor: 'green'}]}>
+          style={[styles.accessibilityLayout, { backgroundColor: 'green' }]}>
           <Text>aria-valuemax: 100</Text>
         </View>
       </TestCase>
@@ -695,7 +695,7 @@ export function ViewTest() {
         <View
           accessible={true}
           aria-valuemin={10}
-          style={[styles.accessibilityLayout, {backgroundColor: 'green'}]}>
+          style={[styles.accessibilityLayout, { backgroundColor: 'green' }]}>
           <Text>aria-valuemin: 10</Text>
         </View>
       </TestCase>
@@ -706,7 +706,7 @@ export function ViewTest() {
         <View
           accessible={true}
           aria-valuenow={55}
-          style={[styles.accessibilityLayout, {backgroundColor: 'green'}]}>
+          style={[styles.accessibilityLayout, { backgroundColor: 'green' }]}>
           <Text>aria-valuemin: 55</Text>
         </View>
       </TestCase>
@@ -717,7 +717,7 @@ export function ViewTest() {
         <View
           accessible={true}
           aria-valuetext={'Test Text'}
-          style={[styles.accessibilityLayout, {backgroundColor: 'green'}]}>
+          style={[styles.accessibilityLayout, { backgroundColor: 'green' }]}>
           <Text>aria-valuemin: Test Text</Text>
         </View>
       </TestCase>
@@ -733,7 +733,7 @@ export function ViewTest() {
         <View
           accessible={true}
           accessibilityLabel="This view has a red background and no text"
-          style={[styles.accessibilityLayout, {backgroundColor: 'red'}]}
+          style={[styles.accessibilityLayout, { backgroundColor: 'red' }]}
         />
       </TestCase>
       <TestCase
@@ -742,7 +742,7 @@ export function ViewTest() {
         <View
           accessible={true}
           aria-label="This view has a red background and no text"
-          style={[styles.accessibilityLayout, {backgroundColor: 'red'}]}
+          style={[styles.accessibilityLayout, { backgroundColor: 'red' }]}
         />
       </TestCase>
       <TestCase
@@ -769,12 +769,12 @@ export function ViewTest() {
       <TestCase modal itShould="make the screen reader hide 'Hidden layout'">
         <View accessible={true} style={styles.accessibilityContainer}>
           <View
-            style={[styles.accessibilityLayout, {backgroundColor: 'green'}]}
+            style={[styles.accessibilityLayout, { backgroundColor: 'green' }]}
             importantForAccessibility="yes">
             <Text>First layout</Text>
           </View>
           <View
-            style={[styles.accessibilityLayout, {backgroundColor: 'yellow'}]}
+            style={[styles.accessibilityLayout, { backgroundColor: 'yellow' }]}
             aria-hidden={true}>
             <Text>Hidden Layout</Text>
           </View>
@@ -786,11 +786,11 @@ export function ViewTest() {
         itShould="make the screen reader hide 'Hidden layout' accessibilityHidden">
         <View accessible={true} style={styles.accessibilityContainer}>
           <View
-            style={[styles.accessibilityLayout, {backgroundColor: 'green'}]}>
+            style={[styles.accessibilityLayout, { backgroundColor: 'green' }]}>
             <Text>First layout</Text>
           </View>
           <View
-            style={[styles.accessibilityLayout, {backgroundColor: 'yellow'}]}
+            style={[styles.accessibilityLayout, { backgroundColor: 'yellow' }]}
             accessibilityElementsHidden={true}>
             <Text>Hidden Layout</Text>
           </View>
@@ -803,7 +803,7 @@ export function ViewTest() {
           accessible={true}
           aria-label="This view has a red background"
           accessibilityHint="Hint: and no text"
-          style={[styles.accessibilityLayout, {backgroundColor: 'red'}]}
+          style={[styles.accessibilityLayout, { backgroundColor: 'red' }]}
         />
       </TestCase>
     </TestSuite>
@@ -824,21 +824,21 @@ function PointerEventsView(props: {
   reset: () => void;
 }) {
   return (
-    <View style={{height: 100, width: '100%', flexDirection: 'row'}}>
+    <View style={{ height: 100, width: '100%', flexDirection: 'row' }}>
       <View
-        style={{backgroundColor: 'green'}}
+        style={{ backgroundColor: 'green' }}
         onTouchEnd={
           props.disableOuterContainerTouch
             ? undefined
             : () => {
-                props.setState(prev => ({...prev, outerContainer: true}));
-              }
+              props.setState(prev => ({ ...prev, outerContainer: true }));
+            }
         }>
         <View
-          style={{height: 100, width: 100, backgroundColor: 'red'}}
+          style={{ height: 100, width: 100, backgroundColor: 'red' }}
           pointerEvents={props.pointerEventsOuter}
           onTouchEnd={() => {
-            props.setState(prev => ({...prev, outer: true}));
+            props.setState(prev => ({ ...prev, outer: true }));
           }}>
           <View
             style={{
@@ -848,7 +848,7 @@ function PointerEventsView(props: {
               margin: 30,
             }}
             onTouchEnd={() => {
-              props.setState(prev => ({...prev, inner: true}));
+              props.setState(prev => ({ ...prev, inner: true }));
             }}
             pointerEvents={props.pointerEventsInner}
           />
@@ -871,10 +871,10 @@ function SelectedView({
   return (
     <View
       aria-selected={selectedId === itemId}
-      accessibilityState={{selected: selectedId === itemId}}
-      style={[styles.accessibilityLayout, {borderBottomWidth: 2}]}>
+      accessibilityState={{ selected: selectedId === itemId }}
+      style={[styles.accessibilityLayout, { borderBottomWidth: 2 }]}>
       <Text
-        style={{width: '100%', height: '100%'}}
+        style={{ width: '100%', height: '100%' }}
         onPress={() => setSelectedId(itemId)}>
         aria-selected {String(selectedId === itemId)}
       </Text>
@@ -887,7 +887,7 @@ function ViewAccessibilityAriaSelected() {
 
   return (
     <View accessible={true} style={styles.accessibilityContainer}>
-      {Array.from({length: 5}, (_, index) => index + 1).map(id => (
+      {Array.from({ length: 5 }, (_, index) => index + 1).map(id => (
         <SelectedView
           key={id}
           itemId={id}
@@ -910,9 +910,9 @@ function ViewAccessibilityAriaChecked() {
     <View
       accessible={true}
       aria-checked={checked ? true : mixed ? 'mixed' : false}
-      style={[styles.accessibilityLayout, {height: 200}]}
+      style={[styles.accessibilityLayout, { height: 200 }]}
       accessibilityRole="checkbox"
-      accessibilityState={{checked}}>
+      accessibilityState={{ checked }}>
       <Button
         label={`First Element is ${firstChecked ? 'checked' : 'unchecked'}`}
         onPress={() => setFirstChecked(!firstChecked)}
diff --git a/docs/Samples/Sample/SampleProject/MainProject/tests/VirtualizedListTest.tsx b/docs/Samples/Sample/SampleProject/MainProject/tests/VirtualizedListTest.tsx
index a7fd52a71ec07e42aabbf125c61ef28cb97aabfc..f47d762e2b8f65059c2010deb5fdd4d231d5bd8b 100644
--- a/docs/Samples/Sample/SampleProject/MainProject/tests/VirtualizedListTest.tsx
+++ b/docs/Samples/Sample/SampleProject/MainProject/tests/VirtualizedListTest.tsx
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import React, {useRef, useState} from 'react';
+import React, { useRef, useState } from 'react';
 import {
   RefreshControl,
   Text,
@@ -15,7 +15,7 @@ import {
   VirtualizedList,
 } from 'react-native';
 import { TestCase, TestSuite } from '@rnoh/testerino';
-import {Button} from '../components';
+import { Button } from '../components';
 
 type OnScrollToIndexFailed = {
   index: number;
@@ -35,15 +35,15 @@ const getItem = (_data: unknown, index: number): ItemData => ({
 
 const getItemCountVirtualized = (_data: unknown): number => 50;
 
-const Item = ({title}: {title: string}) => (
-  <View style={{height: 48, padding: 16, borderWidth: 1}}>
-    <Text style={{width: '100%', height: 24}}>{title}</Text>
+const Item = ({ title }: { title: string }) => (
+  <View style={{ height: 48, padding: 16, borderWidth: 1 }}>
+    <Text style={{ width: '100%', height: 24 }}>{title}</Text>
   </View>
 );
 
-const HorizontalItem = ({title}: {title: string}) => (
-  <View style={{borderWidth: 1, width: 48, height: '100%'}}>
-    <Text style={{width: '100%', height: '100%'}}>{title}</Text>
+const HorizontalItem = ({ title }: { title: string }) => (
+  <View style={{ borderWidth: 1, width: 48, height: '100%' }}>
+    <Text style={{ width: '100%', height: '100%' }}>{title}</Text>
   </View>
 );
 
@@ -52,13 +52,13 @@ export function VirtualizedListTest() {
     <TestSuite name="VirtualizedList">
       <TestCase itShould="display list of 3 items">
         <VirtualizedList<number[]>
-          style={{height: 64}}
+          style={{ height: 64 }}
           data={[1, 2, 3]}
           getItem={(data, idx) => data[idx]}
           getItemCount={() => 3}
-          renderItem={({item}) => (
-            <View style={{height: 48, padding: 16}}>
-              <Text style={{width: '100%', height: 24}}>{item}</Text>
+          renderItem={({ item }) => (
+            <View style={{ height: 48, padding: 16 }}>
+              <Text style={{ width: '100%', height: 24 }}>{item}</Text>
             </View>
           )}
           keyExtractor={(_, index) => String(index)}
@@ -68,19 +68,19 @@ export function VirtualizedListTest() {
         modal
         itShould="trigger onStartReached event when start of the content is within half the visible length of the list"
         initialState={-1}
-        arrange={({setState}) => {
+        arrange={({ setState }) => {
           const data = [1, 2, 3, 4, 5];
           return (
             <VirtualizedList
               data={data}
               getItem={(items: number[], idx: number) => items[idx]}
               getItemCount={() => data.length}
-              renderItem={({item}: {item: number}) => (
-                <View style={{height: 100, padding: 16, borderWidth: 1}}>
-                  <Text style={{width: '100%', height: 24}}>{item}</Text>
+              renderItem={({ item }: { item: number }) => (
+                <View style={{ height: 100, padding: 16, borderWidth: 1 }}>
+                  <Text style={{ width: '100%', height: 24 }}>{item}</Text>
                 </View>
               )}
-              style={{height: 200}}
+              style={{ height: 200 }}
               onStartReachedThreshold={0.5}
               onStartReached={({
                 distanceFromStart,
@@ -92,7 +92,7 @@ export function VirtualizedListTest() {
             />
           );
         }}
-        assert={({state, expect}) => {
+        assert={({ state, expect }) => {
           expect(state).to.be.lessThanOrEqual(100);
         }}
       />
@@ -100,7 +100,7 @@ export function VirtualizedListTest() {
         modal
         itShould="display event sent to by onScrollToIndexFailed when pressing the button before scrolling"
         initialState={undefined}
-        arrange={({state, setState}) => {
+        arrange={({ state, setState }) => {
           return (
             <VirtualizedListOnScrollToIndexFailed
               state={state}
@@ -108,7 +108,7 @@ export function VirtualizedListTest() {
             />
           );
         }}
-        assert={({state, expect}) => {
+        assert={({ state, expect }) => {
           expect(state).to.be.not.undefined;
           expect(state).to.have.all.keys([
             'index',
@@ -138,7 +138,7 @@ export function VirtualizedListTest() {
           modal
           itShould="scroll to the end of the list - scrollToEnd()"
           initialState={false}
-          arrange={({state, setState}) => {
+          arrange={({ state, setState }) => {
             return (
               <VirtualizedListGetScrollToEnd
                 state={state}
@@ -146,7 +146,7 @@ export function VirtualizedListTest() {
               />
             );
           }}
-          assert={({state, expect}) => {
+          assert={({ state, expect }) => {
             expect(state).to.be.true;
           }}
         />
@@ -154,7 +154,7 @@ export function VirtualizedListTest() {
           modal
           itShould="get the node number - getScrollableNode()"
           initialState={undefined}
-          arrange={({state, setState}) => {
+          arrange={({ state, setState }) => {
             return (
               <VirtualizedListGetScrollableNode
                 state={state}
@@ -162,7 +162,7 @@ export function VirtualizedListTest() {
               />
             );
           }}
-          assert={({state, expect}) => {
+          assert={({ state, expect }) => {
             expect(state).to.be.not.undefined;
             expect(state).to.be.an('number');
           }}
@@ -172,12 +172,12 @@ export function VirtualizedListTest() {
           modal
           itShould="get the scroll ref - getScrollRef()"
           initialState={undefined}
-          arrange={({state, setState}) => {
+          arrange={({ state, setState }) => {
             return (
               <VirtualizedListGetScrollRef state={state} setState={setState} />
             );
           }}
-          assert={({state, expect}) => {
+          assert={({ state, expect }) => {
             expect(state).to.be.not.undefined;
           }}
         />
@@ -186,7 +186,7 @@ export function VirtualizedListTest() {
         modal
         itShould="click (call on ref.recordInteraction()) on button before first scroll should trigger onViewableItemsChanged and change the first two items background color to blue"
         initialState={[]}
-        arrange={({state, setState}) => {
+        arrange={({ state, setState }) => {
           return (
             <VirtualizedListRecordInteractionTest
               state={state}
@@ -194,7 +194,7 @@ export function VirtualizedListTest() {
             />
           );
         }}
-        assert={({state, expect}) => {
+        assert={({ state, expect }) => {
           expect(state).to.be.not.empty;
           expect(state).to.be.an('array');
           expect(state).to.have.lengthOf(2);
@@ -290,24 +290,24 @@ function VirtualizedListOnScrollToIndexFailed({
 
   const handleOnPress = () => {
     if (ref.current) {
-      ref.current.scrollToIndex({index: 20, animated: true});
+      ref.current.scrollToIndex({ index: 20, animated: true });
     }
   };
 
   return (
     <>
       <Button label="Scroll to NOT_EXISTING index" onPress={handleOnPress} />
-      <View style={{height: 50, backgroundColor: 'lightblue'}}>
+      <View style={{ height: 50, backgroundColor: 'lightblue' }}>
         <Text>{state ? JSON.stringify(state) : ''}</Text>
       </View>
       <VirtualizedList
         initialNumToRender={5}
         windowSize={5}
         ref={ref}
-        style={{height: 128}}
+        style={{ height: 128 }}
         getItem={getItem}
         getItemCount={getItemCountVirtualized}
-        renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+        renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
         keyExtractor={(item: ItemData) => item.id}
         onScrollToIndexFailed={(failInfo: OnScrollToIndexFailed) => {
           // @ts-ignore
@@ -318,7 +318,7 @@ function VirtualizedListOnScrollToIndexFailed({
   );
 }
 
-const GENERATED_DATA = Array.from({length: 100}, (_, index) => ({
+const GENERATED_DATA = Array.from({ length: 100 }, (_, index) => ({
   id: String(index),
   title: `Item ${index + 1}`,
 }));
@@ -328,7 +328,7 @@ function VirtualizedListScrollToIndexTest() {
 
   const handleOnPress = () => {
     if (ref.current) {
-      ref.current?.scrollToIndex({index: 10, animated: true});
+      ref.current?.scrollToIndex({ index: 10, animated: true });
     }
   };
 
@@ -337,10 +337,10 @@ function VirtualizedListScrollToIndexTest() {
       <Button label="Scroll to index = 10" onPress={handleOnPress} />
       <VirtualizedList
         ref={ref}
-        style={{height: 128}}
+        style={{ height: 128 }}
         getItem={(_, index: number) => GENERATED_DATA[index]}
         getItemCount={() => GENERATED_DATA.length}
-        renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+        renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
         keyExtractor={(item: ItemData) => item.id}
       />
     </>
@@ -352,7 +352,7 @@ function VirtualizedListScrollToItemTest() {
 
   const handleOnPress = () => {
     if (ref.current) {
-      ref.current.scrollToItem({item: GENERATED_DATA[2], animated: true});
+      ref.current.scrollToItem({ item: GENERATED_DATA[2], animated: true });
     }
   };
 
@@ -361,7 +361,7 @@ function VirtualizedListScrollToItemTest() {
       <Button label="Scroll to item = 3" onPress={handleOnPress} />
       <VirtualizedList
         ref={ref}
-        style={{height: 256}}
+        style={{ height: 256 }}
         data={GENERATED_DATA}
         getItem={(_, index: number) => GENERATED_DATA[index]}
         getItemCount={() => GENERATED_DATA.length}
@@ -370,7 +370,7 @@ function VirtualizedListScrollToItemTest() {
           offset: 48 * index,
           index,
         })}
-        renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+        renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
         keyExtractor={(item: ItemData) => item.id}
       />
     </>
@@ -380,7 +380,7 @@ function VirtualizedListScrollToItemTest() {
 function InvertedVirtualizedListTest() {
   return (
     <VirtualizedList
-      style={{height: 256}}
+      style={{ height: 256 }}
       data={GENERATED_DATA}
       getItem={(_, index: number) => GENERATED_DATA[index]}
       getItemCount={() => GENERATED_DATA.length}
@@ -390,7 +390,7 @@ function InvertedVirtualizedListTest() {
         index,
       })}
       inverted
-      renderItem={({item}: {item: ItemData}) => (
+      renderItem={({ item }: { item: ItemData }) => (
         <TouchableOpacity onPress={() => console.log(item.title)}>
           <Item title={item.title} />
         </TouchableOpacity>
@@ -403,7 +403,7 @@ function InvertedVirtualizedListTest() {
 function InitialScrollIndexTest() {
   return (
     <VirtualizedList
-      style={{height: 256}}
+      style={{ height: 256 }}
       data={GENERATED_DATA}
       getItem={(_, index: number) => GENERATED_DATA[index]}
       getItemCount={() => GENERATED_DATA.length}
@@ -413,7 +413,7 @@ function InitialScrollIndexTest() {
         index,
       })}
       initialScrollIndex={80}
-      renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+      renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
       keyExtractor={(item: ItemData) => item.id}
     />
   );
@@ -440,15 +440,15 @@ function VirtualizedListGetScrollableNode({
   return (
     <>
       <Button label="Get ScrollableNode" onPress={handleOnPress} />
-      <View style={{height: 50, backgroundColor: 'lightblue'}}>
+      <View style={{ height: 50, backgroundColor: 'lightblue' }}>
         <Text>{`ScrollableNode = ${state}`}</Text>
       </View>
       <VirtualizedList
         ref={ref}
-        style={{height: 128}}
+        style={{ height: 128 }}
         getItem={getItem}
         getItemCount={getItemCountVirtualized}
-        renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+        renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
         keyExtractor={(item: ItemData) => item.id}
       />
     </>
@@ -473,15 +473,15 @@ function VirtualizedListGetScrollRef({
   return (
     <>
       <Button label="Get ScrollRef" onPress={handleOnPress} />
-      <View style={{height: 50, backgroundColor: 'lightblue'}}>
+      <View style={{ height: 50, backgroundColor: 'lightblue' }}>
         <Text>{`ScrollRef is defined: ${state}`}</Text>
       </View>
       <VirtualizedList
         ref={ref}
-        style={{height: 128}}
+        style={{ height: 128 }}
         getItem={getItem}
         getItemCount={getItemCountVirtualized}
-        renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+        renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
         keyExtractor={(item: ItemData) => item.id}
       />
     </>
@@ -499,21 +499,21 @@ function VirtualizedListGetScrollToEnd({
 
   const handleOnPress = () => {
     if (ref.current) {
-      ref.current.scrollToEnd({animated: true});
+      ref.current.scrollToEnd({ animated: true });
     }
   };
   return (
     <>
       <Button label="Scroll to the end" onPress={handleOnPress} />
-      <View style={{height: 50, backgroundColor: 'lightblue'}}>
+      <View style={{ height: 50, backgroundColor: 'lightblue' }}>
         <Text>{`End is reached: ${state}`}</Text>
       </View>
       <VirtualizedList
         ref={ref}
-        style={{height: 128}}
+        style={{ height: 128 }}
         getItem={getItem}
         getItemCount={getItemCountVirtualized}
-        renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+        renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
         keyExtractor={(item: ItemData) => item.id}
         onEndReached={() => setState(true)}
       />
@@ -574,14 +574,14 @@ const MockedVideoPlayer = ({
         marginBottom: 5,
         justifyContent: 'center',
       }}>
-      <Text style={{textAlign: 'center'}}>Item with id: {itemId}</Text>
-      <Text style={{textAlign: 'center'}}>Mocked Video Player</Text>
-      <Text style={{textAlign: 'center'}}>
+      <Text style={{ textAlign: 'center' }}>Item with id: {itemId}</Text>
+      <Text style={{ textAlign: 'center' }}>Mocked Video Player</Text>
+      <Text style={{ textAlign: 'center' }}>
         {playMockVideo
           ? 'Playing'
           : prefetchMockVideo
-          ? 'Prefetching...'
-          : 'Waiting to be visible'}
+            ? 'Prefetching...'
+            : 'Waiting to be visible'}
       </Text>
     </View>
   );
@@ -615,19 +615,19 @@ function VirtualizedListRecordInteractionTest({
   };
 
   return (
-    <View style={{height: 600}}>
-      <View style={{marginBottom: 10}}>
+    <View style={{ height: 600 }}>
+      <View style={{ marginBottom: 10 }}>
         <Button label="Record interaction" onPress={handleOnPress} />
-        <Text style={{padding: 10}}>
+        <Text style={{ padding: 10 }}>
           Visible Items are: {JSON.stringify(visibleItems)}
         </Text>
       </View>
       <VirtualizedList
         ref={ref}
-        style={{height: 128}}
+        style={{ height: 128 }}
         getItem={getItem}
         getItemCount={getItemCountVirtualized}
-        renderItem={({item}: {item: ItemData}) => (
+        renderItem={({ item }: { item: ItemData }) => (
           <MockedVideoPlayer
             itemId={item.id}
             playMockVideo={visibleItems.includes(item.id)}
@@ -683,8 +683,8 @@ function VirtualizedListTestViewabiliyConfigCallbackPairs() {
   ];
 
   return (
-    <View style={{height: 600}}>
-      <View style={{marginBottom: 10}}>
+    <View style={{ height: 600 }}>
+      <View style={{ marginBottom: 10 }}>
         <Text>
           First threshold {firstViewabilityConfig.itemVisiblePercentThreshold}%{' '}
           visible items are: {JSON.stringify(firstVisibleItems)}
@@ -695,10 +695,10 @@ function VirtualizedListTestViewabiliyConfigCallbackPairs() {
         </Text>
       </View>
       <VirtualizedList
-        style={{height: 128}}
+        style={{ height: 128 }}
         getItem={getItem}
         getItemCount={getItemCountVirtualized}
-        renderItem={({item}: {item: ItemData}) => (
+        renderItem={({ item }: { item: ItemData }) => (
           <MockedVideoPlayer
             height={300}
             itemId={item.id}
@@ -733,18 +733,18 @@ function VirtualizedListViewabilityConfigViewTime() {
   };
 
   return (
-    <View style={{height: 600}}>
-      <View style={{marginBottom: 10}}>
-        <Text style={{padding: 10}}>
+    <View style={{ height: 600 }}>
+      <View style={{ marginBottom: 10 }}>
+        <Text style={{ padding: 10 }}>
           Visible Items after {thirdViewabilityConfig.minimumViewTime}ms are:{' '}
           {JSON.stringify(visibleItems)}
         </Text>
       </View>
       <VirtualizedList
-        style={{height: 128}}
+        style={{ height: 128 }}
         getItem={getItem}
         getItemCount={getItemCountVirtualized}
-        renderItem={({item}: {item: ItemData}) => (
+        renderItem={({ item }: { item: ItemData }) => (
           <MockedVideoPlayer
             itemId={item.id}
             playMockVideo={visibleItems.includes(item.id)}
@@ -761,7 +761,7 @@ function VirtualizedListViewabilityConfigViewTime() {
 function VirtualizedListCellRendererComponent() {
   return (
     <VirtualizedList
-      style={{height: 128}}
+      style={{ height: 128 }}
       data={GENERATED_DATA}
       getItem={(_, index: number) => GENERATED_DATA[index]}
       getItemCount={() => GENERATED_DATA.length}
@@ -770,7 +770,7 @@ function VirtualizedListCellRendererComponent() {
         offset: 48 * index,
         index,
       })}
-      renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+      renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
       keyExtractor={(item: ItemData) => item.id}
       CellRendererComponent={({
         index,
@@ -798,7 +798,7 @@ function VirtualizedListCellRendererComponent() {
 function VirtualizedListItemSeparatorTest() {
   return (
     <VirtualizedList
-      style={{height: 128}}
+      style={{ height: 128 }}
       data={GENERATED_DATA}
       getItem={(_, index: number) => GENERATED_DATA[index]}
       getItemCount={() => GENERATED_DATA.length}
@@ -807,7 +807,7 @@ function VirtualizedListItemSeparatorTest() {
         offset: 48 * index,
         index,
       })}
-      renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+      renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
       keyExtractor={(item: ItemData) => item.id}
       ItemSeparatorComponent={() => (
         <View
@@ -827,11 +827,11 @@ function VirtualizedListItemSeparatorTest() {
 function VirtualizedListListEmptyComponentTest() {
   return (
     <VirtualizedList
-      style={{height: 128}}
+      style={{ height: 128 }}
       data={[]}
       getItem={(_, index: number) => GENERATED_DATA[index]}
       getItemCount={() => 0}
-      renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+      renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
       keyExtractor={(item: ItemData) => item.id}
       ListEmptyComponent={() => (
         <View
@@ -851,7 +851,7 @@ function VirtualizedListListEmptyComponentTest() {
 function VirtualizedListListItemComponent() {
   return (
     <VirtualizedList
-      style={{height: 128}}
+      style={{ height: 128 }}
       data={GENERATED_DATA}
       getItem={(_, index: number) => GENERATED_DATA[index]}
       getItemCount={() => GENERATED_DATA.length}
@@ -871,8 +871,8 @@ function VirtualizedListListItemComponent() {
             borderBottomWidth: 1,
             justifyContent: 'center',
           }}>
-          <Text style={{textAlign: 'center'}}>Item Component</Text>
-          <Text style={{textAlign: 'center'}}>{props.item.title}</Text>
+          <Text style={{ textAlign: 'center' }}>Item Component</Text>
+          <Text style={{ textAlign: 'center' }}>{props.item.title}</Text>
         </View>
       )}
     />
@@ -882,7 +882,7 @@ function VirtualizedListListItemComponent() {
 function VirtualizedListListFooterComponent() {
   return (
     <VirtualizedList
-      style={{height: 128}}
+      style={{ height: 128 }}
       data={GENERATED_DATA}
       getItem={(_, index: number) => GENERATED_DATA[index]}
       getItemCount={() => GENERATED_DATA.length}
@@ -901,10 +901,10 @@ function VirtualizedListListFooterComponent() {
             borderBottomWidth: 1,
             justifyContent: 'center',
           }}>
-          <Text style={{textAlign: 'center'}}>List Footer Component</Text>
+          <Text style={{ textAlign: 'center' }}>List Footer Component</Text>
         </View>
       )}
-      renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+      renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
       keyExtractor={(item: ItemData) => item.id}
     />
   );
@@ -913,7 +913,7 @@ function VirtualizedListListFooterComponent() {
 function VirtualizedListListFooterComponentStyles() {
   return (
     <VirtualizedList
-      style={{height: 128}}
+      style={{ height: 128 }}
       data={GENERATED_DATA}
       getItem={(_, index: number) => GENERATED_DATA[index]}
       getItemCount={() => GENERATED_DATA.length}
@@ -924,7 +924,7 @@ function VirtualizedListListFooterComponentStyles() {
       })}
       ListFooterComponent={() => (
         <View>
-          <Text style={{textAlign: 'center'}}>List Footer Component</Text>
+          <Text style={{ textAlign: 'center' }}>List Footer Component</Text>
         </View>
       )}
       ListFooterComponentStyle={{
@@ -935,7 +935,7 @@ function VirtualizedListListFooterComponentStyles() {
         borderBottomWidth: 1,
         justifyContent: 'center',
       }}
-      renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+      renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
       keyExtractor={(item: ItemData) => item.id}
     />
   );
@@ -944,7 +944,7 @@ function VirtualizedListListFooterComponentStyles() {
 function VirtualizedListListHeaderComponent() {
   return (
     <VirtualizedList
-      style={{height: 128}}
+      style={{ height: 128 }}
       data={GENERATED_DATA}
       getItem={(_, index: number) => GENERATED_DATA[index]}
       getItemCount={() => GENERATED_DATA.length}
@@ -958,7 +958,7 @@ function VirtualizedListListHeaderComponent() {
           style={{
             backgroundColor: 'lightgray',
           }}>
-          <Text style={{textAlign: 'center'}}>List Header Component</Text>
+          <Text style={{ textAlign: 'center' }}>List Header Component</Text>
         </View>
       )}
       ListHeaderComponentStyle={{
@@ -969,7 +969,7 @@ function VirtualizedListListHeaderComponent() {
         borderBottomWidth: 1,
         justifyContent: 'center',
       }}
-      renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+      renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
       keyExtractor={(item: ItemData) => item.id}
     />
   );
@@ -980,7 +980,7 @@ function VirtualizedListDebugTest() {
     <VirtualizedList
       debug
       disableVirtualization
-      style={{height: 256}}
+      style={{ height: 256 }}
       data={GENERATED_DATA}
       getItem={(_, index: number) => GENERATED_DATA[index]}
       getItemCount={() => GENERATED_DATA.length}
@@ -989,7 +989,7 @@ function VirtualizedListDebugTest() {
         offset: 48 * index,
         index,
       })}
-      renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+      renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
       keyExtractor={(item: ItemData) => item.id}
     />
   );
@@ -1020,7 +1020,7 @@ function VirtualizedListExtraDataTest() {
     <View>
       <Button label="Select 5 item" onPress={() => setSelectedId('4')} />
       <VirtualizedList
-        style={{height: 256}}
+        style={{ height: 256 }}
         data={items}
         getItem={(_, index: number) => items[index]}
         getItemCount={() => items.length}
@@ -1030,7 +1030,7 @@ function VirtualizedListExtraDataTest() {
           index,
         })}
         extraData={selectedId}
-        renderItem={({item}: {item: ItemData}) => (
+        renderItem={({ item }: { item: ItemData }) => (
           <CustomItem isSelected={selectedId === item.id} title={item.title} />
         )}
         keyExtractor={(item: ItemData) => item.id}
@@ -1042,7 +1042,7 @@ function VirtualizedListExtraDataTest() {
 function VirtualizedListHorizontalTest() {
   return (
     <VirtualizedList
-      style={{height: 256}}
+      style={{ height: 256 }}
       horizontal
       data={GENERATED_DATA}
       getItem={(_, index: number) => GENERATED_DATA[index]}
@@ -1052,7 +1052,7 @@ function VirtualizedListHorizontalTest() {
         offset: 48 * index,
         index,
       })}
-      renderItem={({item}: {item: ItemData}) => (
+      renderItem={({ item }: { item: ItemData }) => (
         <HorizontalItem title={item.title} />
       )}
       keyExtractor={(item: ItemData) => item.id}
@@ -1063,7 +1063,7 @@ function VirtualizedListHorizontalTest() {
 function VirtualizedListHorizontalInvertedTest() {
   return (
     <VirtualizedList
-      style={{height: 256}}
+      style={{ height: 256 }}
       horizontal
       inverted
       data={GENERATED_DATA}
@@ -1074,7 +1074,7 @@ function VirtualizedListHorizontalInvertedTest() {
         offset: 48 * index,
         index,
       })}
-      renderItem={({item}: {item: ItemData}) => (
+      renderItem={({ item }: { item: ItemData }) => (
         <HorizontalItem title={item.title} />
       )}
       keyExtractor={(item: ItemData) => item.id}
@@ -1102,7 +1102,7 @@ function VirtualizedListOnRefreshTest() {
         <Text>{refreshing ? 'isRefreshing' : 'Refresh!'}</Text>
       </View>
       <VirtualizedList
-        style={{height: 256}}
+        style={{ height: 256 }}
         onRefresh={handleOnRefresh}
         refreshing={refreshing}
         data={GENERATED_DATA}
@@ -1113,7 +1113,7 @@ function VirtualizedListOnRefreshTest() {
           offset: 48 * index,
           index,
         })}
-        renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+        renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
         keyExtractor={(item: ItemData) => item.id}
       />
     </View>
@@ -1123,7 +1123,7 @@ function VirtualizedListOnRefreshTest() {
 function VirtualizedListPersistentScrollbarTest() {
   return (
     <VirtualizedList
-      style={{height: 256}}
+      style={{ height: 256 }}
       persistentScrollbar
       data={GENERATED_DATA}
       getItem={(_, index: number) => GENERATED_DATA[index]}
@@ -1133,7 +1133,7 @@ function VirtualizedListPersistentScrollbarTest() {
         offset: 48 * index,
         index,
       })}
-      renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+      renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
       keyExtractor={(item: ItemData) => item.id}
     />
   );
@@ -1142,7 +1142,7 @@ function VirtualizedListPersistentScrollbarTest() {
 function VirtualizedListUpdateCellsBatchingPeriodTest() {
   return (
     <VirtualizedList
-      style={{height: 128}}
+      style={{ height: 128 }}
       data={GENERATED_DATA}
       getItem={(_, index: number) => GENERATED_DATA[index]}
       getItemCount={() => GENERATED_DATA.length}
@@ -1151,7 +1151,7 @@ function VirtualizedListUpdateCellsBatchingPeriodTest() {
         offset: 48 * index,
         index,
       })}
-      renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+      renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
       keyExtractor={(item: ItemData) => item.id}
       updateCellsBatchingPeriod={2000}
       maxToRenderPerBatch={1}
@@ -1171,7 +1171,7 @@ function VirtualizedListRefreshControlTest() {
 
   return (
     <VirtualizedList
-      style={{height: 256}}
+      style={{ height: 256 }}
       refreshControl={
         <RefreshControl refreshing={refreshing} onRefresh={handleOnRefresh} />
       }
@@ -1183,7 +1183,7 @@ function VirtualizedListRefreshControlTest() {
         offset: 48 * index,
         index,
       })}
-      renderItem={({item}: {item: ItemData}) => <Item title={item.title} />}
+      renderItem={({ item }: { item: ItemData }) => <Item title={item.title} />}
       keyExtractor={(item: ItemData) => item.id}
     />
   );
diff --git a/docs/Samples/Sandbox/README_zh.md b/docs/Samples/Sandbox/README_zh.md
index ed93aa928ecb0399101ab916f4e86dcc8f24e769..1425b1af24a3b6806a4ab5bdbbc4d3a10174012a 100644
--- a/docs/Samples/Sandbox/README_zh.md
+++ b/docs/Samples/Sandbox/README_zh.md
@@ -7,7 +7,7 @@
 ```
 ├── SandBoxNativeProject
 |   └── Index.ets
-|       ├── downloadBundle # OpenHarmony 侧推送 raw 文件到沙箱中
+|       ├── downloadBundle #OpenHarmony 侧推送 raw 文件到沙箱中
 |       └── new FileJSBundleProvider #OpenHarmony 侧加载沙箱中的文件
 └── SandBoxRnProject
     └── example.tsx  # React Native 侧加载沙箱中的图片
diff --git a/docs/Samples/Sandbox/SandBoxNativeProject/AppScope/app.json5 b/docs/Samples/Sandbox/SandBoxNativeProject/AppScope/app.json5
index 4b98ef7cab7b5bd7838d9ab630b9b66148a40da2..43b6d00900303f6002540b8eeadb6eaae516f08c 100644
--- a/docs/Samples/Sandbox/SandBoxNativeProject/AppScope/app.json5
+++ b/docs/Samples/Sandbox/SandBoxNativeProject/AppScope/app.json5
@@ -1,6 +1,6 @@
 {
   "app": {
-    "bundleName": "com.example.myapplication",
+    "bundleName": "com.example.sandbox",
     "vendor": "example",
     "versionCode": 1000000,
     "versionName": "1.0.0",
diff --git a/docs/Samples/Sandbox/SandBoxNativeProject/entry/hvigorfile.ts b/docs/Samples/Sandbox/SandBoxNativeProject/entry/hvigorfile.ts
index 4a1a975c3b7491258f5ff7278660b08d260ee8d3..e570e90e8decfddb61acdbaf0c9e6b983edddb23 100644
--- a/docs/Samples/Sandbox/SandBoxNativeProject/entry/hvigorfile.ts
+++ b/docs/Samples/Sandbox/SandBoxNativeProject/entry/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { hapTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/Sandbox/SandBoxNativeProject/entry/src/main/ets/pages/Index.ets b/docs/Samples/Sandbox/SandBoxNativeProject/entry/src/main/ets/pages/Index.ets
index c6f960d0d8d98abdca1f06fbf67aa892873909d4..60759a6d632f22904e2b04d38950fe8cb9c8cf43 100644
--- a/docs/Samples/Sandbox/SandBoxNativeProject/entry/src/main/ets/pages/Index.ets
+++ b/docs/Samples/Sandbox/SandBoxNativeProject/entry/src/main/ets/pages/Index.ets
@@ -22,7 +22,8 @@ import { createRNPackages } from '../RNPackagesFactory';
 import fs from '@ohos.file.fs';
 
 @Builder
-export function buildCustomRNComponent(ctx: ComponentBuilderContext) {};
+export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
+};
 const wrappedCustomRNComponentBuilder = wrapBuilder(buildCustomRNComponent);
 
 @Entry
@@ -49,7 +50,8 @@ struct Index {
   async downloadBundle() {
     if (this.rnAbility) {
       // 将bundlejs下载并保存到沙箱。
-      let uint8Array = await this.rnAbility.context.resourceManager.getRawFileContent('rawfile/bundle/sandbox.harmony.bundle');
+      let uint8Array =
+        await this.rnAbility.context.resourceManager.getRawFileContent('rawfile/bundle/sandbox.harmony.bundle');
       let rawBuffer = uint8Array.buffer;
       let num = rawBuffer.byteLength;
       // 获取沙箱路径
@@ -85,7 +87,6 @@ struct Index {
     // when handled by RN。
     this.rnohCoreContext!.dispatchBackPress();
     return true;
-
   }
 
   build() {
@@ -96,8 +97,8 @@ struct Index {
         }
         if (this.rnAbility && this.hasBundle) {
           RNApp({
-            rnInstanceConfig: { 
-              createRNPackages,             
+            rnInstanceConfig: {
+              createRNPackages,
               enableCAPIArchitecture: true,
               arkTsComponentNames: []
             },
diff --git a/docs/Samples/Sandbox/SandBoxNativeProject/hvigorfile.ts b/docs/Samples/Sandbox/SandBoxNativeProject/hvigorfile.ts
index 035eea0cc548c925a1d81920e8e809fe57d6a4db..44bbe01097a3d4970037b397435c451f6d260669 100644
--- a/docs/Samples/Sandbox/SandBoxNativeProject/hvigorfile.ts
+++ b/docs/Samples/Sandbox/SandBoxNativeProject/hvigorfile.ts
@@ -8,6 +8,11 @@
 import { appTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
+<<<<<<< HEAD
+  system: appTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
+=======
     system: appTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+    plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
+>>>>>>> 589ae80f (Format the code format of the Sample project)
 }
diff --git a/docs/Samples/Sandbox/SandBoxRnProject/__tests__/App.test.tsx b/docs/Samples/Sandbox/SandBoxRnProject/__tests__/App.test.tsx
index 5375d53c1a290981e85ba01a4298a7f408327290..515a9d4b5b89a34738b83daf73eb36c89e9a6e89 100644
--- a/docs/Samples/Sandbox/SandBoxRnProject/__tests__/App.test.tsx
+++ b/docs/Samples/Sandbox/SandBoxRnProject/__tests__/App.test.tsx
@@ -12,7 +12,7 @@ import React from 'react';
 import App from '../App';
 
 // Note: import explicitly to use the types shiped with jest.
-import {it} from '@jest/globals';
+import { it } from '@jest/globals';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
diff --git a/docs/Samples/Sandbox/SandBoxRnProject/index.js b/docs/Samples/Sandbox/SandBoxRnProject/index.js
index f5c0aa7a265623069f6e717e61bb72f99b7d8d51..5251caf86e76bf49a8537cad1da0b0a77b84bb1e 100644
--- a/docs/Samples/Sandbox/SandBoxRnProject/index.js
+++ b/docs/Samples/Sandbox/SandBoxRnProject/index.js
@@ -7,8 +7,8 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './App';
-import {name as appName} from './app.json';
+import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);
diff --git a/docs/Samples/Sandbox/SandBoxRnProject/metro.config.js b/docs/Samples/Sandbox/SandBoxRnProject/metro.config.js
index 872aa76384801ee14e66fff061ce09a8195e437b..357ba23d4f35eb4774f8855b485f5d7ee371f6a9 100644
--- a/docs/Samples/Sandbox/SandBoxRnProject/metro.config.js
+++ b/docs/Samples/Sandbox/SandBoxRnProject/metro.config.js
@@ -5,23 +5,23 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 /**
  * @type {import("metro-config").ConfigT}
  */
 const config = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
+    transformer: {
+        getTransformOptions: async () => ({
+            transform: {
+                experimentalImportSupport: false,
+                inlineRequires: true,
+            },
+        }),
+    },
 };
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
-  reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
+    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
 }), config);
diff --git a/docs/Samples/Sandbox/SandBoxRnProject/sandbox.config.js b/docs/Samples/Sandbox/SandBoxRnProject/sandbox.config.js
index 63b5449e8489af1d40ce81f3fba313b333abbfde..39de0cae149ef80174c1daa404396d286a095e7c 100644
--- a/docs/Samples/Sandbox/SandBoxRnProject/sandbox.config.js
+++ b/docs/Samples/Sandbox/SandBoxRnProject/sandbox.config.js
@@ -5,24 +5,24 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 const config = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
+    transformer: {
+        getTransformOptions: async () => ({
+            transform: {
+                experimentalImportSupport: false,
+                inlineRequires: true,
+            },
+        }),
+    },
 };
 
 module.exports = mergeConfig(
-  getDefaultConfig(__dirname),
-  createHarmonyMetroConfig({
-    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
-  }),
-  config,
+    getDefaultConfig(__dirname),
+    createHarmonyMetroConfig({
+        reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
+    }),
+    config,
 );
diff --git a/docs/Samples/Sandbox/SandBoxRnProject/src/bundles/Sandbox/examples.tsx b/docs/Samples/Sandbox/SandBoxRnProject/src/bundles/Sandbox/examples.tsx
index 1bff2b02afb260fcaafc5d056578400373d8e126..75f77dfe4c4c82b2d1a7b46ff85c433f9bfd04b3 100644
--- a/docs/Samples/Sandbox/SandBoxRnProject/src/bundles/Sandbox/examples.tsx
+++ b/docs/Samples/Sandbox/SandBoxRnProject/src/bundles/Sandbox/examples.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {Text, Image, View, StyleSheet} from 'react-native';
+import { Text, Image, View, StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
   //创建样式
@@ -26,7 +26,7 @@ const Sandbox = () => {
         marginLeft: 'auto',
         marginRight: 'auto',
       }}>
-      <Text style={{fontWeight: 600, marginTop: 20}}>沙箱bundle渲染</Text>
+      <Text style={{ fontWeight: 600, marginTop: 20 }}>沙箱bundle渲染</Text>
       <View
         style={{
           display: 'flex',
@@ -43,7 +43,7 @@ const Sandbox = () => {
           }}
         />
         <Image
-          source={{uri: 'file:///data/storage/el2/base/files/call.png'}}
+          source={{ uri: 'file:///data/storage/el2/base/files/call.png' }}
           style={{
             width: 100,
             height: 100,
diff --git a/docs/Samples/Sandbox/SandBoxRnProject/src/bundles/Sandbox/index.js b/docs/Samples/Sandbox/SandBoxRnProject/src/bundles/Sandbox/index.js
index 798dfcffc35f1897534a4accd99e384cc729cc84..40012f54fc7eddd0f146a3fd40f42e9ab446aa0d 100644
--- a/docs/Samples/Sandbox/SandBoxRnProject/src/bundles/Sandbox/index.js
+++ b/docs/Samples/Sandbox/SandBoxRnProject/src/bundles/Sandbox/index.js
@@ -5,7 +5,7 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './examples';
 
 AppRegistry.registerComponent('Sandbox', () => App);
\ No newline at end of file
diff --git a/docs/Samples/demo_without_rnAbility/NativeProject/AppScope/app.json5 b/docs/Samples/demo_without_rnAbility/NativeProject/AppScope/app.json5
index 4b98ef7cab7b5bd7838d9ab630b9b66148a40da2..07068c34245d8b757d79315d70d038b475cbbc57 100644
--- a/docs/Samples/demo_without_rnAbility/NativeProject/AppScope/app.json5
+++ b/docs/Samples/demo_without_rnAbility/NativeProject/AppScope/app.json5
@@ -1,6 +1,6 @@
 {
   "app": {
-    "bundleName": "com.example.myapplication",
+    "bundleName": "com.example.rnability",
     "vendor": "example",
     "versionCode": 1000000,
     "versionName": "1.0.0",
diff --git a/docs/Samples/demo_without_rnAbility/NativeProject/entry/hvigorfile.ts b/docs/Samples/demo_without_rnAbility/NativeProject/entry/hvigorfile.ts
index 4a1a975c3b7491258f5ff7278660b08d260ee8d3..e570e90e8decfddb61acdbaf0c9e6b983edddb23 100644
--- a/docs/Samples/demo_without_rnAbility/NativeProject/entry/hvigorfile.ts
+++ b/docs/Samples/demo_without_rnAbility/NativeProject/entry/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { hapTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/demo_without_rnAbility/NativeProject/entry/src/main/ets/entryability/EntryAbility.ets b/docs/Samples/demo_without_rnAbility/NativeProject/entry/src/main/ets/entryability/EntryAbility.ets
index eca4f151e6a8964b0b698faff59d5de6d1408adb..55e3238fbb5950ab2f935a2f7fecd31c2e8428ae 100644
--- a/docs/Samples/demo_without_rnAbility/NativeProject/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/docs/Samples/demo_without_rnAbility/NativeProject/entry/src/main/ets/entryability/EntryAbility.ets
@@ -12,6 +12,7 @@ import { UPRNSDK, UPRNSDKImpl } from 'library';
 
 export default class EntryAbility extends UIAbility {
   rnSDK: UPRNSDKImpl | undefined = undefined;
+
   // rnSDK: UPRNSDK | undefined = undefined;
   onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
     hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
diff --git a/docs/Samples/demo_without_rnAbility/NativeProject/entry/src/main/ets/pages/RNPage.ets b/docs/Samples/demo_without_rnAbility/NativeProject/entry/src/main/ets/pages/RNPage.ets
index 25bd400ba223f0890e176b2fd1a65193a541dcaf..57b917cd5feedf230dd70c908080f0c583d5085a 100644
--- a/docs/Samples/demo_without_rnAbility/NativeProject/entry/src/main/ets/pages/RNPage.ets
+++ b/docs/Samples/demo_without_rnAbility/NativeProject/entry/src/main/ets/pages/RNPage.ets
@@ -6,10 +6,11 @@
  */
 
 import { RNInfo, UPReactView, UPRNSDK } from 'library';
+
 @Entry
 @Component
 export struct RNPage {
-  rnInfo: RNInfo = {businessId: 'App', bundlePath: 'bundle.harmony.js', isFromMetro: false};
+  rnInfo: RNInfo = { businessId: 'App', bundlePath: 'bundle.harmony.js', isFromMetro: false };
   @StorageLink('UPRNSDK') rnSdk: UPRNSDK | undefined = undefined;
 
   onBackPress(): boolean | void {
diff --git a/docs/Samples/demo_without_rnAbility/NativeProject/hvigorfile.ts b/docs/Samples/demo_without_rnAbility/NativeProject/hvigorfile.ts
index 035eea0cc548c925a1d81920e8e809fe57d6a4db..eb412dc9274fabc06bd41ce059bfbc81899543c3 100644
--- a/docs/Samples/demo_without_rnAbility/NativeProject/hvigorfile.ts
+++ b/docs/Samples/demo_without_rnAbility/NativeProject/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { appTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: appTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: appTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/demo_without_rnAbility/NativeProject/library/BuildProfile.ets b/docs/Samples/demo_without_rnAbility/NativeProject/library/BuildProfile.ets
index c4925711fb037a834743a18fbc685e5120ace312..786d4c892e0a55ff9a269d5f7fb8fc325e724e74 100644
--- a/docs/Samples/demo_without_rnAbility/NativeProject/library/BuildProfile.ets
+++ b/docs/Samples/demo_without_rnAbility/NativeProject/library/BuildProfile.ets
@@ -9,16 +9,19 @@
  * Use these variables when you tailor your ArkTS code. They must be of the const type.
  */
 export const HAR_VERSION = '1.0.0';
+
 export const BUILD_MODE_NAME = 'debug';
+
 export const DEBUG = true;
+
 export const TARGET_NAME = 'default';
 
 /**
  * BuildProfile Class is used only for compatibility purposes.
  */
-export default class BuildProfile { 
-	static readonly HAR_VERSION = HAR_VERSION;
-	static readonly BUILD_MODE_NAME = BUILD_MODE_NAME;
-	static readonly DEBUG = DEBUG;
-	static readonly TARGET_NAME = TARGET_NAME;
+export default class BuildProfile {
+  static readonly HAR_VERSION = HAR_VERSION;
+  static readonly BUILD_MODE_NAME = BUILD_MODE_NAME;
+  static readonly DEBUG = DEBUG;
+  static readonly TARGET_NAME = TARGET_NAME;
 }
\ No newline at end of file
diff --git a/docs/Samples/demo_without_rnAbility/NativeProject/library/Index.ets b/docs/Samples/demo_without_rnAbility/NativeProject/library/Index.ets
index 22a25f36feba3cfb26ed204a052c57c44f5b1679..4475301acf8c64cd7a97b6904fc9e150a39e83a4 100644
--- a/docs/Samples/demo_without_rnAbility/NativeProject/library/Index.ets
+++ b/docs/Samples/demo_without_rnAbility/NativeProject/library/Index.ets
@@ -7,7 +7,11 @@
 
 // export { add } from "./src/main/ets/utils/Calc"
 export * from "./src/main/ets/UPRNSDK"
+
 export * from "./src/main/ets/UPRNSDKImpl"
+
 export * from "./src/main/ets/model/RNInfo"
+
 export * from "./src/main/ets/pages/UPReactView"
+
 export * from "@rnoh/react-native-openharmony"
\ No newline at end of file
diff --git a/docs/Samples/demo_without_rnAbility/NativeProject/library/hvigorfile.ts b/docs/Samples/demo_without_rnAbility/NativeProject/library/hvigorfile.ts
index dc4a8f552c9222b0898608806463dafdd42e6750..07925385e4e96b3f9360a4866fcb51f153807623 100644
--- a/docs/Samples/demo_without_rnAbility/NativeProject/library/hvigorfile.ts
+++ b/docs/Samples/demo_without_rnAbility/NativeProject/library/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { harTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: harTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: harTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/demo_without_rnAbility/NativeProject/library/src/main/ets/UPRNSDK.ts b/docs/Samples/demo_without_rnAbility/NativeProject/library/src/main/ets/UPRNSDK.ts
index 3b9609ba4e885516cdfe0a10ce11f76bbd93d2f7..78503baa3e1d4a784e4b15ffe0581e310360b8f6 100644
--- a/docs/Samples/demo_without_rnAbility/NativeProject/library/src/main/ets/UPRNSDK.ts
+++ b/docs/Samples/demo_without_rnAbility/NativeProject/library/src/main/ets/UPRNSDK.ts
@@ -13,7 +13,7 @@ export interface UPRNSDK {
 
   createAndRegisterRNInstance(options: RNInstanceOptions): Promise<RNInstance>
 
-  createRNOHContext({rnInstance}: { rnInstance: RNInstance }): RNOHContext;
+  createRNOHContext({ rnInstance }: { rnInstance: RNInstance }): RNOHContext;
 
   onBackPress(): boolean;
 }
\ No newline at end of file
diff --git a/docs/Samples/demo_without_rnAbility/NativeProject/library/src/main/ets/UPRNSDKImpl.ets b/docs/Samples/demo_without_rnAbility/NativeProject/library/src/main/ets/UPRNSDKImpl.ets
index 7c13e339e7419388714baefdb789bab25bd8a079..92179ccb8f85a3b59192c2539ba237bc4898aa0b 100644
--- a/docs/Samples/demo_without_rnAbility/NativeProject/library/src/main/ets/UPRNSDKImpl.ets
+++ b/docs/Samples/demo_without_rnAbility/NativeProject/library/src/main/ets/UPRNSDKImpl.ets
@@ -16,8 +16,8 @@ import { BusinessError } from '@kit.BasicServicesKit';
 import common from '@ohos.app.ability.common';
 import window from '@ohos.window';
 
-export class UPRNSDKImpl{
-  private context:common.UIAbilityContext | null = null;
+export class UPRNSDKImpl {
+  private context: common.UIAbilityContext | null = null;
   protected isDebugModeEnabled_: boolean = true
   private rnInstancesCoordinator!: RNInstancesCoordinator
   private logger!: RNOHLogger
@@ -58,7 +58,7 @@ export class UPRNSDKImpl{
     AppStorage.setOrCreate('RNOHCoreContext', this.rnInstancesCoordinator.getRNOHCoreContext())
   }
 
-  public async onAppSetup(windowStage: window.WindowStage){
+  public async onAppSetup(windowStage: window.WindowStage) {
     const mainWindow = await windowStage.getMainWindow();
     const onWindowSizeChange = (windowSize: window.Size) => {
       this.rnInstancesCoordinator?.onWindowSizeChange(windowSize)
@@ -75,6 +75,7 @@ export class UPRNSDKImpl{
     stopTracing()
     return true;
   }
+
   /**
    * Invoked when the React application doesn't handle the device back press.
    */
@@ -86,7 +87,6 @@ export class UPRNSDKImpl{
    * @returns HttpClient shared by RNInstances
    */
   protected onCreateDefaultHttpClient(): undefined | HttpClient {
-    return new DefaultHttpClient({logger: this.logger});
+    return new DefaultHttpClient({ logger: this.logger });
   }
-
 }
diff --git a/docs/Samples/demo_without_rnAbility/RNProject/MainProject/bundle.config.js b/docs/Samples/demo_without_rnAbility/RNProject/MainProject/bundle.config.js
index d0b1da64869d0adf8228dc7d4c3c55b15ec34ff5..71104ae2113cf26e90e958351b4e635ca2a522dc 100644
--- a/docs/Samples/demo_without_rnAbility/RNProject/MainProject/bundle.config.js
+++ b/docs/Samples/demo_without_rnAbility/RNProject/MainProject/bundle.config.js
@@ -5,20 +5,20 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 const config = {
-    transformer: {
-      getTransformOptions: async () => ({
-        transform: {
-          experimentalImportSupport: false,
-          inlineRequires: true,
-        },
-      }),
-    },
-  };
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+};
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
-    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
+  reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
 }), config);
\ No newline at end of file
diff --git a/docs/Samples/demo_without_rnAbility/RNProject/MainProject/metro.config.js b/docs/Samples/demo_without_rnAbility/RNProject/MainProject/metro.config.js
index 872aa76384801ee14e66fff061ce09a8195e437b..85804fb299d98bb8e3c328579095ba5929d971de 100644
--- a/docs/Samples/demo_without_rnAbility/RNProject/MainProject/metro.config.js
+++ b/docs/Samples/demo_without_rnAbility/RNProject/MainProject/metro.config.js
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 /**
  * @type {import("metro-config").ConfigT}
diff --git a/docs/Samples/demo_without_rnAbility/RNProject/MainProject/src/bundles/MainPage.tsx b/docs/Samples/demo_without_rnAbility/RNProject/MainProject/src/bundles/MainPage.tsx
index 6c6f136613e3c2ef03dc4792049ca2df833dd039..6e20ad7119db67663d184d62f250d97dbfd37354 100644
--- a/docs/Samples/demo_without_rnAbility/RNProject/MainProject/src/bundles/MainPage.tsx
+++ b/docs/Samples/demo_without_rnAbility/RNProject/MainProject/src/bundles/MainPage.tsx
@@ -5,13 +5,13 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {Text, StyleSheet, View, Animated, Pressable} from 'react-native';
-import React, {useEffect, useRef} from 'react';
+import { Text, StyleSheet, View, Animated, Pressable } from 'react-native';
+import React, { useEffect, useRef } from 'react';
 
 function App() {
   return (
     // <View style={{marginTop: 200}}>
-      <Text style={{fontSize: 50, alignSelf:'center', color: 'red'}}>这是RN页面</Text>
+    <Text style={{ fontSize: 50, alignSelf: 'center', color: 'red' }}>这是RN页面</Text>
     // </View>
   );
 }
diff --git a/docs/Samples/using_RNSurface/SampleApp/AppScope/app.json5 b/docs/Samples/using_RNSurface/SampleApp/AppScope/app.json5
index b1f2a5955e5edea12691059baa1cbe276a78c59e..624b861e92ae6e2474597f22f4a41acf63a19911 100644
--- a/docs/Samples/using_RNSurface/SampleApp/AppScope/app.json5
+++ b/docs/Samples/using_RNSurface/SampleApp/AppScope/app.json5
@@ -1,6 +1,6 @@
 {
   "app": {
-    "bundleName": "com.example.sampleApp",
+    "bundleName": "com.example.rnsurface",
     "vendor": "example",
     "versionCode": 1000000,
     "versionName": "1.0.0",
diff --git a/docs/Samples/using_RNSurface/SampleApp/entry/hvigorfile.ts b/docs/Samples/using_RNSurface/SampleApp/entry/hvigorfile.ts
index d0f029bd2a2858b1701bf87bf3f67c00d5630c84..6650e7217be2e794b661d45f0d373a35d0026db4 100644
--- a/docs/Samples/using_RNSurface/SampleApp/entry/hvigorfile.ts
+++ b/docs/Samples/using_RNSurface/SampleApp/entry/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { hapTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/using_RNSurface/SampleApp/entry/src/main/ets/entryability/EntryAbility.ets b/docs/Samples/using_RNSurface/SampleApp/entry/src/main/ets/entryability/EntryAbility.ets
index e289b75c27ae6ddd16079a1cf9a9cdb56a41523f..32cb381b9261746b743783dcad12817d97e004bc 100644
--- a/docs/Samples/using_RNSurface/SampleApp/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/docs/Samples/using_RNSurface/SampleApp/entry/src/main/ets/entryability/EntryAbility.ets
@@ -6,13 +6,11 @@
  */
 
 import { RNAbility, } from '@rnoh/react-native-openharmony';
-
 import dataPreferences from '@ohos.data.preferences';
 import window from '@ohos.window';
 
 export let preferences: dataPreferences.Preferences | null = null;
 
-
 export default class EntryAbility extends RNAbility {
   getPagePath() {
     return 'pages/Index';
@@ -28,7 +26,6 @@ export default class EntryAbility extends RNAbility {
     } catch (err) {
       console.error('Failed to get preferences');
     }
-
     AppStorage.setOrCreate('RNAbility', this);
   }
 }
diff --git a/docs/Samples/using_RNSurface/SampleApp/entry/src/main/ets/pages/Index.ets b/docs/Samples/using_RNSurface/SampleApp/entry/src/main/ets/pages/Index.ets
index 2660a58eeb8a79d18c16931da451936b15da99b5..721b3cff4a01704de0952627b16750594f63b3a1 100644
--- a/docs/Samples/using_RNSurface/SampleApp/entry/src/main/ets/pages/Index.ets
+++ b/docs/Samples/using_RNSurface/SampleApp/entry/src/main/ets/pages/Index.ets
@@ -20,7 +20,8 @@ import {
 
 @Builder
 function buildCustomComponent(ctx: ComponentBuilderContext) {
-  Stack() {}
+  Stack() {
+  }
   .position({ x: 0, y: 0 })
 }
 
@@ -52,34 +53,33 @@ export struct Index {
       enableCAPIArchitecture: true,
       arkTsComponentNames: []
     });
-    await this.instance.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager, this.bundlePath)).then(() => {
-      this.isBundleReady = true;
-      console.log('instance 加载完成' + this.bundlePath);
-    })
-
+    await this.instance.runJSBundle(new ResourceJSBundleProvider(getContext().resourceManager, this.bundlePath))
+      .then(() => {
+        this.isBundleReady = true;
+        console.log('instance 加载完成' + this.bundlePath);
+      })
   }
 
   build() {
     NavDestination() {
       if (this.isBundleReady) {
-      Column() {
-        RNSurface({
-          surfaceConfig: {
-            appKey: this.moduleName,
-          },
-          ctx: new RNComponentContext(
-            RNOHContext.fromCoreContext(this.rnohCoreContext!, this.instance),
-            wrappedCustomRNComponentBuilder,
-            wrapBuilder(buildRNComponentForTag),
-            new Map()
-          ),
-        })
-      }
-      .width('100%')
-      .height('100%')
+        Column() {
+          RNSurface({
+            surfaceConfig: {
+              appKey: this.moduleName,
+            },
+            ctx: new RNComponentContext(
+              RNOHContext.fromCoreContext(this.rnohCoreContext!, this.instance),
+              wrappedCustomRNComponentBuilder,
+              wrapBuilder(buildRNComponentForTag),
+              new Map()
+            ),
+          })
+        }
+        .width('100%')
+        .height('100%')
       }
     }
-
   }
 }
    
\ No newline at end of file
diff --git a/docs/Samples/using_RNSurface/SampleApp/hvigorfile.ts b/docs/Samples/using_RNSurface/SampleApp/hvigorfile.ts
index 549b0badab9ef99722e947c60855c7dd266ae506..3ba030761c1b3d33a633b8c22b41961b782bf7b2 100644
--- a/docs/Samples/using_RNSurface/SampleApp/hvigorfile.ts
+++ b/docs/Samples/using_RNSurface/SampleApp/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { appTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: appTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: appTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/using_RNSurface/SampleProject/MainProject/bundle.config.js b/docs/Samples/using_RNSurface/SampleProject/MainProject/bundle.config.js
index 025518477d890f14d83a5b2571318ebff4cdf662..5fb379d24099143b1387cffdf493fc2412c4d745 100644
--- a/docs/Samples/using_RNSurface/SampleProject/MainProject/bundle.config.js
+++ b/docs/Samples/using_RNSurface/SampleProject/MainProject/bundle.config.js
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
     reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
diff --git a/docs/Samples/using_RNSurface/SampleProject/MainProject/metro.config.js b/docs/Samples/using_RNSurface/SampleProject/MainProject/metro.config.js
index c8d6579789792beb12445eca5d5c879bdce967b3..45508b0a05e8757e14baf97cec5c94047c9cd8be 100644
--- a/docs/Samples/using_RNSurface/SampleProject/MainProject/metro.config.js
+++ b/docs/Samples/using_RNSurface/SampleProject/MainProject/metro.config.js
@@ -5,23 +5,23 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 /**
  * @type {import("metro-config").ConfigT}
  */
 const config = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
+    transformer: {
+        getTransformOptions: async () => ({
+            transform: {
+                experimentalImportSupport: false,
+                inlineRequires: true,
+            },
+        }),
+    },
 };
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
-  reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
+    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
 }), config);
diff --git a/docs/Samples/using_RNSurface/SampleProject/MainProject/src/bundles/MainPage.tsx b/docs/Samples/using_RNSurface/SampleProject/MainProject/src/bundles/MainPage.tsx
index cfa89db8356ef45a64a682f0c96b2abdd4530328..2a95283907001f0473d9725a4d2cb4bee1bf3934 100644
--- a/docs/Samples/using_RNSurface/SampleProject/MainProject/src/bundles/MainPage.tsx
+++ b/docs/Samples/using_RNSurface/SampleProject/MainProject/src/bundles/MainPage.tsx
@@ -5,13 +5,13 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-import {Text, StyleSheet, View, Animated, Pressable} from 'react-native';
-import React, {useEffect, useRef} from 'react';
+import { Text, StyleSheet, View, Animated, Pressable } from 'react-native';
+import React, { useEffect, useRef } from 'react';
 
 function App() {
   return (
     // <View style={{marginTop: 200}}>
-      <Text style={{fontSize: 50, alignSelf:'center', color: 'red'}}>这是RN页面</Text>
+    <Text style={{ fontSize: 50, alignSelf: 'center', color: 'red' }}>这是RN页面</Text>
     // </View>
   );
 }
diff --git a/docs/Samples/using_turboModule/SampleApp/AppScope/app.json5 b/docs/Samples/using_turboModule/SampleApp/AppScope/app.json5
index b1f2a5955e5edea12691059baa1cbe276a78c59e..d06a59579e20507769ff88e5afa7cd43e5857227 100644
--- a/docs/Samples/using_turboModule/SampleApp/AppScope/app.json5
+++ b/docs/Samples/using_turboModule/SampleApp/AppScope/app.json5
@@ -1,6 +1,6 @@
 {
   "app": {
-    "bundleName": "com.example.sampleApp",
+    "bundleName": "com.example.turbomodule",
     "vendor": "example",
     "versionCode": 1000000,
     "versionName": "1.0.0",
diff --git a/docs/Samples/using_turboModule/SampleApp/entry/hvigorfile.ts b/docs/Samples/using_turboModule/SampleApp/entry/hvigorfile.ts
index d0f029bd2a2858b1701bf87bf3f67c00d5630c84..6650e7217be2e794b661d45f0d373a35d0026db4 100644
--- a/docs/Samples/using_turboModule/SampleApp/entry/hvigorfile.ts
+++ b/docs/Samples/using_turboModule/SampleApp/entry/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { hapTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: hapTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ets b/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ets
index bb674f04d7352d544dc59fe5f242fe5e97fcfab7..d891cba0fb935922cacd8bbb4ebf93838e894dd2 100644
--- a/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ets
+++ b/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ets
@@ -47,7 +47,9 @@ export class SampleTurboModule extends TurboModule {
   }
 
   getPreferencesData(key: string): string {
-    if (!preferences) return 'null';
+    if (!preferences) {
+      return 'null';
+    }
     try {
       let val = preferences.getSync(key, '默认值') as string
       return val
@@ -57,7 +59,9 @@ export class SampleTurboModule extends TurboModule {
   }
 
   putPreferencesData(key: string, value: string) {
-    if (!preferences) return;
+    if (!preferences) {
+      return;
+    }
     preferences.putSync(key, value)
     try {
       preferences.flush((err: BusinessError) => {
diff --git a/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ts b/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ts
index f50a4bc16eac3b3941f57c95d37ad7657dd5b668..30a0d87734007a72d873b6fe52a949fad87538b3 100644
--- a/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ts
+++ b/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/TurboModule/SampleTurboModule.ts
@@ -68,7 +68,9 @@ export class SampleTurboModule extends TurboModule {
   }
 
   getPreferencesData(key: string): string {
-    if (!SampleTurboModule.preferences) return 'null';
+    if (!SampleTurboModule.preferences) {
+      return 'null';
+    }
     try {
       let val = SampleTurboModule.preferences.getSync(key, '默认值') as string;
       return val;
@@ -78,7 +80,9 @@ export class SampleTurboModule extends TurboModule {
   }
 
   putPreferencesData(key: string, value: string) {
-    if (!SampleTurboModule.preferences) return;
+    if (!SampleTurboModule.preferences) {
+      return;
+    }
     SampleTurboModule.preferences.putSync(key, value)
     try {
       SampleTurboModule.preferences.flush((err: BusinessError) => {
diff --git a/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/TurboModule/SampleWorkerTurboModule.ets b/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/TurboModule/SampleWorkerTurboModule.ets
index 331271e6aab38dcdc45c95d9b4c83fdfe97df7fc..54e35c1d406a522412b07909a07885088dac6e60 100644
--- a/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/TurboModule/SampleWorkerTurboModule.ets
+++ b/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/TurboModule/SampleWorkerTurboModule.ets
@@ -12,8 +12,7 @@ import { AnyThreadTurboModule, } from '@rnoh/react-native-openharmony/ts';
 import { preferences } from '../entryability/EntryAbility';
 import { BusinessError } from '@ohos.base';
 
-export class SampleWorkerTurboModule extends AnyThreadTurboModule{
-
+export class SampleWorkerTurboModule extends AnyThreadTurboModule {
   registerFunction(onComplete: (value: string) => void): void {
     console.log(`RNOH SampleTurboModule::registerFunction + trigger`);
     setTimeout(() => {
@@ -38,7 +37,9 @@ export class SampleWorkerTurboModule extends AnyThreadTurboModule{
   }
 
   getPreferencesData(key: string): string {
-    if (!preferences) return 'null';
+    if (!preferences) {
+      return 'null';
+    }
     try {
       let val = preferences.getSync(key, '默认值') as string;
       return val;
@@ -48,7 +49,9 @@ export class SampleWorkerTurboModule extends AnyThreadTurboModule{
   }
 
   putPreferencesData(key: string, value: string) {
-    if (!preferences) return;
+    if (!preferences) {
+      return;
+    }
     preferences.putSync(key, value);
     try {
       preferences.flush((err: BusinessError) => {
diff --git a/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/entryability/EntryAbility.ets b/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/entryability/EntryAbility.ets
index f9649aa70f85f0bd8d886b31eb2f7491588fc25b..1b166fb093584835c526387eea34cc2dfd359d99 100644
--- a/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/entryability/EntryAbility.ets
+++ b/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/entryability/EntryAbility.ets
@@ -6,13 +6,11 @@
  */
 
 import { RNAbility, } from '@rnoh/react-native-openharmony';
-
 import dataPreferences from '@ohos.data.preferences';
 import window from '@ohos.window';
 
 export let preferences: dataPreferences.Preferences | null = null;
 
-
 export default class EntryAbility extends RNAbility {
   getPagePath() {
     return 'pages/Index';
@@ -32,7 +30,6 @@ export default class EntryAbility extends RNAbility {
     } catch (err) {
       console.error('Failed to get preferences');
     }
-
     AppStorage.setOrCreate('RNAbility', this);
   }
 }
diff --git a/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/pages/Index.ets b/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/pages/Index.ets
index 7b23c607faa9a0fc68cf564a7f24e7457669a604..b6849ea1fcf7028c8dfbbdc48a6d4040adb3d0b5 100644
--- a/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/pages/Index.ets
+++ b/docs/Samples/using_turboModule/SampleApp/entry/src/main/ets/pages/Index.ets
@@ -21,7 +21,8 @@ import { SampleTurboModulePackage } from '../TurboModule/SampleTurboModulePackag
 
 @Builder
 export function buildCustomComponent(ctx: ComponentBuilderContext) {
-  Stack() {}.position({ x: 0, y: 0 })
+  Stack() {
+  }.position({ x: 0, y: 0 })
 }
 
 const wrappedCustomRNComponentBuilder = wrapBuilder(buildCustomComponent);
@@ -41,7 +42,6 @@ export struct MultiSurface {
   private moduleName = 'App';
   @State isBundleReady: boolean = false;
 
-
   async aboutToAppear() {
     console.log("MultiSurface=====")
     if (!this.rnohCoreContext) {
@@ -71,7 +71,7 @@ export struct MultiSurface {
       new ResourceJSBundleProvider(
         getContext().resourceManager,
         this.bundlePath
-    )).then(() => {
+      )).then(() => {
       this.isBundleReady = true;
       console.log('instance 加载完成' + this.bundlePath);
     })
diff --git a/docs/Samples/using_turboModule/SampleApp/hvigorfile.ts b/docs/Samples/using_turboModule/SampleApp/hvigorfile.ts
index 549b0badab9ef99722e947c60855c7dd266ae506..3ba030761c1b3d33a633b8c22b41961b782bf7b2 100644
--- a/docs/Samples/using_turboModule/SampleApp/hvigorfile.ts
+++ b/docs/Samples/using_turboModule/SampleApp/hvigorfile.ts
@@ -8,6 +8,6 @@
 import { appTasks } from '@ohos/hvigor-ohos-plugin';
 
 export default {
-    system: appTasks,  /* Built-in plugin of Hvigor. It cannot be modified. */
-    plugins:[]         /* Custom plugin to extend the functionality of Hvigor. */
+  system: appTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
+  plugins: []         /* Custom plugin to extend the functionality of Hvigor. */
 }
diff --git a/docs/Samples/using_turboModule/SampleProject/MainProject/demo.config.js b/docs/Samples/using_turboModule/SampleProject/MainProject/demo.config.js
index 025518477d890f14d83a5b2571318ebff4cdf662..5fb379d24099143b1387cffdf493fc2412c4d745 100644
--- a/docs/Samples/using_turboModule/SampleProject/MainProject/demo.config.js
+++ b/docs/Samples/using_turboModule/SampleProject/MainProject/demo.config.js
@@ -5,8 +5,8 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
     reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
diff --git a/docs/Samples/using_turboModule/SampleProject/MainProject/metro.config.js b/docs/Samples/using_turboModule/SampleProject/MainProject/metro.config.js
index c8d6579789792beb12445eca5d5c879bdce967b3..45508b0a05e8757e14baf97cec5c94047c9cd8be 100644
--- a/docs/Samples/using_turboModule/SampleProject/MainProject/metro.config.js
+++ b/docs/Samples/using_turboModule/SampleProject/MainProject/metro.config.js
@@ -5,23 +5,23 @@
  * LICENSE-MIT file in the root directory of this source tree.
  */
 
-const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
-const {createHarmonyMetroConfig} = require('@react-native-oh/react-native-harmony/metro.config');
+const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+const { createHarmonyMetroConfig } = require('@react-native-oh/react-native-harmony/metro.config');
 
 /**
  * @type {import("metro-config").ConfigT}
  */
 const config = {
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
+    transformer: {
+        getTransformOptions: async () => ({
+            transform: {
+                experimentalImportSupport: false,
+                inlineRequires: true,
+            },
+        }),
+    },
 };
 
 module.exports = mergeConfig(getDefaultConfig(__dirname), createHarmonyMetroConfig({
-  reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
+    reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
 }), config);
diff --git a/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/Demo/MainPage.tsx b/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/Demo/MainPage.tsx
index 5bf88358294642188760f2a420924181ac46fb45..9e889e20713b5db4d72b8e4445c6a07d06ef7d79 100644
--- a/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/Demo/MainPage.tsx
+++ b/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/Demo/MainPage.tsx
@@ -35,7 +35,7 @@ function App() {
   const [nativeWorkerAsyncCallbackValue, setNativeWorkerAsyncCallbackValue] = useState("");
 
   return (
-    <ScrollView style={{marginTop: 30}}>
+    <ScrollView style={{ marginTop: 30 }}>
       <View style={styles.container}>
         <Button
           title={'•调用TurboModule回调方法：' + nativeCallbackValue}
diff --git a/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/Demo/index.js b/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/Demo/index.js
index bce77e1d581054a0b7388ba73640c97d6b245e90..48e0c2e8d1cf4871e748446d2470532c92c6f3b3 100644
--- a/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/Demo/index.js
+++ b/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/Demo/index.js
@@ -7,7 +7,7 @@
  * @format
  */
 
-import {AppRegistry} from 'react-native';
+import { AppRegistry } from 'react-native';
 import MainPage from './MainPage';
 
 AppRegistry.registerComponent('App', () => MainPage);
diff --git a/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/basic/NativeSampleTurboModule2.tsx b/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/basic/NativeSampleTurboModule2.tsx
index f32109956e0181801c1ac3d2a74725ea38e32376..d49e68b58dad936ba767cda3c32fa0d89af58187 100644
--- a/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/basic/NativeSampleTurboModule2.tsx
+++ b/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/basic/NativeSampleTurboModule2.tsx
@@ -17,8 +17,8 @@ export interface EnglishNovelModel {
     note: string
     dateline: string
     img: string
-  }
-  
+}
+
 export interface ResultModel {
     code: number
     result: EnglishNovelModel
@@ -31,12 +31,12 @@ export interface Error {
     stack?: string;
 }
 
-export interface SpecSampleTurboModule2 extends TurboModule {  
-    checkPwd(param:{}, success: (res: {})=>void, failure: (res: {})=>void): void;
+export interface SpecSampleTurboModule2 extends TurboModule {
+    checkPwd(param: {}, success: (res: {}) => void, failure: (res: {}) => void): void;
     eatFruit(fruit: Fruit): void;
     test(): void;
     getRequest(): Promise<ResultModel>;
-    getObject(obj:{}): void;
+    getObject(obj: {}): void;
 }
-  
+
 export default TurboModuleRegistry.getEnforcing<SpecSampleTurboModule2>('SampleTurboModule2');
\ No newline at end of file
diff --git a/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/basic/SampleTurboModule2.tsx b/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/basic/SampleTurboModule2.tsx
index 296a34ed2f25d19d35dea365a659ec284a7738ad..7bf33ead9a3118b315ccb72599b4c17f2141f613 100644
--- a/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/basic/SampleTurboModule2.tsx
+++ b/docs/Samples/using_turboModule/SampleProject/MainProject/src/bundles/basic/SampleTurboModule2.tsx
@@ -17,8 +17,8 @@ export interface EnglishNovelModel {
     note: string
     dateline: string
     img: string
-  }
-  
+}
+
 export interface ResultModel {
     code: number
     result: EnglishNovelModel
@@ -31,13 +31,13 @@ export interface Error {
     stack?: string;
 }
 
-export interface SpecSampleTurboModule2 extends TurboModule {  
-    checkPwd(param:{}, success: (res: {})=>void, failure: (res: {})=>void): void;
+export interface SpecSampleTurboModule2 extends TurboModule {
+    checkPwd(param: {}, success: (res: {}) => void, failure: (res: {}) => void): void;
     eatFruit(fruit: Fruit): void;
     test(): void;
     getRequest(): Promise<ResultModel>;
-    getObject(obj:{}): void;
+    getObject(obj: {}): void;
     callFunction(): void;
 }
-  
+
 export default TurboModuleRegistry.getEnforcing<SpecSampleTurboModule2>('SampleTurboModule2');
\ No newline at end of file
diff --git a/docs/zh-cn/release-notes/react-native-harmony-v5.1.0.202.md b/docs/zh-cn/release-notes/react-native-harmony-v5.1.0.203.md
similarity index 52%
rename from docs/zh-cn/release-notes/react-native-harmony-v5.1.0.202.md
rename to docs/zh-cn/release-notes/react-native-harmony-v5.1.0.203.md
index 14eff845c0b0e15588d50635ef38c48115828363..0e2d3c135dbe7dd4095cb4d7bfd5285819bef0a2 100644
--- a/docs/zh-cn/release-notes/react-native-harmony-v5.1.0.202.md
+++ b/docs/zh-cn/release-notes/react-native-harmony-v5.1.0.203.md
@@ -2,15 +2,15 @@
 当前React Native鸿蒙版本基于社区RN 0.72.5进行适配，发布版本信息如下：
 | 名称                          | 版本号                            |
 | ----------------------------- | -------------------------------|
-| react-native-harmony.tgz        | 0.72.56 |
+| react-native-harmony.tgz        | 0.72.57 |
 | react-native-harmony-cli.tgz    | 0.0.28 |
-| react_native_openharmony-5.1.0.202.har                          | 0.72.56 |
-| react_native_openharmony_release-5.1.0.202.har                  | 5.1.0.202 |
+| react_native_openharmony-5.1.0.203.har                          | 0.72.57 |
+| react_native_openharmony_release-5.1.0.203.har                  | 5.1.0.203 |
 
 配套IDE、SDK版本和手机ROM：
 | 名称                          | 版本号                            |
 | ----------------------------- | -------------------------------|
-| DevEco Studio     | DevEco Studio 5.0.7.52 |
-| HarmonyOS SDK     | HarmonyOS SDK 5.0.2.123(SP16) |
-| 手机ROM           | ALN-AL00 205.0.0.123(SP16C00E121R4P25) <br> ALN-AL80 205.0.0.123(SP16C00E121R4P25) <br> BRA-AL00 205.0.0.123(SP16C00E121R4P25) |
+| DevEco Studio     | DevEco Studio 5.0.7.121 |
+| HarmonyOS SDK     | HarmonyOS SDK 5.0.2.123(SP18) |
+| 手机ROM           | ALN-AL00 205.0.0.123(SP19C00E121R4P25) <br> ALN-AL80 205.0.0.123(SP19C00E121R4P25) <br> BRA-AL00 205.0.0.123(SP19C00E121R4P25) |
 
diff --git "a/docs/zh-cn/\347\211\210\346\234\254\350\257\264\346\230\216.md" "b/docs/zh-cn/\347\211\210\346\234\254\350\257\264\346\230\216.md"
index 2ad5faa1602c1e5fb21fc1c5f67192510add60d5..7bc6f8a0f1884904eea5f34b46333ea2694c9fd8 100644
--- "a/docs/zh-cn/\347\211\210\346\234\254\350\257\264\346\230\216.md"
+++ "b/docs/zh-cn/\347\211\210\346\234\254\350\257\264\346\230\216.md"
@@ -8,4 +8,4 @@
 - [RNOH v5.0.0.812（2024-12-14）](./release-notes/react-native-harmony-v5.0.0.812.md)
 - [RNOH v5.0.0.813（2024-12-26）](./release-notes/react-native-harmony-v5.0.0.813.md)
 - [RNOH v5.1.0.111（2025-01-25）](./release-notes/react-native-harmony-v5.1.0.111.md)
-- [RNOH v5.1.0.202（2025-02-08）](./release-notes/react-native-harmony-v5.1.0.202.md)(非正式发布)
\ No newline at end of file
+- [RNOH v5.1.0.203（2025-02-13）](./release-notes/react-native-harmony-v5.1.0.203.md)(非正式发布)
\ No newline at end of file
diff --git a/react-native-harmony-sample-package/package.json b/react-native-harmony-sample-package/package.json
index bbeb2350bdcf9c09a0c31c6a50e4e9daf10d231b..d189bd788c394c5227d02085c310edd668f14e3e 100644
--- a/react-native-harmony-sample-package/package.json
+++ b/react-native-harmony-sample-package/package.json
@@ -8,7 +8,7 @@
     "pack:harmony": "react-native pack-harmony --oh-module-path ../tester/harmony/sample_package --harmony-dir-path ./harmony --package-json-path ./package.json",
     "codegen-lib": "react-native codegen-lib-harmony --no-safety-check --npm-package-name react-native-harmony-sample-package-2 --cpp-output-path ../tester/harmony/sample_package/src/main/cpp/generated --ets-output-path ../tester/harmony/sample_package/src/main/ets/generated --cpp-components-spec-paths ./src/specs/codegen-lib/CodegenLibCppSampleNativeComponent.ts --turbo-modules-spec-paths ./src/specs/codegen-lib/NativeCodegenLibSampleModule.ts --arkts-components-spec-paths ./src/specs/codegen-lib/CodegenLibArkTSSampleNativeComponent.ts",
     "install:local-cli": "cd ../react-native-harmony-cli && npm pack && cd ../react-native-harmony-sample-package && npm i ../react-native-harmony-cli/rnoh-react-native-harmony-cli-0.0.26.tgz",
-    "install:rn_harmony": "cd ../react-native-harmony && npm pack && cd ../react-native-harmony-sample-package && npm uninstall react-native-harmony && npm i react-native-harmony@file:../react-native-harmony/rnoh-react-native-harmony-0.72.56.tgz"
+    "install:rn_harmony": "cd ../react-native-harmony && npm pack && cd ../react-native-harmony-sample-package && npm uninstall react-native-harmony && npm i react-native-harmony@file:../react-native-harmony/rnoh-react-native-harmony-0.72.57.tgz"
   },
   "keywords": [],
   "author": "",
diff --git a/react-native-harmony/package.json b/react-native-harmony/package.json
index cc57a7c592dedbe8c38043e793411f5a1b4efa81..9030d3154b5533603741c2c2ee4e0e9d69642af8 100644
--- a/react-native-harmony/package.json
+++ b/react-native-harmony/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rnoh/react-native-harmony",
-  "version": "0.72.56",
+  "version": "0.72.57",
   "description": "",
   "scripts": {
     "install:local-cli": "cd ../react-native-harmony-cli && npm pack && cd ../react-native-harmony && npm i ../react-native-harmony-cli/rnoh-react-native-harmony-cli-0.0.25.tgz && cd ../react-native-harmony",
diff --git a/tester/harmony/react_native_openharmony/CHANGELOG.md b/tester/harmony/react_native_openharmony/CHANGELOG.md
index 07c760ca3471feef5032f6b73b7892d4cabeed6e..5c7f6f073570ea830092e28feae0763704196544 100644
--- a/tester/harmony/react_native_openharmony/CHANGELOG.md
+++ b/tester/harmony/react_native_openharmony/CHANGELOG.md
@@ -1,4 +1,13 @@
 # Changelog
+
+## v0.72.57
+- chore: update to version 0.72.57,([e10c9b86e](https://gitee.com/openharmony-sig/ohos_react_native/commit/e10c9b86e27d638261e28d8f18048bafb5ef47a1))
+- fix:crash when Animated remove native event,([62fd10343](https://gitee.com/openharmony-sig/ohos_react_native/commit/62fd10343f8061dac00ad3c0f72ccc45855b15ec))
+- fix lineHeight inconsistency,([325a3319c](https://gitee.com/openharmony-sig/ohos_react_native/commit/325a3319c642880e007aa0cffcebe8b32cc351ef))
+- chore: update to version 5.1.0.202(0.72.56),([6d5003245](https://gitee.com/openharmony-sig/ohos_react_native/commit/6d5003245109243b330adeb32156a0fe9de28575))
+- fix(codecheck): unsafe memcpy,([9b42afd1a](https://gitee.com/openharmony-sig/ohos_react_native/commit/9b42afd1aa3aa6c4200e51577aa1260fdd75479d))
+- feat(mmap): speed up bundle loading with mmap,([1451c57a5](https://gitee.com/openharmony-sig/ohos_react_native/commit/1451c57a5c5a63607a0020c1b1ca4cb861372805))
+
 ## v0.72.56
 - fix: 解决bundle加载状态精准度问题,([d6152766](https://gitee.com/openharmony-sig/ohos_react_native/commit/d6152766fc9d4f3653aaf3c1c41db6802a4a5a3c))
 - fix: Fix the issue of accessibility and inability to click,([749e1142](https://gitee.com/openharmony-sig/ohos_react_native/commit/749e114265807198047a0d9b9a0e5838e529575c))
diff --git a/tester/harmony/react_native_openharmony/oh-package.json5 b/tester/harmony/react_native_openharmony/oh-package.json5
index 26ff81d71d14fbfa124cb8f8abbd35d66a7c06d2..09df47794bb4ce6d32878c11f0c93d727eda6f97 100644
--- a/tester/harmony/react_native_openharmony/oh-package.json5
+++ b/tester/harmony/react_native_openharmony/oh-package.json5
@@ -9,7 +9,7 @@
     org: '',
   },
   type: 'module',
-  version: '0.72.56',
+  version: '0.72.57',
   dependencies: {},
   main: 'index.ets',
   repository: 'https://gitee.com/openharmony-sig/ohos_react_native/tree/master/'
diff --git a/tester/harmony/react_native_openharmony/src/main/cpp/RNOHCorePackage/TurboModules/Animated/AnimatedNodesManager.cpp b/tester/harmony/react_native_openharmony/src/main/cpp/RNOHCorePackage/TurboModules/Animated/AnimatedNodesManager.cpp
index a0dbf8c1da8eb69233b46849d200d979135c8a8d..286ea2a00dcbbba77091eb1e32c681710761d8fd 100644
--- a/tester/harmony/react_native_openharmony/src/main/cpp/RNOHCorePackage/TurboModules/Animated/AnimatedNodesManager.cpp
+++ b/tester/harmony/react_native_openharmony/src/main/cpp/RNOHCorePackage/TurboModules/Animated/AnimatedNodesManager.cpp
@@ -139,8 +139,8 @@ void AnimatedNodesManager::removeAnimatedEventFromView(
       m_eventDrivers.begin(), m_eventDrivers.end(), [&](auto& driver) {
         return driver->getViewTag() == viewTag &&
             driver->getEventName() == eventName &&
-            driver->getNodeTag() == animatedValueTag;
-      }));
+            driver->getNodeTag() == animatedValueTag;}), 
+            m_eventDrivers.end());
     }
  
 }
diff --git a/tester/package.json b/tester/package.json
index 9a3744812ffd80c600c2d06ba8d30d957f28b13a..2c5d7e239719dd953bdee4af9d84cbb3e9bddf50 100644
--- a/tester/package.json
+++ b/tester/package.json
@@ -8,7 +8,7 @@
     "postinstall": "node ./scripts/create-build-profile && npm run reinstall:react_native_harmony && npm run reinstall:react_native_harmony_sample_package",
     "reinstall:react_native_harmony": "npm uninstall react-native-harmony && npm run pack_react_native_harmony && npm run install:react_native_harmony",
     "reinstall:react_native_harmony_sample_package": "npm uninstall react-native-harmony-sample-package && npm run pack_react_native_harmony_sample_package && npm run install:react_native_harmony_sample_package",
-    "install:react_native_harmony": "npm i react-native-harmony@file:../react-native-harmony/rnoh-react-native-harmony-0.72.56.tgz",
+    "install:react_native_harmony": "npm i react-native-harmony@file:../react-native-harmony/rnoh-react-native-harmony-0.72.57.tgz",
     "install:react_native_harmony_sample_package": "npm i ../react-native-harmony-sample-package/react-native-harmony-sample-package-1.0.0.tgz",
     "pack_react_native_harmony": "cd ../react-native-harmony && npm pack && cd ../tester",
     "pack_react_native_harmony_sample_package": "cd ../react-native-harmony-sample-package && npm run codegen-lib && npm pack && cd ../tester",
@@ -45,7 +45,7 @@
     "react": "18.2.0",
     "react-native": "0.72.5",
     "react-native-flipper-performance-plugin": "^0.4.0",
-    "react-native-harmony": "file:../react-native-harmony/rnoh-react-native-harmony-0.72.56.tgz",
+    "react-native-harmony": "file:../react-native-harmony/rnoh-react-native-harmony-0.72.57.tgz",
     "react-native-harmony-sample-package": "file:../react-native-harmony-sample-package/react-native-harmony-sample-package-1.0.0.tgz"
   },
   "devDependencies": {
diff --git a/tester/tests/AnimatedTest/AnimatedTest.tsx b/tester/tests/AnimatedTest/AnimatedTest.tsx
index a77cded78c24fd36490943be44b09e8be8794fbe..1b5db16a2b5d95d6d7ccd2ab79b6d20581a313dd 100644
--- a/tester/tests/AnimatedTest/AnimatedTest.tsx
+++ b/tester/tests/AnimatedTest/AnimatedTest.tsx
@@ -127,6 +127,9 @@ export function AnimatedTest() {
           <ColorInterpolationExample />
         </TestCase.Example>
       </TestSuite>
+      <TestCase.Example itShould="test event animated crash when detach native event">
+          <AnimatedDetachNativeEventCrashTest />
+        </TestCase.Example>
       <TestSuite name="forkEvent + unforkEvent">
         <TestCase.Example itShould="stop updating current offset after detaching listener (fork/unfork event)">
           <AnimatedForkUnforkEventTest />
@@ -141,6 +144,77 @@ export function AnimatedTest() {
   );
 }
 
+const AnimatedDetachNativeEventCrashTest = () => {
+  const ref = useRef<ScrollView>(null);
+  const animatedValue = new Animated.Value(0);
+  const translation = animatedValue.interpolate({
+    inputRange: [0, 200],
+    outputRange: [0, 200],
+    extrapolate: 'clamp',
+  });
+  let detach: any;
+  useEffect(() => {
+    if (ref !== null) {
+      // @ts-ignore
+      
+      detach = Animated.attachNativeEvent(ref.current, 'onScroll', [
+        {nativeEvent: {contentOffset: {y: animatedValue, x: animatedValue}}},
+      ]);
+    }
+  }, [ref]);
+  const detachNativeEvent = () => {
+    if (ref !== null) {
+      detach.detach();
+    }
+  }
+
+  return (
+    <View
+      style={{
+        width: '100%',
+        height: 100,
+        position: 'relative',
+        overflow: 'hidden',
+      }}>
+      <Button
+        label={'detach Native Event'}
+        onPress={detachNativeEvent}
+      />
+      <ScrollView
+        ref={ref}
+        style={{width: '100%', height: '100%'}}
+        contentContainerStyle={{alignItems: 'center', justifyContent: 'center'}}
+        scrollEventThrottle={16}>
+        {new Array(3).fill(0).map((_, idx) => {
+          return (
+            <View
+              key={idx}
+              style={{
+                width: '100%',
+                height: 50,
+                backgroundColor: 'gray',
+                marginBottom: 50,
+              }}
+            />
+          );
+        })}
+      </ScrollView>
+      <Animated.View
+        style={[
+          {
+            position: 'absolute',
+            bottom: 0,
+            transform: [{translateX: translation}],
+            width: 32,
+            height: 32,
+            backgroundColor: 'red',
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
 const AnimatedAttachNativeEventTest = () => {
   const ref = useRef<ScrollView>(null);
   const animatedValue = new Animated.Value(0);