From 9928f50d640f113495846a29e01b25d37530e2f3 Mon Sep 17 00:00:00 2001 From: quguiren Date: Thu, 11 Sep 2025 20:13:07 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#ICRHM5]=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A00.77=2020=E4=B8=AA=E4=B8=89=E6=96=B9=E5=BA=93=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: quguiren --- zh-cn/mixpanel-react-native.md | 556 ++++--- zh-cn/nativewind.md | 117 +- zh-cn/op-engineering-op-sqlite.md | 161 +- zh-cn/react-content-loader.md | 24 +- zh-cn/react-native-alipay.md | 636 ++++--- zh-cn/react-native-audio-recorder-player.md | 1482 +++++++++-------- zh-cn/react-native-context-menu-view.md | 97 +- zh-cn/react-native-create-thumbnail.md | 123 +- zh-cn/react-native-credit-card-input.md | 405 ++--- zh-cn/react-native-custom-keyboard.md | 40 +- zh-cn/react-native-gifted-charts.md | 1642 ++++++++++--------- zh-cn/react-native-idle-timer.md | 42 +- zh-cn/react-native-map-clustering.md | 25 +- zh-cn/react-native-material-ui.md | 29 +- zh-cn/react-native-safe-modules.md | 24 +- zh-cn/react-native-signature-capture.md | 114 +- zh-cn/react-native-snackbar.md | 141 +- zh-cn/react-native-system-setting.md | 104 +- zh-cn/react-native-text-input-mask.md | 46 +- zh-cn/react-native-theme-control.md | 185 ++- 20 files changed, 3666 insertions(+), 2327 deletions(-) diff --git a/zh-cn/mixpanel-react-native.md b/zh-cn/mixpanel-react-native.md index f6af7cdd..c383ba97 100644 --- a/zh-cn/mixpanel-react-native.md +++ b/zh-cn/mixpanel-react-native.md @@ -1,238 +1,318 @@ -> 模板版本：v0.2.2 - -

-

mixpanel-react-native

-

-

- - Supported platforms - - - License - -

- -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/mixpanel-react-native) - -## 安装与使用 - -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/mixpanel-react-native Releases](https://github.com/react-native-oh-library/mixpanel-react-native/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 - -进入到工程目录并输入以下命令： - - - -#### **npm** - -```bash -npm install @react-native-oh-tpl/mixpanel-react-native -``` - - -#### **yarn** - -```bash -yarn add @react-native-oh-tpl/mixpanel-react-native -``` - - - -下面的代码展示了这个库的基本使用场景： - -> [!WARNING] 使用时 import 的库名不变。 -> [!WARNING] 代码使用的 token值 需要在[ mixpanel 官网](https://mixpanel.com)上的项目设置中获取，事件发送后需要在[ mixpanel 官网](https://mixpanel.com)的项目分析中查看相应的数据 - -```js -import React from 'react'; -import {Button, SafeAreaView} from 'react-native'; -import {Mixpanel} from 'mixpanel-react-native'; - -const trackAutomaticEvents = false; -const token = 'Your Project Token'; -const mixpanel = new Mixpanel(token, trackAutomaticEvents); -mixpanel.init(); - -export default function MixpanelDemo() { - return ( - - - - - - - - - - - - - - - {this.state.playTime} / {this.state.duration} - - - - - - - - - - ); - } - - private onStatusPress = (e: any): void => { - const touchX = e.nativeEvent.locationX; - console.log(`touchX: ${touchX}`); - - const playWidth = - (this.state.currentPositionSec / this.state.currentDurationSec) * - (screenWidth - 56); - console.log(`currentPlayWidth: ${playWidth}`); - - const currentPosition = Math.round(this.state.currentPositionSec); - - if (playWidth && playWidth < touchX) { - const addSecs = Math.round(currentPosition + 1000); - this.audioRecorderPlayer.seekToPlayer(addSecs); - console.log(`addSecs: ${addSecs}`); - } else { - const subSecs = Math.round(currentPosition - 1000); - this.audioRecorderPlayer.seekToPlayer(subSecs); - console.log(`subSecs: ${subSecs}`); - } - }; - - private onStartRecord = async (): Promise => { - - const audioSet: AudioSet = { - AudioEncoderAndroid: AudioEncoderAndroidType.AAC, - AudioSourceAndroid: AudioSourceAndroidType.MIC, - AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high, - AVNumberOfChannelsKeyIOS: 2, - AVFormatIDKeyIOS: AVEncodingOption.aac, - OutputFormatAndroid: OutputFormatAndroidType.AAC_ADTS, - AudioSourceHarmony: AudioSourceHarmonyType.MIC, - AudioMimeHarmony: AudioMimeHarmonyType.AUDIO_AAC, - AudioFileFormatHarmony: AudioFormatHarmonyType.MPEG_4A, - AudioEncodingBitRateHarmony: 3200, - AudioSamplingRateHarmony: 44100, - AudioChannelsHarmony: 2, - }; - - console.log('audioSet', audioSet); - - const uri = await this.audioRecorderPlayer.startRecorder( - 'audio.m4a', - audioSet, - ); - - this.audioRecorderPlayer.addRecordBackListener((e: RecordBackType) => { - console.log('record-back', e); - this.setState({ - recordSecs: e.currentPosition, - recordTime: this.audioRecorderPlayer.mmssss( - Math.floor(e.currentPosition), - ), - }); - }); - - console.log(`uri: ${uri}`); - }; - - private onPauseRecord = async (): Promise => { - try { - const r = await this.audioRecorderPlayer.pauseRecorder(); - console.log(r); - } catch (err) { - console.log('pauseRecord', err); - } - }; - - private onResumeRecord = async (): Promise => { - await this.audioRecorderPlayer.resumeRecorder(); - }; - - private onStopRecord = async (): Promise => { - const result = await this.audioRecorderPlayer.stopRecorder(); - this.audioRecorderPlayer.removeRecordBackListener(); - this.setState({ - recordSecs: 0, - }); - console.log(result, '>>>>>>>stopRecorder'); - }; - - private onStartPlay = async (): Promise => { - console.log('onStartPlay'); - - try { - - - const msg = await this.audioRecorderPlayer.startPlayer('https://sis-sample-audio.obs.cn-north-1.myhuaweicloud.com/16k16bit.mp3', { 'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64; rv:12.0) Gecko/20100101 Firefox/21.0' }); - const volume = await this.audioRecorderPlayer.setVolume(1); - this.audioRecorderPlayer.addPlayBackListener((e: PlayBackType) => { - console.log('playBackListener', e); - this.setState({ - currentPositionSec: e.currentPosition, - currentDurationSec: e.duration, - playTime: this.audioRecorderPlayer.mmssss(e.currentPosition), - duration: this.audioRecorderPlayer.mmssss(Math.floor(e.duration)), - }); - }); - - } catch (err) { - console.log('startPlayer error', err); - } - }; - - private onPausePlay = async (): Promise => { - await this.audioRecorderPlayer.pausePlayer(); - }; - - private onResumePlay = async (): Promise => { - await this.audioRecorderPlayer.resumePlayer(); - }; - - private onStopPlay = async (): Promise => { - console.log('onStopPlay'); - this.audioRecorderPlayer.stopPlayer(); - this.audioRecorderPlayer.removePlayBackListener(); - }; -} - -export default Page; - -``` -## Link - -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 - -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` - -### 在工程根目录的 `oh-package.json5` 添加 overrides 字段 - -```json -{ - ... - "overrides": { - "@rnoh/react-native-openharmony" : "./react_native_openharmony" - } -} -``` -### 引入原生端代码 - -目前有两种方法： - -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 - -方法一：通过 har 包引入（推荐） - -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "@rnoh/react-native-openharmony": "file:../react_native_openharmony", - - "@react-native-oh-tpl/react-native-audio-recorder-player": "file:../../node_modules/@react-native-oh-tpl/react-native-audio-recorder-player/harmony/audio_recorder_player.har" - } -``` -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` -方法二：直接链接源码 - -> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) - -### 配置 CMakeLists 和引入 RNAudioRecorderPlayerPackage - -打开 `entry/src/main/cpp/CMakeLists.txt`，添加： - -```diff -project(rnapp) -cmake_minimum_required(VERSION 3.4.1) -set(CMAKE_SKIP_BUILD_RPATH TRUE) -set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") -set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") -+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") -set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") -set(LOG_VERBOSITY_LEVEL 1) -set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") -set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") -set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use -add_compile_definitions(WITH_HITRACE_SYSTRACE) - -add_subdirectory("${RNOH_CPP_DIR}" ./rn) - -# RNOH_BEGIN: manual_package_linking_1 -add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-audio-recorder-player/src/main/cpp" ./audio_recorder_player) -# RNOH_END: manual_package_linking_1 - -file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") - -add_library(rnoh_app SHARED - ${GENERATED_CPP_FILES} - "./PackageProvider.cpp" - "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" -) -target_link_libraries(rnoh_app PUBLIC rnoh) - -# RNOH_BEGIN: manual_package_linking_2 -target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) -+ target_link_libraries(rnoh_app PUBLIC rnoh_audio_recorder_player) -# RNOH_END: manual_package_linking_2 -``` -打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： - -```diff -#include "RNOH/PackageProvider.h" -#include "generated/RNOHGeneratedPackage.h" -#include "SamplePackage.h" -+ #include "RNAudioRecorderPlayerPackage.h" - -using namespace rnoh; - -std::vector> PackageProvider::getPackages(Package::Context ctx) { - return { - std::make_shared(ctx), - std::make_shared(ctx), -+ std::make_shared(ctx) - }; -} -``` -### 在 ArkTs 侧引入 react-native-audio-recorder-player Package - -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： - -```diff -+ import {RNAudioRecorderPlayerPackage} from '@react-native-oh-tpl/react-native-audio-recorder-player/ts'; - -export function createRNPackages(ctx: RNPackageContext): RNPackage[] { - return [ - new SamplePackage(ctx), -+ new RNAudioRecorderPlayerPackage(ctx) - ]; -} -``` -### 运行 - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` -然后编译、运行即可。 - -## 约束与限制 - -### 兼容性 - -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-audio-recorder-player Releases](https://github.com/react-native-oh-library/react-native-audio-recorder-player/releases) - -### 权限要求 - -#### 在 entry 目录下的module.json5中添加权限 - -打开 `entry/src/main/module.json5`，添加： - -```diff -... -"requestPermissions": [ -+ {"name": "ohos.permission.INTERNET"},//网络播放音频需添加 -+ { -+ "name": "ohos.permission.MICROPHONE", -+ "reason": "$string:Access_Create_Audio", -+ "usedScene": { -+ "abilities": [ -+ "EntryAbility" -+ ], -+ "when": "always" -+ } -+ }, - ] -] -``` -#### 在 entry 目录下添加申请权限的原因 - -打开 `entry/src/main/resources/base/element/string.json`，添加： - -```diff -... -{ - "string": [ -+ { -+ "name": "Access_Create_Audio", -+ "value": "access create Audio" -+ }， - ] -} -``` -## API - -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | -| `mmss` | Convert milliseconds to minute:second string | function(milliseconds:number): string | No | Android，iOS | yes | -| `mmssss` | Convert milliseconds to minute:second:milliseconds string | function(milliseconds:number): string | No | Android，iOS | yes | -| `setSubscriptionDuration` | Set default callback time when starting recorder or player. Default to 0.5 which is 500ms| function(seconds:float):void | No | Android，iOS | yes | -| `addRecordBackListener` |Get callback from native module. Will receive currentPosition, currentMetering (if configured in startRecorder). | function(callBack:(value:RecordBackType)=>void): void | No | Android，iOS | yes | -| `removeRecordBackListener` |Removes recordBack listener. | function(): void | No | Android，iOS | yes | -| `addPlayBackListener` | Get callback from native module. Will receive duration, currentPosition. | function(callBack:(value: PlayBackType)=>void): void | No | Android，iOS | yes | -| `removePlayBackListener` | Removes playback listener. | function(): void | No | Android，iOS | yes | -| `startRecorder` |Start recording. Not passing uri will save audio in default location. | function(uri?:string,audioSets?: AudioSet,meteringEnabled?: boolean): Promise< string > | No | Android，iOS | yes | -| `pauseRecorder` | Pause recording. | function() : Promise< string > | No | Android，iOS | yes | -| `resumeRecorder` | Resume recording. | function() : Promise< string > | No | Android，iOS | yes | -| `stopRecorder` | Stop recording. | function() : Promise< string > | No | Android，iOS | yes | -| `startPlayer` | Start playing. Not passing the param will play audio in default location. | function(uri?:string,httpHeaders?:Record) : Promise< string > | No | Android，iOS | yes | -| `stopPlayer` | Stop playing. | function() : Promise< string > | No | Android，iOS | yes | -| `pausePlayer` | Pause playing. | function() : Promise< string > | No | Android，iOS | yes | -| `resumePlayer` | Resume playing. | function() : Promise< string > | No | Android，iOS | yes | -| `seekToPlayer` | Seek audio. | function(milliseconds:number) : Promise< string > | No | Android，iOS | yes | -| `setVolume` | Set volume of audio player (default 1.0, range: 0.0 ~ 1.0). | function(volume:float) : Promise< string > | No | Android，iOS | yes | - -## 遗留问题 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/hyochan/react-native-audio-recorder-player/blob/main/LICENSE) ，请自由地享受和参与开源。 +> 模板版本：v0.2.2 + +

+

react-native-audio-recorder-player

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-audio-recorder-player) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 3.6.10 | [@react-native-oh-tpl/react-native-audio-recorder-player Releases](https://github.com/react-native-oh-library/react-native-audio-recorder-player/releases) | 0.72 | +| 3.6.14 | [@react-native-ohos/react-native-audio-recorder-player Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 + +进入到工程目录并输入以下命令： + +#### **npm** + +```bash +# V3.6.10 +npm install @react-native-oh-tpl/react-native-audio-recorder-player + +# V3.6.14 +npm install @react-native-ohos/react-native-audio-recorder-player +``` + +#### **yarn** + +```bash +# V3.6.10 +yarn add @react-native-oh-tpl/react-native-audio-recorder-player + +# V3.6.14 +yarn add @react-native-ohos/react-native-audio-recorder-player +``` + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import AudioRecorderPlayer, { + AVEncoderAudioQualityIOSType, + AVEncodingOption, + AudioEncoderAndroidType, + AudioSourceAndroidType, + OutputFormatAndroidType, + AudioMimeHarmonyType, + AudioFormatHarmonyType, + AudioSourceHarmonyType, + AudioSet +} from 'react-native-audio-recorder-player'; import type { + PlayBackType, + RecordBackType, +} from 'react-native-audio-recorder-player'; + +import { + Dimensions, + Platform, + ActivityIndicator, + Image, + SafeAreaView, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import React, { Component } from 'react'; + +import type { ReactElement, ReactNode } from 'react'; + +const stylesButton: any = StyleSheet.create({ + btn: { + backgroundColor: 'transparent', + alignSelf: 'center', + borderRadius: 4, + borderWidth: 2, + width: 320, + height: 52, + borderColor: 'white', + + alignItems: 'center', + justifyContent: 'center', + }, + btnDisabled: { + backgroundColor: 'rgb(243,243,243)', + alignSelf: 'center', + borderRadius: 4, + borderWidth: 2, + width: 320, + height: 52, + borderColor: '#333', + + alignItems: 'center', + justifyContent: 'center', + }, + txt: { + fontSize: 14, + color: 'white', + }, + imgLeft: { + width: 24, + height: 24, + position: 'absolute', + left: 16, + }, +}); + +interface ItemProps { + children?: ReactNode; + isLoading?: boolean; + isDisabled?: boolean; + onPress?: () => void; + style?: any; + disabledStyle?: any; + textStyle?: any; + imgLeftSrc?: any; + imgLeftStyle?: any; + indicatorColor?: string; + activeOpacity?: number; +} + +class Button extends Component { + private static defaultProps: Partial = { + isLoading: false, + isDisabled: false, + style: stylesButton.btn, + textStyle: stylesButton.txt, + imgLeftStyle: stylesButton.imgLeft, + indicatorColor: 'white', + activeOpacity: 0.5, + }; + + constructor(props: ItemProps) { + super(props); + this.state = {}; + } + + public render(): ReactElement { + if (this.props.isDisabled) { + return ( + + {this.props.children} + + ); + } + + if (this.props.isLoading) { + return ( + + + + ); + } + + return ( + + + {this.props.imgLeftSrc ? ( + + ) : null} + {this.props.children} + + + ); + } +} + +const styles: any = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#455A64', + flexDirection: 'column', + alignItems: 'center', + height: Dimensions.get('screen').height + }, + titleTxt: { + marginTop: 100, + color: 'white', + fontSize: 28, + }, + viewRecorder: { + marginTop: 40, + width: '100%', + alignItems: 'center', + }, + recordBtnWrapper: { + flexDirection: 'row', + }, + viewPlayer: { + marginTop: 60, + alignSelf: 'stretch', + alignItems: 'center', + }, + viewBarWrapper: { + marginTop: 28, + marginHorizontal: 28, + alignSelf: 'stretch', + }, + viewBar: { + backgroundColor: '#ccc', + height: 4, + alignSelf: 'stretch', + }, + viewBarPlay: { + backgroundColor: 'white', + height: 4, + width: 0, + }, + playStatusTxt: { + marginTop: 8, + color: '#ccc', + }, + playBtnWrapper: { + flexDirection: 'row', + marginTop: 40, + }, + btn: { + borderColor: 'white', + borderWidth: 1, + }, + txt: { + color: 'white', + fontSize: 14, + marginHorizontal: 8, + marginVertical: 4, + }, + txtRecordCounter: { + marginTop: 32, + color: 'white', + fontSize: 20, + textAlignVertical: 'center', + fontWeight: '200', + fontFamily: 'Helvetica Neue', + letterSpacing: 3, + width: 300 + }, + txtCounter: { + marginTop: 12, + color: 'white', + fontSize: 20, + textAlignVertical: 'center', + fontWeight: '200', + fontFamily: 'Helvetica Neue', + letterSpacing: 3, + width: 300 + }, +}); + +interface State { + isLoggingIn: boolean; + recordSecs: number; + recordTime: string; + currentPositionSec: number; + currentDurationSec: number; + playTime: string; + duration: string; +} + +const screenWidth = Dimensions.get('screen').width; + +class Page extends Component { + private audioRecorderPlayer + + constructor(props: any) { + super(props); + this.state = { + isLoggingIn: false, + recordSecs: 0, + recordTime: '00:00:00', + currentPositionSec: 0, + currentDurationSec: 0, + playTime: '00:00:00', + duration: '00:00:00', + }; + + this.audioRecorderPlayer = new AudioRecorderPlayer() + this.audioRecorderPlayer.setSubscriptionDuration(0.5); // optional. Default is 0.5 + } + + public render(): ReactElement { + let playWidth = + (this.state.currentPositionSec / this.state.currentDurationSec) * + (screenWidth - 56); + + if (!playWidth) { + playWidth = 0; + } + + return ( + + Audio Recorder Player + {this.state.recordTime} + + + + + + + + + + + + + + + + {this.state.playTime} / {this.state.duration} + + + + + + + + + + ); + } + + private onStatusPress = (e: any): void => { + const touchX = e.nativeEvent.locationX; + console.log(`touchX: ${touchX}`); + + const playWidth = + (this.state.currentPositionSec / this.state.currentDurationSec) * + (screenWidth - 56); + console.log(`currentPlayWidth: ${playWidth}`); + + const currentPosition = Math.round(this.state.currentPositionSec); + + if (playWidth && playWidth < touchX) { + const addSecs = Math.round(currentPosition + 1000); + this.audioRecorderPlayer.seekToPlayer(addSecs); + console.log(`addSecs: ${addSecs}`); + } else { + const subSecs = Math.round(currentPosition - 1000); + this.audioRecorderPlayer.seekToPlayer(subSecs); + console.log(`subSecs: ${subSecs}`); + } + }; + + private onStartRecord = async (): Promise => { + + const audioSet: AudioSet = { + AudioEncoderAndroid: AudioEncoderAndroidType.AAC, + AudioSourceAndroid: AudioSourceAndroidType.MIC, + AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high, + AVNumberOfChannelsKeyIOS: 2, + AVFormatIDKeyIOS: AVEncodingOption.aac, + OutputFormatAndroid: OutputFormatAndroidType.AAC_ADTS, + AudioSourceHarmony: AudioSourceHarmonyType.MIC, + AudioMimeHarmony: AudioMimeHarmonyType.AUDIO_AAC, + AudioFileFormatHarmony: AudioFormatHarmonyType.MPEG_4A, + AudioEncodingBitRateHarmony: 3200, + AudioSamplingRateHarmony: 44100, + AudioChannelsHarmony: 2, + }; + + console.log('audioSet', audioSet); + + const uri = await this.audioRecorderPlayer.startRecorder( + 'audio.m4a', + audioSet, + ); + + this.audioRecorderPlayer.addRecordBackListener((e: RecordBackType) => { + console.log('record-back', e); + this.setState({ + recordSecs: e.currentPosition, + recordTime: this.audioRecorderPlayer.mmssss( + Math.floor(e.currentPosition), + ), + }); + }); + + console.log(`uri: ${uri}`); + }; + + private onPauseRecord = async (): Promise => { + try { + const r = await this.audioRecorderPlayer.pauseRecorder(); + console.log(r); + } catch (err) { + console.log('pauseRecord', err); + } + }; + + private onResumeRecord = async (): Promise => { + await this.audioRecorderPlayer.resumeRecorder(); + }; + + private onStopRecord = async (): Promise => { + const result = await this.audioRecorderPlayer.stopRecorder(); + this.audioRecorderPlayer.removeRecordBackListener(); + this.setState({ + recordSecs: 0, + }); + console.log(result, '>>>>>>>stopRecorder'); + }; + + private onStartPlay = async (): Promise => { + console.log('onStartPlay'); + + try { + const msg = await this.audioRecorderPlayer.startPlayer('https://sis-sample-audio.obs.cn-north-1.myhuaweicloud.com/16k16bit.mp3', { 'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64; rv:12.0) Gecko/20100101 Firefox/21.0' }); + const volume = await this.audioRecorderPlayer.setVolume(1); + this.audioRecorderPlayer.addPlayBackListener((e: PlayBackType) => { + console.log('playBackListener', e); + this.setState({ + currentPositionSec: e.currentPosition, + currentDurationSec: e.duration, + playTime: this.audioRecorderPlayer.mmssss(e.currentPosition), + duration: this.audioRecorderPlayer.mmssss(Math.floor(e.duration)), + }); + }); + + } catch (err) { + console.log('startPlayer error', err); + } + }; + + private onPausePlay = async (): Promise => { + await this.audioRecorderPlayer.pausePlayer(); + }; + + private onResumePlay = async (): Promise => { + await this.audioRecorderPlayer.resumePlayer(); + }; + + private onStopPlay = async (): Promise => { + console.log('onStopPlay'); + this.audioRecorderPlayer.stopPlayer(); + this.audioRecorderPlayer.removePlayBackListener(); + }; +} + +export default Page; + +``` +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 ++ V3.6.10 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + + "@react-native-oh-tpl/react-native-audio-recorder-player": "file:../../node_modules/@react-native-oh-tpl/react-native-audio-recorder-player/harmony/audio_recorder_player.har" + } +``` + ++ V3.6.14 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + + "@react-native-ohos/react-native-audio-recorder-player": "file:../../node_modules/@react-native-ohos/react-native-audio-recorder-player/harmony/audio_recorder_player.har" + } +``` +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 配置 CMakeLists 和引入 RNAudioRecorderPlayerPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V3.6.10 ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-audio-recorder-player/src/main/cpp" ./audio_recorder_player) + +# V3.6.14 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-audio-recorder-player/src/main/cpp" ./audio_recorder_player) + +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_audio_recorder_player) +# RNOH_END: manual_package_linking_2 +``` +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "RNAudioRecorderPlayerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` +### 在 ArkTs 侧引入 react-native-audio-recorder-player Package + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff +// V3.6.10 ++ import {RNAudioRecorderPlayerPackage} from '@react-native-oh-tpl/react-native-audio-recorder-player/ts'; + +// V3.6.14 ++ import {RNAudioRecorderPlayerPackage} from '@react-native-ohos/react-native-audio-recorder-player/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNAudioRecorderPlayerPackage(ctx) + ]; +} +``` +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 3.6.10 | [@react-native-oh-tpl/react-native-audio-recorder-player Releases](https://github.com/react-native-oh-library/react-native-audio-recorder-player/releases) | 0.72 | +| 3.6.14 | [@react-native-ohos/react-native-audio-recorder-player Releases]() | 0.77 | + +### 权限要求 + +#### 在 entry 目录下的module.json5中添加权限 + +打开 `entry/src/main/module.json5`，添加： + +```diff +... +"requestPermissions": [ ++ {"name": "ohos.permission.INTERNET"},//网络播放音频需添加 ++ { ++ "name": "ohos.permission.MICROPHONE", ++ "reason": "$string:Access_Create_Audio", ++ "usedScene": { ++ "abilities": [ ++ "EntryAbility" ++ ], ++ "when": "always" ++ } ++ }, + ] +] +``` +#### 在 entry 目录下添加申请权限的原因 + +打开 `entry/src/main/resources/base/element/string.json`，添加： + +```diff +... +{ + "string": [ ++ { ++ "name": "Access_Create_Audio", ++ "value": "access create Audio" ++ }， + ] +} +``` +## API + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | +| `mmss` | Convert milliseconds to minute:second string | function(milliseconds:number): string | No | Android，iOS | yes | +| `mmssss` | Convert milliseconds to minute:second:milliseconds string | function(milliseconds:number): string | No | Android，iOS | yes | +| `setSubscriptionDuration` | Set default callback time when starting recorder or player. Default to 0.5 which is 500ms| function(seconds:float):void | No | Android，iOS | yes | +| `addRecordBackListener` |Get callback from native module. Will receive currentPosition, currentMetering (if configured in startRecorder). | function(callBack:(value:RecordBackType)=>void): void | No | Android，iOS | yes | +| `removeRecordBackListener` |Removes recordBack listener. | function(): void | No | Android，iOS | yes | +| `addPlayBackListener` | Get callback from native module. Will receive duration, currentPosition. | function(callBack:(value: PlayBackType)=>void): void | No | Android，iOS | yes | +| `removePlayBackListener` | Removes playback listener. | function(): void | No | Android，iOS | yes | +| `startRecorder` |Start recording. Not passing uri will save audio in default location. | function(uri?:string,audioSets?: AudioSet,meteringEnabled?: boolean): Promise< string > | No | Android，iOS | yes | +| `pauseRecorder` | Pause recording. | function() : Promise< string > | No | Android，iOS | yes | +| `resumeRecorder` | Resume recording. | function() : Promise< string > | No | Android，iOS | yes | +| `stopRecorder` | Stop recording. | function() : Promise< string > | No | Android，iOS | yes | +| `startPlayer` | Start playing. Not passing the param will play audio in default location. | function(uri?:string,httpHeaders?:Record) : Promise< string > | No | Android，iOS | yes | +| `stopPlayer` | Stop playing. | function() : Promise< string > | No | Android，iOS | yes | +| `pausePlayer` | Pause playing. | function() : Promise< string > | No | Android，iOS | yes | +| `resumePlayer` | Resume playing. | function() : Promise< string > | No | Android，iOS | yes | +| `seekToPlayer` | Seek audio. | function(milliseconds:number) : Promise< string > | No | Android，iOS | yes | +| `setVolume` | Set volume of audio player (default 1.0, range: 0.0 ~ 1.0). | function(volume:float) : Promise< string > | No | Android，iOS | yes | +| `setPlaybackSpeed`3.6.14+ | Set playback speed.
鸿蒙化后仅支持0.125、0.25、0.5、0.75、1、1.25、1.5、1.75、2和3倍速设置，其中3倍速仅在API version 13开始支持。 | function(playbackSpeed: number): Promise< string > | No | Android，iOS | partially | + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/hyochan/react-native-audio-recorder-player/blob/main/LICENSE) ，请自由地享受和参与开源。 diff --git a/zh-cn/react-native-context-menu-view.md b/zh-cn/react-native-context-menu-view.md index 95064a6f..75c13d6c 100644 --- a/zh-cn/react-native-context-menu-view.md +++ b/zh-cn/react-native-context-menu-view.md @@ -18,7 +18,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-context-menu-view Releases](https://github.com/react-native-oh-library/react-native-context-menu-view/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.16.0 | [@react-native-oh-tpl/react-native-context-menu-view Releases](https://github.com/react-native-oh-library/react-native-context-menu-view/releases) | 0.72 | +| 1.19.1 | [@react-native-ohos/react-native-context-menu-view Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -27,13 +34,21 @@ #### **npm** ```bash +# V1.16.0 npm install @react-native-oh-tpl/react-native-context-menu-view + +# V1.19.1 +npm install @react-native-ohos/react-native-context-menu-view ``` #### **yarn** ```bash +# V1.16.0 yarn add @react-native-oh-tpl/react-native-context-menu-view + +# V1.19.1 +yarn add @react-native-ohos/react-native-context-menu-view ``` @@ -91,6 +106,8 @@ const Example = () => { 打开 `entry/oh-package.json5`，添加以下依赖 +- V1.16.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -98,6 +115,15 @@ const Example = () => { } ``` +- V1.19.1 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-context-menu-view": "file:../../node_modules/@react-native-ohos/react-native-context-menu-view/harmony/context_menu.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -133,7 +159,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V1.16.0 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-context-menu-view/src/main/cpp" ./context_menu) + +# V1.19.1 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-context-menu-view/src/main/cpp" ./context_menu) + # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -176,8 +208,12 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... +// V1.16.0 + import {ContextMenuPackage} from '@react-native-oh-tpl/react-native-context-menu-view/ts'; +// V1.19.1 ++ import {ContextMenuPackage} from '@react-native-ohos/react-native-context-menu-view/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -205,7 +241,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-context-menu-view Releases](https://github.com/react-native-oh-library/react-native-context-menu-view/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.16.0 | [@react-native-oh-tpl/react-native-context-menu-view Releases](https://github.com/react-native-oh-library/react-native-context-menu-view/releases) | 0.72 | +| 1.19.1 | [@react-native-ohos/react-native-context-menu-view Releases]() | 0.77 | ## 属性 @@ -213,16 +254,23 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---------------------- | ------------------------------------------------------------ | -------- | -------- | ---------------------- | ----------------- | -| title | The title above the popup menu. | string | no | Android/iOS | yes | -| actions | Menu props. | array | no | Android(partially)/iOS | partially | -| previewBackgroundColor | The background color of the preview. | string | no | NA | no | -| dropdownMenuMode | When set to true, the context menu is triggered with a single tap instead of a long press. | boolean | no | Android/iOS | yes | -| disabled | Disable menu interaction. | boolean | no | Android/iOS | yes | -| onPress | When the popup is opened and the user picks an option. | callback | no | Android/iOS | yes | -| onPreviewPress | When the context menu preview is tapped. | callback | no | iOS | yes | -| onCancel | When the popup is opened and the user cancels. | callback | no | Android/iOS | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------------------------- | ------------------------------------------------------------ | -------- | -------- | ---------------------- | ----------------- | +| title | The title above the popup menu. | string | no | Android/iOS | yes | +| actions | Menu props. | array | no | Android(partially)/iOS | partially | +| previewBackgroundColor | The background color of the preview. | string | no | NA | no | +| dropdownMenuMode | When set to true, the context menu is triggered with a single tap instead of a long press. | boolean | no | Android/iOS | yes | +| disabled | Disable menu interaction. | boolean | no | Android/iOS | yes | +| onPress | When the popup is opened and the user picks an option. | callback | no | Android/iOS | yes | +| onPreviewPress | When the context menu preview is tapped. | callback | no | iOS | yes | +| onCancel | When the popup is opened and the user cancels. | callback | no | Android/iOS | yes | +| fontName1.19.1+ | Custom font name to use for menu items. The font must be available in your app's font resources. | string | no | Android | yes | +| borderRadius1.19.1+ | Sets the border radius for all corners of the preview. Can be overridden by individual corner settings. | number | no | iOS | no | +| borderTopLeftRadius1.19.1+ | Sets the border radius specifically for the top left corner of the preview. | number | no | iOS | no | +| borderTopRightRadius1.19.1+ | Sets the border radius specifically for the top right corner of the preview. | number | no | iOS | no | +| borderBottomRightRadius1.19.1+ | Sets the border radius specifically for the bottom right corner of the preview. | number | no | iOS | no | +| borderBottomLeftRadius1.19.1+ | Sets the border radius specifically for the bottom left corner of the preview. | number | no | iOS | no | +| disableShadow1.19.1+ | When set to true, removes the shadow from the preview. Default is false. | boolean | no | iOS | no | ## actions @@ -230,18 +278,19 @@ ohpm install > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| -------------- | ------------------------------------------------------------ | ------- | -------- | ----------- | ----------------- | -| title | the title of the action | string | no | Android/iOS | yes | -| subtitle | the subtitle of the action | string | no | iOS 15+ | yes | -| systemIcon | refers to an icon name within [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/) | string | no | iOS | yes | -| icon | Custom Icons. | string | no | Android/iOS | yes | -| iconColor | will change the color of the icon provided to the `icon` prop and has no effect on `systemIcon` (default: black) | string | no | Android/iOS | yes | -| destructive | items are rendered in red | boolean | no | iOS | yes | -| selected | items have a checkmark next to them | boolean | no | iOS | yes | -| disabled | marks whether the action is disabled or not | boolean | no | Android/iOS | yes | -| inlineChildren | marks whether its children (if any) should be rendered inline instead of in their own child menu | boolean | no | iOS | partially | -| actions | will provide a one level deep nested menu | array | no | Android/iOS | partially | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------------- | ------------------------------------------------------------ | ------- | -------- | ----------- | ----------------- | +| title | the title of the action | string | no | Android/iOS | yes | +| titleColor1.19.1+ | Color of the title. | string | no | All | yes | +| subtitle | the subtitle of the action | string | no | iOS 15+ | yes | +| systemIcon | refers to an icon name within [SF Symbols](https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/) | string | no | iOS | yes | +| icon | Custom Icons. | string | no | Android/iOS | yes | +| iconColor | will change the color of the icon provided to the `icon` prop and has no effect on `systemIcon` (default: black) | string | no | Android/iOS | yes | +| destructive | items are rendered in red | boolean | no | iOS | yes | +| selected | items have a checkmark next to them | boolean | no | iOS | yes | +| disabled | marks whether the action is disabled or not | boolean | no | Android/iOS | yes | +| inlineChildren | marks whether its children (if any) should be rendered inline instead of in their own child menu | boolean | no | iOS | partially | +| actions | will provide a one level deep nested menu | array | no | Android/iOS | partially | ## 遗留问题 diff --git a/zh-cn/react-native-create-thumbnail.md b/zh-cn/react-native-create-thumbnail.md index 1f9b8b94..b626886c 100644 --- a/zh-cn/react-native-create-thumbnail.md +++ b/zh-cn/react-native-create-thumbnail.md @@ -18,24 +18,37 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-create-thumbnail Releases](https://github.com/react-native-oh-library/react-native-create-thumbnail/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： -进入到工程目录并输入以下命令： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.0.0 | [@react-native-oh-tpl/react-native-create-thumbnail Releases](https://github.com/react-native-oh-library/react-native-create-thumbnail/releases) | 0.72 | +| 2.0.2 | [@react-native-ohos/react-native-create-thumbnail Releases]() | 0.77 | +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +进入到工程目录并输入以下命令： #### **npm** ```bash +# V2.0.0 npm install @react-native-oh-tpl/react-native-create-thumbnail + +# V2.0.2 +npm install @react-native-ohos/react-native-create-thumbnail ``` #### **yarn** ```bash +# V2.0.0 yarn add @react-native-oh-tpl/react-native-create-thumbnail + +# V2.0.2 +yarn add @react-native-ohos/react-native-create-thumbnail ``` @@ -172,6 +185,8 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 +- V2.0.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -179,6 +194,15 @@ const styles = StyleSheet.create({ } ``` +- V2.0.2 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-create-thumbnail": "file:../../node_modules/@react-native-ohos/react-native-create-thumbnail/harmony/createThumbnail.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -194,6 +218,8 @@ ohpm install 打开 `entry/oh-package.json5`，添加以下依赖 +- V2.0.0 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -201,6 +227,15 @@ ohpm install } ``` +- V2.0.2 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-create-thumbnail": "file:../../node_modules/@react-native-ohos/react-native-create-thumbnail/harmony/createThumbnail" + } +``` + 打开终端，执行： ```bash @@ -208,14 +243,79 @@ cd entry ohpm install --no-link ``` -### 3.在 ArkTs 侧引入 BlobUtilPackage +### 3.配置 CMakeLists 和引入 CreateThumbnailPackage + +> [!TIP] 若使用的是 2.0.0 版本，请跳过本章。 + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-create-thumbnail/src/main/cpp" ./create-thumbnail) +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_create_thumbnail) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "CreateThumbnailPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4.在 ArkTs 侧引入 CreateThumbnailPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... +// V2.0.0 + import { CreateThumbnailPackage } from '@react-native-oh-tpl/react-native-create-thumbnail/ts'; +// V2.0.2 ++ import { CreateThumbnailPackage } from '@react-native-ohos/react-native-create-thumbnail/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -224,7 +324,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 5.运行 点击右上角的 `sync` 按钮 @@ -243,7 +343,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-create-thumbnail Releases](https://github.com/react-native-oh-library/react-native-create-thumbnail/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.0.0 | [@react-native-oh-tpl/react-native-create-thumbnail Releases](https://github.com/react-native-oh-library/react-native-create-thumbnail/releases) | 0.72 | +| 2.0.2 | [@react-native-ohos/react-native-create-thumbnail Releases]() | 0.77 | ## API @@ -270,6 +375,10 @@ ohpm install | dirSize | Maximum size of the cache directory (in megabytes). When this directory is full, the previously generated thumbnails will be deleted to clear about half of it's size. | Number | NO | Android/ios | yes | | headers | Headers to load the video with. e.g. { Authorization: 'someAuthToken' } | Object | NO | Android/ios | yes | | cacheName | Cache name for this thumbnail to avoid duplicate generation. If specified, and a thumbnail already exists with the same cache name, it will be returned instead of generating a new one. | String | NO | Android/ios | yes | +| maxWidth2.0.2+ | Max thumbnail width in px. | Number | NO | Android/ios | yes | +| maxHeight2.0.2+ | Max thumbnail height in px. | Number | NO | Android/ios | yes | +| timeToleranceMs2.0.2+ | Time tolerance in ms for the system to pick the best matching video frame. | Number | NO | ios | NO | +| onlySyncedFrames2.0.2+ | Specify how Android target frames. Use true to retrieve a sync frame that has a timestamp closest to the specified one. Use false to retrieve a frame that may or may not be a sync frame but is closest to the specified timestamp. | Boolean | NO | Android | yes | ## 返回值 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 @@ -284,10 +393,10 @@ ohpm install | width | Thumbnail width | Number | NO | Android/ios | yes | | height | Thumbnail height | Number | NO | Android/ios | yes | - - ## 遗留问题 +- [ ] timeToleranceMs 属性不支持，因为在 HarmonyOS 中没有提供对应的属性 [issues#1](https://gitcode.com/openharmony-sig/rntpc_react-native-create-thumbnail/issues/1) + ## 其他 ## 开源协议 diff --git a/zh-cn/react-native-credit-card-input.md b/zh-cn/react-native-credit-card-input.md index 8478d095..842040ad 100644 --- a/zh-cn/react-native-credit-card-input.md +++ b/zh-cn/react-native-credit-card-input.md @@ -1,199 +1,208 @@ -> 模板版本：v0.2.2 - -

-

react-native-credit-card-input

-

-

- - Supported platforms - - - License - -

- -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-credit-card-input) - -## 安装与使用 - -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-credit-card-input Releases](https://github.com/react-native-oh-library/react-native-credit-card-input/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 - -进入到工程目录并输入以下命令： - - - - -#### **npm** - -```bash -npm install @react-native-oh-tpl/react-native-credit-card-input -``` - -#### **yarn** - -```bash -yarn add @react-native-oh-tpl/react-native-credit-card-input -``` - - - -下面的代码展示了这个库的基本使用场景： - -```js -import React, { Component } from "react"; -import { StyleSheet, View, Switch } from "react-native"; -import { CreditCardInput, LiteCreditCardInput } from "react-native-credit-card-input"; - -const s = StyleSheet.create({ - switch: { - alignSelf: "center", - marginTop: 20, - marginBottom: 20, - }, - container: { - backgroundColor: "#F5F5F5", - marginTop: 60, - }, - label: { - color: "black", - fontSize: 12, - }, - input: { - fontSize: 16, - color: "black", - }, -}); - - -export default class Example extends Component { - state = { useLiteCreditCardInput: false }; - - _onChange = (formData) => console.log(JSON.stringify(formData, null, " ")); - _onFocus = (field) => console.log("focusing", field); - _setUseLiteCreditCardInput = (useLiteCreditCardInput) => this.setState({ useLiteCreditCardInput }); - - render() { - return ( - - - - { this.state.useLiteCreditCardInput ? - ( - - ) : ( - - ) - } - - ); - } -} - -``` -## 约束与限制 - -### 兼容性 - -本文档内容基于以下版本验证通过： - -1.RNOH: 0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; - -## 属性 - ->[!TIP] "Platform"列表示该属性在原三方库上支持的平台。 - ->[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -详情见[react-native-credit-card-input](https://github.com/sbycrosz/react-native-credit-card-input) - -### LiteCreditCardInput - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| autoFocus | Automatically focus Card Number field on render | PropTypes.bool | no | Android/iOS | yes | -| onChange | Receives a formData object every time the form changes | PropTypes.func | no | Android/iOS | yes | -| onFocus | Receives the name of currently focused field| PropTypes.func | no | Android/iOS | yes | -| placeholders | Defaults to\{ number: "1234 5678 1234 5678", expiry: "MM/YY", cvc: "CVC" \} | string | no | Android/iOS | yes | -| inputStyle| Style for credit-card form's textInput | Text.propTypes.style | no | Android/iOS | yes | -| validColor| Color that will be applied for valid text input. Defaults to: "\{inputStyle.color\}" | PropTypes.string | no | Android/iOS | yes | -| invalidColor| Color that will be applied for invalid text input. Defaults to: "red" | PropTypes.string | no | Android/iOS | yes | -| placeholderColor| Color that will be applied for text input placeholder. Defaults to: "gray" | PropTypes.string | no | Android/iOS | yes | -| additionalInputsProps | An object with Each key of the object corresponding to the name of the field. Allows you to change all props documented in RN TextInput. | PropTypes.objectOf(TextInput.propTypes) | no | Android/iOS | yes | - -### CreditCardInput - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| autoFocus | Automatically focus Card Number field on render | PropTypes.bool | no | Android/iOS | yes | -| onChange | Receives a formData object every time the form changes | PropTypes.func | no | Android/iOS | yes | -| onFocus | Receives the name of currently focused field | PropTypes.func | no | Android/iOS | yes | -| labels | Defaults to\{ number: "CARD NUMBER", expiry: "EXPIRY", cvc: "CVC/CCV" \}| PropTypes.object | no | Android/iOS | yes | -| placeholders | Defaults to\{ number: "1234 5678 1234 5678", expiry: "MM/YY", cvc: "CVC" \} | PropTypes.object | no | Android/iOS | yes | -| cardScale | Scales the credit-card view.Defaults to 1, which translates to \{ width: 300, height: 190 \} | PropTypes.number | no | Android/iOS | yes | -| cardFontFamily | Font family for the CreditCardView, works best with monospace fonts. Defaults to Courier (iOS) or monospace (android) | PropTypes.string | no | Android/iOS | yes | -| cardImageFront | Image for the credit-card view e.g. require("./card.png") | PropTypes.number | no | Android/iOS | yes | -| cardImageBack | Image for the credit-card view e.g. require("./card.png") | PropTypes.number | no | Android/iOS | yes | -| labelStyle | Style for credit-card form's labels | Text.propTypes.style | no | Android/iOS | yes | -| inputStyle | Style for credit-card form's textInput | Text.propTypes.style | no | Android/iOS | yes | -| inputContainerStyle | Style for textInput's containerDefaults to: \{ borderBottomWidth: 1, borderBottomColor:"black" \} | ViewPropTypes.style | no | Android/iOS | yes | -| validColor | Color that will be applied for valid text input. Defaults to: "\{inputStyle.color\}" | PropTypes.string | no | Android/iOS | yes | -| invalidColor | Color that will be applied for invalid text input. Defaults to: "red" | PropTypes.string | no | Android/iOS | yes | -| placeholderColor | Color that will be applied for text input placeholder. Defaults to: "gray" | PropTypes.string | no | Android/iOS | yes | -| requiresName | Shows cardholder's name field Default to false | PropTypes.bool | no | Android/iOS | yes | -| requiresCVC | Shows CVC field Default to true | PropTypes.bool | no | Android/iOS | yes | -| requiresPostalCode | Shows postalCode field Default to false | PropTypes.string | no | Android/iOS | yes | -| validatePostalCode | Function to validate postalCode, expects incomplete, valid, or invalid as return values | PropTypes.func | no | Android/iOS | yes | -| allowScroll | enables horizontal scrolling on CreditCardInput Defaults to false | PropTypes.bool | no | Android/iOS | yes | -| cardBrandIcons | brand icons for CardView. see ./src/Icons.js for details | PropTypes.object | no | Android/iOS | yes | -| additionalInputsProps | An object with Each key of the object corresponding to the name of the field. Allows you to change all props documented in RN TextInput. | PropTypes.objectOf(TextInput.propTypes) | no | Android/iOS | yes | - -### CardView - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| focused | Determines the front face of the card | PropTypes.string | no | Android/iOS | yes | -| brand | Brand of the credit card | PropTypes.string | no | Android/iOS | yes | -| name | Cardholder's name (Use empty string if you need to hide the placeholder) | PropTypes.string | no | Android/iOS | yes | -| number | Credit card number (you'll need to the formatting yourself) | PropTypes.string | no | Android/iOS | yes | -| expiry | Credit card expiry (should be in MM/YY format) | PropTypes.string | no | Android/iOS | yes | -| cvc | Credit card CVC | PropTypes.string | no | Android/iOS | yes | -| placeholder | Placeholder texts | PropTypes.object | no | Android/iOS | yes | -| scale | Scales the card | PropTypes.number | no | Android/iOS | yes | -| fontFamily | Defaults to Courier and monospace in iOS and Android respectively | PropTypes.string | no | Android/iOS | yes | -| imageFront | Image for the credit-card | PropTypes.number | no | Android/iOS | yes | -| imageBack | Image for the credit-card | PropTypes.number | no | Android/iOS | yes | -| customIcons | brand icons for CardView. see ./src/Icons.js for details | PropTypes.object | no | Android/iOS | yes | - -## 遗留问题 - -## 其他 - -## 开源协议 - +> 模板版本：v0.2.2 + +

+

react-native-credit-card-input

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-credit-card-input) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.4.1 | [@react-native-oh-tpl/react-native-credit-card-input Releases](https://github.com/react-native-oh-library/react-native-credit-card-input/releases) | 0.72 | +| 1.0.1 | [@react-native-ohos/react-native-credit-card-input Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 + +进入到工程目录并输入以下命令： + + + + +#### **npm** + +```bash +# V0.4.1 +npm install @react-native-oh-tpl/react-native-credit-card-input + +# V1.0.1 +npm install @react-native-ohos/react-native-credit-card-input +``` + +#### **yarn** + +```bash +# V0.4.1 +yarn add @react-native-oh-tpl/react-native-credit-card-input + +# V1.0.1 +yarn add @react-native-ohos/react-native-credit-card-input +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import React from "react"; +import { StyleSheet, View, Switch, SafeAreaView } from 'react-native'; +import { CreditCardInput, LiteCreditCardInput } from 'react-native-credit-card-input'; + +export default function App() { + const [useLiteCreditCardInput, setUseLiteCreditCardInput] = React.useState(true); + const _setUseLiteCreditCardInput = (value) => { + setUseLiteCreditCardInput(value); + }; + + return ( + + + + + {useLiteCreditCardInput ? ( + + ) : ( + + )} + + + ); +} + +const style = StyleSheet.create({ + switch: { + alignSelf: "center", + marginTop: 20, + marginBottom: 20, + }, + container: { + backgroundColor: "#F5F5F5", + marginTop: 60, + flex: 1, + }, + label: { + color: "black", + fontSize: 12, + }, + input: { + fontSize: 16, + color: "black", + }, + style: { + backgroundColor: "#f0f0f0", + }, +}); + +``` + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1.RNOH: 0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; + +## 属性 + +>[!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +>[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +详情见[react-native-credit-card-input](https://github.com/sbycrosz/react-native-credit-card-input) + +### LiteCreditCardInput + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| autoFocus | Automatically focus Card Number field on render | PropTypes.bool | no | Android/iOS | yes | +| onChange | Receives a formData object every time the form changes | PropTypes.func | no | Android/iOS | yes | +| onFocusdeprecated from 1.0.1 | Receives the name of currently focused field| PropTypes.func | no | Android/iOS | yes | +| placeholders | Defaults to\{ number: "1234 5678 1234 5678", expiry: "MM/YY", cvc: "CVC" \} | string | no | Android/iOS | yes | +| inputStyle| Style for credit-card form's textInput | Text.propTypes.style | no | Android/iOS | yes | +| validColordeprecated from 1.0.1 | Color that will be applied for valid text input. Defaults to: "\{inputStyle.color\}" | PropTypes.string | no | Android/iOS | yes | +| invalidColordeprecated from 1.0.1 | Color that will be applied for invalid text input. Defaults to: "red" | PropTypes.string | no | Android/iOS | yes | +| placeholderColor| Color that will be applied for text input placeholder. Defaults to: "gray" | PropTypes.string | no | Android/iOS | yes | +| additionalInputsPropsdeprecated from 1.0.1 | An object with Each key of the object corresponding to the name of the field. Allows you to change all props documented in RN TextInput. | PropTypes.objectOf(TextInput.propTypes) | no | Android/iOS | yes | +| onFocusField1.0.1+ | Callback function called when a field gains focus. | PropTypes.func | no | Android/iOS | yes | +| style1.0.1+ | Custom style for the component's container. | PropTypes.style | no | Android/iOS | yes | + +### CreditCardInput + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| autoFocus | Automatically focus Card Number field on render | PropTypes.bool | no | Android/iOS | yes | +| onChange | Receives a formData object every time the form changes | PropTypes.func | no | Android/iOS | yes | +| onFocusdeprecated from 1.0.1 | Receives the name of currently focused field | PropTypes.func | no | Android/iOS | yes | +| labels | Defaults to\{ number: "CARD NUMBER", expiry: "EXPIRY", cvc: "CVC/CCV" \}| PropTypes.object | no | Android/iOS | yes | +| placeholders | Defaults to\{ number: "1234 5678 1234 5678", expiry: "MM/YY", cvc: "CVC" \} | PropTypes.object | no | Android/iOS | yes | +| cardScaledeprecated from 1.0.1 | Scales the credit-card view.Defaults to 1, which translates to \{ width: 300, height: 190 \} | PropTypes.number | no | Android/iOS | yes | +| cardFontFamilydeprecated from 1.0.1 | Font family for the CreditCardView, works best with monospace fonts. Defaults to Courier (iOS) or monospace (android) | PropTypes.string | no | Android/iOS | yes | +| cardImageFrontdeprecated from 1.0.1 | Image for the credit-card view e.g. require("./card.png") | PropTypes.number | no | Android/iOS | yes | +| cardImageBackdeprecated from 1.0.1 | Image for the credit-card view e.g. require("./card.png") | PropTypes.number | no | Android/iOS | yes | +| labelStyle | Style for credit-card form's labels | Text.propTypes.style | no | Android/iOS | yes | +| inputStyle | Style for credit-card form's textInput | Text.propTypes.style | no | Android/iOS | yes | +| inputContainerStyledeprecated from 1.0.1 | Style for textInput's containerDefaults to: \{ borderBottomWidth: 1, borderBottomColor:"black" \} | ViewPropTypes.style | no | Android/iOS | yes | +| validColordeprecated from 1.0.1 | Color that will be applied for valid text input. Defaults to: "\{inputStyle.color\}" | PropTypes.string | no | Android/iOS | yes | +| invalidColordeprecated from 1.0.1 | Color that will be applied for invalid text input. Defaults to: "red" | PropTypes.string | no | Android/iOS | yes | +| placeholderColor | Color that will be applied for text input placeholder. Defaults to: "gray" | PropTypes.string | no | Android/iOS | yes | +| requiresNamedeprecated from 1.0.1 | Shows cardholder's name field Default to false | PropTypes.bool | no | Android/iOS | yes | +| requiresCVCdeprecated from 1.0.1 | Shows CVC field Default to true | PropTypes.bool | no | Android/iOS | yes | +| requiresPostalCodedeprecated from 1.0.1 | Shows postalCode field Default to false | PropTypes.string | no | Android/iOS | yes | +| validatePostalCodedeprecated from 1.0.1 | Function to validate postalCode, expects incomplete, valid, or invalid as return values | PropTypes.func | no | Android/iOS | yes | +| allowScrolldeprecated from 1.0.1 | enables horizontal scrolling on CreditCardInput Defaults to false | PropTypes.bool | no | Android/iOS | yes | +| cardBrandIconsdeprecated from 1.0.1 | brand icons for CardView. see ./src/Icons.js for details | PropTypes.object | no | Android/iOS | yes | +| additionalInputsPropsdeprecated from 1.0.1 | An object with Each key of the object corresponding to the name of the field. Allows you to change all props documented in RN TextInput. | PropTypes.objectOf(TextInput.propTypes) | no | Android/iOS | yes | +| onFocusField1.0.1+ | Callback function called when a field gains focus. | PropTypes.func | no | Android/iOS | yes | +| style1.0.1+ | Custom style for the component's container. | PropTypes.style | no | Android/iOS | yes | + +### CreditCardView + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| focuseddeprecated from 1.0.1 | Determines the front face of the card | PropTypes.string | no | Android/iOS | yes | +| branddeprecated from 1.0.1 | Brand of the credit card | PropTypes.string | no | Android/iOS | yes | +| name | Cardholder's name (Use empty string if you need to hide the placeholder) | PropTypes.string | no | Android/iOS | yes | +| number | Credit card number (you'll need to the formatting yourself) | PropTypes.string | no | Android/iOS | yes | +| expiry | Credit card expiry (should be in MM/YY format) | PropTypes.string | no | Android/iOS | yes | +| cvc | Credit card CVC | PropTypes.string | no | Android/iOS | yes | +| placeholder | Placeholder texts | PropTypes.object | no | Android/iOS | yes | +| scaledeprecated from 1.0.1 | Scales the card | PropTypes.number | no | Android/iOS | yes | +| fontFamily | Defaults to Courier and monospace in iOS and Android respectively | PropTypes.string | no | Android/iOS | yes | +| imageFront | Image for the credit-card | PropTypes.number | no | Android/iOS | yes | +| imageBack | Image for the credit-card | PropTypes.number | no | Android/iOS | yes | +| customIconsdeprecated from 1.0.1 | brand icons for CardView. see ./src/Icons.js for details | PropTypes.object | no | Android/iOS | yes | +| focusedField1.0.1+ | Specifies which field is currently focused | 'name' \| 'number' \| 'expiry' \| | no | Android/iOS | yes | +| type1.0.1+ | Specifies the type of the credit card issuer | 'visa' \| 'mastercard' \| 'american-express' \| 'diners-club' \| 'discover' \| 'jcb' | no | Android/iOS | yes | +| style1.0.0+ | Custom style for the component's container. | PropTypes.style | no | Android/iOS | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + 本项目基于 [The MIT License (MIT)](https://github.com/sbycrosz/react-native-credit-card-input/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-custom-keyboard.md b/zh-cn/react-native-custom-keyboard.md index 57256c00..70ef0a2c 100644 --- a/zh-cn/react-native-custom-keyboard.md +++ b/zh-cn/react-native-custom-keyboard.md @@ -17,20 +17,33 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-custom-keyboard Releases](https://github.com/react-native-oh-library/react-native-custom-keyboard/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.0.3 | [@react-native-oh-tpl/picker Releases](https://github.com/react-native-oh-library/picker/releases) | 0.72 | +| 1.0.3 | [@react-native-ohos/picker Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： #### **npm** ```bash +# V1.0.3 for RN0.72 npm install @react-native-oh-tpl/react-native-custom-keyboard + +# V1.0.3 for RN0.77 +npm install @react-native-ohos/react-native-custom-keyboard ``` #### **yarn** ```bash +# V1.0.3 for RN0.72 yarn add @react-native-oh-tpl/react-native-custom-keyboard + +# V1.0.3 for RN0.77 +yarn add @react-native-ohos/react-native-custom-keyboard ``` 下面的代码展示了这个库的基本使用场景： @@ -151,6 +164,8 @@ const styles = StyleSheet.create({ ## 使用 Codegen +> [!TIP] V1.0.3 for RN0.77 不需要执行 Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -183,6 +198,7 @@ const styles = StyleSheet.create({ 打开 `entry/oh-package.json5`，添加以下依赖 ++ V1.0.3 for RN0.72 ```json "dependencies": { "@rnoh/react-native-openharmony" : "file:../react_native_openharmony", @@ -190,6 +206,14 @@ const styles = StyleSheet.create({ } ``` ++ V1.0.3 for RN0.77 +```json +"dependencies": { + "@rnoh/react-native-openharmony" : "file:../react_native_openharmony", + "@react-native-ohos/react-native-custom-keyboard": "file:../../node_modules/@react-native-ohos/react-native-custom-keyboard/harmony/custom_keyboard.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -225,7 +249,13 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V1.0.3 for RN0.72 + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-custom-keyboard/src/main/cpp" ./custom-keyboard) + +# V1.0.3 for RN0.77 ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-custom-keyboard/src/main/cpp" ./custom-keyboard) + # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -269,8 +299,11 @@ std::vector> PackageProvider::getPackages(Package::Cont ```diff ... import type {RNPackageContext, RNPackage} from '@rnoh/react-native-openharmony/ts'; +// V1.0.3 for RN0.72 +import {RNCustomKeyboardPackage} from '@react-native-oh-tpl/react-native-custom-keyboard/ts'; +// V1.0.3 for RN0.77 ++import {RNCustomKeyboardPackage} from '@react-native-ohos/react-native-custom-keyboard/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -298,7 +331,10 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-custom-keyboard Releases](https://github.com/react-native-oh-library/react-native-custom-keyboard/releases) +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.0.3 | [react-native-oh-tpl/react-native-custom-keyboard Releases](https://github.com/react-native-oh-library/react-native-custom-keyboard/releases) | 0.72 | +| 1.0.3 | [react-native-ohos/react-native-custom-keyboard Releases]() | 0.77 | ## 属性 diff --git a/zh-cn/react-native-gifted-charts.md b/zh-cn/react-native-gifted-charts.md index 5b4a81bb..5a5671a1 100644 --- a/zh-cn/react-native-gifted-charts.md +++ b/zh-cn/react-native-gifted-charts.md @@ -18,7 +18,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-gifted-charts Releases](https://github.com/react-native-oh-library/react-native-gifted-charts/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.4.16 | [@react-native-oh-tpl/react-native-gifted-charts Releases](https://github.com/react-native-oh-library/react-native-gifted-charts/releases) | 0.72 | +| 1.4.62 | [@react-native-ohos/react-native-gifted-charts Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -27,13 +34,21 @@ #### **npm** ```bash +# V1.4.16 npm install @react-native-oh-tpl/react-native-gifted-charts + +# V1.4.62 +npm install @react-native-ohos/react-native-gifted-charts ``` #### **yarn** ```bash +# V1.4.16 yarn add @react-native-oh-tpl/react-native-gifted-charts + +# V1.4.62 +yarn add @react-native-ohos/react-native-gifted-charts ``` @@ -74,9 +89,9 @@ export default function () { ## Link -本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-svg、@react-native-oh-tpl/react-native-linear-gradient 的原生端代码，如已在鸿蒙工程中引入过这两个库，则无需再次引入，可跳过本章节步骤，直接使用。 +本库鸿蒙侧实现依赖@react-native-ohos/react-native-svg、@react-native-ohos/react-native-linear-gradient 的原生端代码，如已在鸿蒙工程中引入过这两个库，则无需再次引入，可跳过本章节步骤，直接使用。 -如未引入请参照[@react-native-oh-tpl/react-native-svg 文档](/zh-cn/react-native-svg-capi.md)、[@react-native-oh-tpl/react-native-linear-gradient 文档](/zh-cn/react-native-linear-gradient.md)进行引入 +如未引入请参照[@react-native-oh-tpl/react-native-svg 文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-svg-capi.md)、[@react-native-ohos/react-native-linear-gradient 文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-linear-gradient.md)进行引入 ## 约束与限制 @@ -84,7 +99,12 @@ export default function () { 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-gifted-charts Releases](https://github.com/react-native-oh-library/react-native-gifted-charts/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.4.16 | [@react-native-oh-tpl/react-native-gifted-charts Releases](https://github.com/react-native-oh-library/react-native-gifted-charts/releases) | 0.72 | +| 1.4.62 | [@react-native-ohos/react-native-gifted-charts Releases]() | 0.77 | ## 属性 @@ -97,790 +117,906 @@ export default function () { ### BarChart, Horizontal BarChart and Stacked Bar Chart **Basic props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | An item object represents a bar in the bar chart. It is described in the next table. | barDataItem[] | no | all | yes -| width | Width of the Bar chart | number | no | all | yes -| height | Height of the Bar chart (excluding the bottom label) | number | no | all | yes -| onPress | Callback function called on press of a Bar (takes item and index as parameter) | Function | no | all | yes -| onLongPress | Callback function called on long press of a Bar (takes item and index as parameter) | Function | no | all | yes -| onPressOut | Callback function called on press out of a Bar (takes item and index as parameter) | Function | no | all | yes -| focusBarOnPress | used to focus a bar on press by applying styles defined in focusedBarConfig | boolean | no | all | yes -| focusedBarConfig | styles for the focused bar including color, width, opacity, borderRadius etc | FocusedBarConfig | no | all | yes -| focusedBarIndex | index of the initially focused bar, works only when focusBarOnPress is | number | no | all | yes -| maxValue | Maximum value shown in the Y axis | number | no | all | yes -| yAxisOffset | Starting (minimum) value in the Y axis (value at the origin) | number | no | all | yes -| mostNegativeValue | The most negative value shown in the Y axis (to be used only if the data set has negative values too) | number | no | all | yes -| noOfSections | Number of sections in the Y axis | number | no | all | yes -| noOfSectionsBelowXAxis | Number of sections in the Y axis below X axis (in case the data set has negative values too) | number | no | all | yes -| stepValue | Value of 1 step/section in the Y axis | number | no | all | yes -| stepHeight | Height of 1 step/section in the Yaxis | number | no | all | yes -| negativeStepValue| Value of 1 step/section in the Y axis for negative values (in the 4th quadrant) | number | no | all | yes -| negativeStepHeight | Height of 1 step/section in the Y axis for negative values (in the 4th quadrant) | number | no | all | yes -| spacing | Distance between 2 consecutive bars in the Bar chart | number | no | all | yes -| backgroundColor | Background color of the Bar chart | ColorValue | no | all | yes -| sectionColors | Background color of the horizontal sections of the chart | Array | no | all | no -| scrollref | ref object that can be used to control the horizontal ScrollView inside which the chart is rendered | any | no | all | yes -| scrollToIndex | scroll to a particular index on chart load | number | no | all | yes -| disableScroll | To disable horizontal scroll | boolean | no | all | yes -| showScrollIndicator | To show horizontal scroll indicator| boolean | no | all | yes -| indicatorColor | (iOS only) The color of the scroll indicators - ('black', 'white' or 'default') | String | no | iOS | yes -| showLine | To show a Line chart over the Bar chart with the same data | boolean | no | all | yes -| lineData | The data object for the line chart (use only when showLine is true). To hide any datapoint pass hideDataPoint prop as true in specific data item. | Array of items | no | all | yes -| lineConfig | Properties of the Line chart shown over the Bar chart (lineConfigType) is described below | lineConfigType | no | all | yes -| lineData2 | The data object for the second line chart (use only when showLine is true) | Array of items | no | all | yes -| lineConfig2 | Properties of the second Line chart shown over the Bar chart (lineConfigType) is described below | lineConfigType | no | all | yes -| lineBehindBars | When set to true, the line chart will appear behind the Bars in case of overlap | boolean | no | all | yes -| autoShiftLabels | When set to true, automatically shifts the X axis labels for negative values | boolean | no | all | yes -| scrollToEnd | When set to true, the chart automatically scrolls to the rightmost bar | boolean | no | all | yes -| scrollAnimation | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost bar | boolean | no | all | yes -| scrollEventThrottle | (only for iOS) see https://reactnative.dev/docs/scrollview#scrolleventthrottle-ios| number | no | iOS | yes -| onScroll | callback function called when the chart is scrolled horizontally | Function | no | all | yes -| onMomentumScrollEnd | callback function called when scroll is completed | Function | no | all | yes -| initialSpacing | distance of the first bar from the Y axis | number | no | all | yes -| renderTooltip | tooltip component appearing above the bar when it is pressed, takes item and index as parameters | Function | no | all | yes -| leftShiftForTooltip | The distance by which the tooltip component should shift towards left | number | no | all | yes -| leftShiftForLastIndexTooltip | The distance by which the tooltip component of the last bar should shift towards left | number | no | all | yes -| adjustToWidth | When set to true, it auto-computes the barWidth and spacing to fit the chart in the available width / parentWidth | boolean | no | all | yes -| parentWidth | The width of the parent View or the width that the chart should auto-fit into when `adjustToWidth` is true | number | no | all | yes -| showValuesAsTopLabel | When set to true, shows the value as a label at the top of the bar | boolean | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------------- | ------------------------------------------------------------ | ------------------------- | -------- | -------- | ----------------- | +| data | An item object represents a bar in the bar chart. It is described in the next table. | barDataItem[] | no | all | yes | +| width | Width of the Bar chart | number | no | all | yes | +| height | Height of the Bar chart (excluding the bottom label) | number | no | all | yes | +| onPress | Callback function called on press of a Bar (takes item and index as parameter) | Function | no | all | yes | +| onLongPress | Callback function called on long press of a Bar (takes item and index as parameter) | Function | no | all | yes | +| onPressOut | Callback function called on press out of a Bar (takes item and index as parameter) | Function | no | all | yes | +| focusBarOnPress | used to focus a bar on press by applying styles defined in focusedBarConfig | boolean | no | all | yes | +| focusedBarConfig | styles for the focused bar including color, width, opacity, borderRadius etc | FocusedBarConfig | no | all | yes | +| focusedBarIndex | index of the initially focused bar, works only when focusBarOnPress is | number | no | all | yes | +| maxValue | Maximum value shown in the Y axis | number | no | all | yes | +| yAxisOffset | Starting (minimum) value in the Y axis (value at the origin) | number | no | all | yes | +| mostNegativeValue | The most negative value shown in the Y axis (to be used only if the data set has negative values too) | number | no | all | yes | +| noOfSections | Number of sections in the Y axis | number | no | all | yes | +| noOfSectionsBelowXAxis | Number of sections in the Y axis below X axis (in case the data set has negative values too) | number | no | all | yes | +| stepValue | Value of 1 step/section in the Y axis | number | no | all | yes | +| stepHeight | Height of 1 step/section in the Yaxis | number | no | all | yes | +| negativeStepValue | Value of 1 step/section in the Y axis for negative values (in the 4th quadrant) | number | no | all | yes | +| negativeStepHeight | Height of 1 step/section in the Y axis for negative values (in the 4th quadrant) | number | no | all | yes | +| spacing | Distance between 2 consecutive bars in the Bar chart | number | no | all | yes | +| backgroundColor | Background color of the Bar chart | ColorValue | no | all | yes | +| sectionColors | Background color of the horizontal sections of the chart | Array | no | all | no | +| scrollref | ref object that can be used to control the horizontal ScrollView inside which the chart is rendered | any | no | all | yes | +| scrollToIndex | scroll to a particular index on chart load | number | no | all | yes | +| disableScroll | To disable horizontal scroll | boolean | no | all | yes | +| showScrollIndicator | To show horizontal scroll indicator | boolean | no | all | yes | +| indicatorColor | (iOS only) The color of the scroll indicators - ('black', 'white' or 'default') | String | no | iOS | yes | +| showLine | To show a Line chart over the Bar chart with the same data | boolean | no | all | yes | +| lineData | The data object for the line chart (use only when showLine is true). To hide any datapoint pass hideDataPoint prop as true in specific data item. | Array of items | no | all | yes | +| lineConfig | Properties of the Line chart shown over the Bar chart (lineConfigType) is described below | lineConfigType | no | all | yes | +| lineData2 | The data object for the second line chart (use only when showLine is true) | Array of items | no | all | yes | +| lineConfig2 | Properties of the second Line chart shown over the Bar chart (lineConfigType) is described below | lineConfigType | no | all | yes | +| lineBehindBars | When set to true, the line chart will appear behind the Bars in case of overlap | boolean | no | all | yes | +| autoShiftLabels | When set to true, automatically shifts the X axis labels for negative values | boolean | no | all | yes | +| scrollToEnd | When set to true, the chart automatically scrolls to the rightmost bar | boolean | no | all | yes | +| scrollAnimation | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost bar | boolean | no | all | yes | +| scrollEventThrottle | (only for iOS) see [https://reactnative.dev/docs/scrollview#scrolleventthrottle-ios](https://gitee.com/link?target=https%3A%2F%2Freactnative.dev%2Fdocs%2Fscrollview%23scrolleventthrottle-ios) | number | no | iOS | yes | +| onScroll | callback function called when the chart is scrolled horizontally | Function | no | all | yes | +| onMomentumScrollEnd | callback function called when scroll is completed | Function | no | all | yes | +| initialSpacing | distance of the first bar from the Y axis | number | no | all | yes | +| renderTooltip | tooltip component appearing above the bar when it is pressed, takes item and index as parameters | Function | no | all | yes | +| leftShiftForTooltip | The distance by which the tooltip component should shift towards left | number | no | all | yes | +| leftShiftForLastIndexTooltip | The distance by which the tooltip component of the last bar should shift towards left | number | no | all | yes | +| adjustToWidth | When set to true, it auto-computes the barWidth and spacing to fit the chart in the available width / parentWidth | boolean | no | all | yes | +| parentWidth | The width of the parent View or the width that the chart should auto-fit into when `adjustToWidth` is true | number | no | all | yes | +| showValuesAsTopLabel | When set to true, shows the value as a label at the top of the bar | boolean | no | all | yes | +| customBackground1.4.62+ | An object used to set a custom background component (See the properties of this object below) | CustomBackground | no | all | yes | +| nestedScrollEnabled1.4.62+ | Useful when the chart is used inside a horizontal ScrollView (without this, the chart's scrolling is compromised) | boolean | no | all | yes | +| onScrollEndDrag1.4.62+ | callback function called when the chart is has finished scrolling. See Note below. | (event,direction) => void | no | all | yes | +| bounces1.4.62+ | controls the bouncing effect of the Scrolling chart on iOS. See https://reactnative.dev/docs/scrollview#bounces-ios | boolean | no | iOS | no | +| overScrollMode1.4.62+ | controls the bouncing effect of the Scrolling chart on Android. See https://reactnative.dev/docs/scrollview#overscrollmode-android | boolean | no | Android | no | +| autoCenterTooltip1.4.62+ | When set to true, automatically centers the tooltip | boolean | no | all | yes | +| topLabelTextStyle1.4.62+ | text style for the top labels that appear at the top of bars | object | no | all | yes | +| highlightEnabled1.4.62+ | used to highlight a particular Bar on press, by decreasing the opacity of the remaining (setting them to lowlightOpacity) | boolean | no | all | yes | +| lowlightOpacity1.4.62+ | the opacity of the un-highlighted bars when one of them is highlighted | number | no | all | yse | +| highlightedBarIndex1.4.62+ | the index(or indices) of the highlighted bar(s) | number \| number[] | no | all | yse | +| onBackgroundPress1.4.62+ | Callback function called on pressing the chart body (outside of the bars). Helps ufocus/unselect after focusing/selecting a Bar | Function | no | all | yse | **Combine Line Chart using showLine** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| initialSpacing | distance of the first data point from the Y axis | number | no | all | yes -| curved | To show curved line joining the data points | boolean | no | all | yes -| isAnimated | To show animates Line Chart | boolean | no | all | yes -| delay | Delay (in milliseconds) before starting the animation of the line | number | no | all | yes -| thickness | Thickness of the Line | number | no | all | yes -| color | Color of the Line | ColorValue | no | all | yes -| hideDataPoints | To hide data points along the Line chart | boolean | no | all | yes -| dataPointsShape | Shape of the data points (_'rectangular'_ or _'circular'_) | String | no | all | yes -| dataPointsWidth | Width of data points (when data points' shape is rectangular) | number | no | all | yes -| dataPointsHeight | Height of data points (when data points' shape is rectangular) | number | no | all | yes -| dataPointsColor | Color of the data points | ColorValue | no | all | yes -| dataPointsRadius | Radius of data points (when data points' shape is _circular_) | number | no | all | yes -| textColor | Color of the dataPointText | ColorValue | no | all | yes -| textFontSize | Font size of the dataPointText | number | no | all | yes -| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes -| textShiftY | To shift the dataPointText text vertically | number | no | all | yes -| shiftY | To shift the Line chart up or down by the given quantity m | number | no | all | yes -| startIndex | Start index for data line (used to display data lines having breaks) | number | no | all | yes -| endIndex | End index for data line (used to display data lines having breaks) | number | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ------------------------------------------------------------ | ---------- | -------- | -------- | ----------------- | +| initialSpacing | distance of the first data point from the Y axis | number | no | all | yes | +| curved | To show curved line joining the data points | boolean | no | all | yes | +| isAnimated | To show animates Line Chart | boolean | no | all | yes | +| delay | Delay (in milliseconds) before starting the animation of the line | number | no | all | yes | +| thickness | Thickness of the Line | number | no | all | yes | +| color | Color of the Line | ColorValue | no | all | yes | +| hideDataPoints | To hide data points along the Line chart | boolean | no | all | yes | +| dataPointsShape | Shape of the data points (*'rectangular'* or *'circular'*) | String | no | all | yes | +| dataPointsWidth | Width of data points (when data points' shape is rectangular) | number | no | all | yes | +| dataPointsHeight | Height of data points (when data points' shape is rectangular) | number | no | all | yes | +| dataPointsColor | Color of the data points | ColorValue | no | all | yes | +| dataPointsRadius | Radius of data points (when data points' shape is *circular*) | number | no | all | yes | +| textColor | Color of the dataPointText | ColorValue | no | all | yes | +| textFontSize | Font size of the dataPointText | number | no | all | yes | +| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes | +| textShiftY | To shift the dataPointText text vertically | number | no | all | yes | +| shiftY | To shift the Line chart up or down by the given quantity m | number | no | all | yes | +| startIndex | Start index for data line (used to display data lines having breaks) | number | no | all | yes | +| endIndex | End index for data line (used to display data lines having breaks) | number | no | all | yes | **Item description (barDataItem)** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| value | Value of the item representing height of the bar | number | no | all | yes -| barWidth | Width of the bar | number | no | all | yes -| onPress | Function called on pressing the bar | function | no | all | yes -| onLongPress | Function called on long pressing the bar | function | no | all | yes -| onPressOut | Callback function called on press out of a bar | Function | no | all | yes -| disablePress | Prop to disable the press action, defaults to false | boolean | no | all | yes -| frontColor | Color of the bar | ColorValue | no | all | yes -| sideColor | Color of the side view of the bar, only for 3 D | ColorValue | no | all | yes -| sideWidth | Width of the side view of the bar, only for 3 D | number | no | all | yes -| topColor | Color of the top view of the bar, only for 3 D | ColorValue | no | all | yes -| barStyle | style object for the Bars | object | no | all | yes -| showGradient | Prop to enable linear gradient for the bar color, defaults to false | boolean | no | all | yes -| gradientColor | Along with frontColor, this prop constitutes the 2 colors for gradient | ColorValue | no | all | yes -| label | Label text appearing below the bar (under the X axis) | string | no | all | yes -| labelWidth | Width of the Label text appearing below the bar (under the X axis) | number | no | all | yes -| labelTextStyle | Style object for the label text appearing below the bar | object | no | all | yes -| labelComponent | Custom label component appearing below the bar | Component | no | all | yes -| labelsDistanceFromXaxis | Distance of the X Axis label from the X axis | number | no | all | yes -| topLabelComponent | Custom component appearing above the bar | Component | no | all | yes -| topLabelContainerStyle | Style object for the container of the custom component appearing above the bar| object | no | all | yes -| cappedBars | To show caps on the top of bar | boolean | no | all | yes -| capThickness | Thickness of the bar cap | number | no | all | yes -| capColor | Color of the bar cap | ColorValue | no | all | yes -| capRadius | Border radius of the bar cap | number | no | all | yes -| barBorderRadius | Border radius of the bar | number | no | all | yes -| barBorderTopLeftRadius | Top left border radius of the bar | number| no | all | yes -| barBorderTopRightRadius | Top right border radius of the bar | number | no | all | yes -| barBorderBottomLeftRadius | Bottom left border radius of the bar | number | no | all | yes -| barBorderBottomRightRadius | Bottom right border radius of the bar| number | no | all | yes -| barMarginBottom | margin at the bottom of the bar (above X axis) | number | no | all | yes -| spacing | Distance of the next Bar from the currennt Bar | number | no | all | yes -| barBackgroundPattern | A svg component containing the background pattern for bars | Component | no | all | yes -| patternId | ID of the pattern component | String | no | all | yes -| leftShiftForTooltip | The distance by which the tooltip component should shift towards left | number | no | all | yes -| showXAxisIndex | show small graduation at the X axis for the corresponding bar | boolean | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------------------------- | ------------------------------------------------------------ | ---------- | -------- | -------- | ----------------- | +| value | Value of the item representing height of the bar | number | no | all | yes | +| barWidth | Width of the bar | number | no | all | yes | +| onPress | Function called on pressing the bar | function | no | all | yes | +| onLongPress | Function called on long pressing the bar | function | no | all | yes | +| onPressOut | Callback function called on press out of a bar | Function | no | all | yes | +| disablePress | Prop to disable the press action, defaults to false | boolean | no | all | yes | +| frontColor | Color of the bar | ColorValue | no | all | yes | +| sideColor | Color of the side view of the bar, only for 3 D | ColorValue | no | all | yes | +| sideWidth | Width of the side view of the bar, only for 3 D | number | no | all | yes | +| topColor | Color of the top view of the bar, only for 3 D | ColorValue | no | all | yes | +| barStyle | style object for the Bars | object | no | all | yes | +| showGradient | Prop to enable linear gradient for the bar color, defaults to false | boolean | no | all | yes | +| gradientColor | Along with frontColor, this prop constitutes the 2 colors for gradient | ColorValue | no | all | yes | +| label | Label text appearing below the bar (under the X axis) | string | no | all | yes | +| labelWidth | Width of the Label text appearing below the bar (under the X axis) | number | no | all | yes | +| labelTextStyle | Style object for the label text appearing below the bar | object | no | all | yes | +| labelComponent | Custom label component appearing below the bar | Component | no | all | yes | +| labelsDistanceFromXaxis | Distance of the X Axis label from the X axis | number | no | all | yes | +| topLabelComponent | Custom component appearing above the bar | Component | no | all | yes | +| topLabelContainerStyle | Style object for the container of the custom component appearing above the bar | object | no | all | yes | +| cappedBars | To show caps on the top of bar | boolean | no | all | yes | +| capThickness | Thickness of the bar cap | number | no | all | yes | +| capColor | Color of the bar cap | ColorValue | no | all | yes | +| capRadius | Border radius of the bar cap | number | no | all | yes | +| barBorderRadius | Border radius of the bar | number | no | all | yes | +| barBorderTopLeftRadius | Top left border radius of the bar | number | no | all | yes | +| barBorderTopRightRadius | Top right border radius of the bar | number | no | all | yes | +| barBorderBottomLeftRadius | Bottom left border radius of the bar | number | no | all | yes | +| barBorderBottomRightRadius | Bottom right border radius of the bar | number | no | all | yes | +| barMarginBottom | margin at the bottom of the bar (above X axis) | number | no | all | yes | +| spacing | Distance of the next Bar from the currennt Bar | number | no | all | yes | +| barBackgroundPattern | A svg component containing the background pattern for bars | Component | no | all | yes | +| patternId | ID of the pattern component | String | no | all | yes | +| leftShiftForTooltip | The distance by which the tooltip component should shift towards left | number | no | all | yes | +| showXAxisIndex | show small graduation at the X axis for the corresponding bar | boolean | no | all | yes | +| secondaryLabel1.4.62+ | Label text appearing above the secondary X-axis (at the top of the chart) | string | no | all | yes | +| secondaryLabelComponent1.4.62+ | Custom label component appearing above the secondary X-axis (at the top of the chart) | Component | no | all | yes | +| secondaryLabelTextStyle1.4.62+ | Style object for the label text of secondary X-axis (at the top of the chart) | object | no | all | yse | **Axes and rules related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| xAxisLength | X axis length | number | no | all | yes -| xAxisColor | X axis color | ColorValue | no | all | yes -| xAxisThickness | X axis thickness | number | no | all | yes -| yAxisColor | Y axis color | ColorValue | no | all | yes -| yAxisThickness | Y axis thickness | number | no | all | yes -| yAxisExtraHeight | Extra length of Y axis at the top | number | no | all | yes -| xAxisType | solid or dotted/dashed | RuleType | no | all | yes -| yAxisLabelWidth | Width of the Y axis Label container | number | no | all | yes -| yAxisTextStyle | Style object for the Y axis text style | object | no | all | yes -| yAxisTextNumberOfLines | Number of lines for y axis label text | number | no | all | yes -| yAxisLabelContainerStyle | Style object for the Y axis label container | object | no | all | yes -| trimYAxisAtTop | Removes the extra length of the Y axis from the top | boolean | no | all | yes -| horizontalRulesStyle | Style object for the horizontal rules container | object | no | all | yes -| showFractionalValues | Allow fractional values for the Y axis label | boolean | no | all | yes -| roundToDigits | Rounds the y axis values to given number of digits after decimal point | number | no | all | yes -| yAxisLabelPrefix | The String prepended to the y axis label text (for example- '$') | String | no | all | yes -| yAxisLabelSuffix | The String appended to the y axis label text | String | no | all | yes -| hideYAxisText | To hide Y axis label text | boolean | no | all | yes -| formatYLabel | a callback function that takes the label generated by the library and modifies it. | (label: string) => string | no | all | yes -| yAxisSide | Tells which side of the chart, should the y axis be present, defaults to 'left' | String | no | all | yes -| rulesLength | Length of the horizontal rules | number | no | all | yes -| rulesColor | Color of the horizontal rules | ColorValue | no | all | yes -| rulesThickness | Thickness of the horizontal rules | number | no | all | yes -| hideRules | To hide the horizontal rules | boolean | no | all | yes -| rulesType | solid or dotted/dashed | RuleType | no | all | yes -| dashWidth | width of each dash | number | no | all | yes -| dashGap | gap between 2 dashes | number | no | all | yes -| rulesConfigArray | Array of rulesConfig objects, used to customise the properties (like color, type etc) of specific rules | Array | no | no | no -| referenceLine1Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes -| referenceLine1Position | position of reference line | number | no | all | yes -| showReferenceLine2 | show second reference line | boolean | no | all | yes -| referenceLine2Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes -| referenceLine2Position | position of second reference line | number | no | all | yes -| showReferenceLine3 | show third reference line | boolean | no | all | yes -| referenceLine3Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes -| referenceLine3Position | position of third reference line | number | no | all | yes -| referenceLinesOverChartContent | used to render the reference lines over the rest of the chart content. | boolean | no | all | yes -| showVerticalLines | To show vertical lines | boolean | no | all | yes -| verticalLinesColor | Color of the vertical lines | ColorValue | no | all | yes -| verticallinesThickness | Thickness of the vertical lines | number | no | all | yes -| verticalLinesHeight | Height of the vertical lines | number | no | all | yes -| verticalLinesStrokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted vertical line | Array | no | all | yes -| verticalLinesShift | vertical lines are aligned with bars. Shift them left or right using +ve or -ve value of verticalLinesShift | number | no | all | yes -| verticalLinesZIndex | Z index of the vertical lines | number | no | all | yes -| noOfVerticalLines | Number of vertical lines displayed | number | no | all | yes -| verticalLinesSpacing | Distance between consecutive vertical lines | number | no | all | yes -| showXAxisIndices | To show the pointers on the X axis | boolean | no | all | yes -| xAxisIndicesHeight | Height of the pointers on the X axis | number | no | all | yes -| xAxisIndicesWidth | Width of the pointers on the X axis | number | no | all | yes -| xAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes -| showYAxisIndices | To show the pointers on the Y axis | boolean | no | all | yes -| yAxisIndicesHeight | Height of the pointers on the Y axis | number | no | all | yes -| yAxisIndicesWidth | Width of the pointers on the Y axis | number | no | all | yes -| yAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes -| yAxisLabelTexts | Array of label texts to be displayed along y axis | Array | no | all | yes -| xAxisLabelTexts | Array of label texts to be displayed below x axis | Array | no | all | yes -| xAxisLabelTextStyle | Style of label texts to be displayed below x axis | object | no | all | yes -| rotateLabel | To rotate the X axis labels (by 60deg) | boolean | no | all | yes -| hideAxesAndRules | To hide axes, rules, labels altogether | boolean | no | all | yes -| hideOrigin | To hide the y Axis label at origin (i.e. 0) | boolean | no | all | yes -| labelWidth | Width of the Label text appearing below the bar (under the X axis) | number | no | all | yes -| labelsDistanceFromXaxis | Distance of the X Axis label from the X axis | number | no | all | yes -| xAxisTextNumberOfLines | Number of lines for x axis label text | number | no | all | yes -| xAxisLabelsHeight | Height of X axis labels container | number | no | all | yes -| xAxisLabelsVerticalShift | prop to adjust the vertical position of X axis labels (move X axis labels up or down) | number | no | all | yes -| labelsExtraHeight | used to display large rotated labels on X-axis (use this only when using the **rotateLabel** prop) | number | no | all | yes -| secondaryYAxis | displays and controls the properties of the secondary Y axis on the right side | secondaryYAxisType | no | all | yes -| secondaryData | the secondary data that will be rendered along the secondary Y axis | Array of items | no | all | no + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------------------------------- | ------------------------------------------------------------ | ----------------------------- | -------- | -------- | ----------------- | +| xAxisLength | X axis length | number | no | all | yes | +| xAxisColor | X axis color | ColorValue | no | all | yes | +| xAxisThickness | X axis thickness | number | no | all | yes | +| yAxisColor | Y axis color | ColorValue | no | all | yes | +| yAxisThickness | Y axis thickness | number | no | all | yes | +| yAxisExtraHeight | Extra length of Y axis at the top | number | no | all | yes | +| xAxisType | solid or dotted/dashed | RuleType | no | all | yes | +| yAxisLabelWidth | Width of the Y axis Label container | number | no | all | yes | +| yAxisTextStyle | Style object for the Y axis text style | object | no | all | yes | +| yAxisTextNumberOfLines | Number of lines for y axis label text | number | no | all | yes | +| yAxisLabelContainerStyle | Style object for the Y axis label container | object | no | all | yes | +| trimYAxisAtTop | Removes the extra length of the Y axis from the top | boolean | no | all | yes | +| horizontalRulesStyle | Style object for the horizontal rules container | object | no | all | yes | +| showFractionalValues | Allow fractional values for the Y axis label | boolean | no | all | yes | +| roundToDigits | Rounds the y axis values to given number of digits after decimal point | number | no | all | yes | +| yAxisLabelPrefix | The String prepended to the y axis label text (for example- '$') | String | no | all | yes | +| yAxisLabelSuffix | The String appended to the y axis label text | String | no | all | yes | +| hideYAxisText | To hide Y axis label text | boolean | no | all | yes | +| formatYLabel | a callback function that takes the label generated by the library and modifies it. | (label: string) => string | no | all | yes | +| yAxisSide | Tells which side of the chart, should the y axis be present, defaults to 'left' | String | no | all | yes | +| rulesLength | Length of the horizontal rules | number | no | all | yes | +| rulesColor | Color of the horizontal rules | ColorValue | no | all | yes | +| rulesThickness | Thickness of the horizontal rules | number | no | all | yes | +| hideRules | To hide the horizontal rules | boolean | no | all | yes | +| rulesType | solid or dotted/dashed | RuleType | no | all | yes | +| dashWidth | width of each dash | number | no | all | yes | +| dashGap | gap between 2 dashes | number | no | all | yes | +| rulesConfigArray | Array of rulesConfig objects, used to customise the properties (like color, type etc) of specific rules | Array | no | no | no | +| referenceLine1Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes | +| referenceLine1Position | position of reference line | number | no | all | yes | +| showReferenceLine2 | show second reference line | boolean | no | all | yes | +| referenceLine2Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes | +| referenceLine2Position | position of second reference line | number | no | all | yes | +| showReferenceLine3 | show third reference line | boolean | no | all | yes | +| referenceLine3Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes | +| referenceLine3Position | position of third reference line | number | no | all | yes | +| referenceLinesOverChartContent | used to render the reference lines over the rest of the chart content. | boolean | no | all | yes | +| showVerticalLines | To show vertical lines | boolean | no | all | yes | +| verticalLinesColor | Color of the vertical lines | ColorValue | no | all | yes | +| verticallinesThickness | Thickness of the vertical lines | number | no | all | yes | +| verticalLinesHeight | Height of the vertical lines | number | no | all | yes | +| verticalLinesStrokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted vertical line | Array | no | all | yes | +| verticalLinesShift | vertical lines are aligned with bars. Shift them left or right using +ve or -ve value of verticalLinesShift | number | no | all | yes | +| verticalLinesZIndex | Z index of the vertical lines | number | no | all | yes | +| noOfVerticalLines | Number of vertical lines displayed | number | no | all | yes | +| verticalLinesSpacing | Distance between consecutive vertical lines | number | no | all | yes | +| showXAxisIndices | To show the pointers on the X axis | boolean | no | all | yes | +| xAxisIndicesHeight | Height of the pointers on the X axis | number | no | all | yes | +| xAxisIndicesWidth | Width of the pointers on the X axis | number | no | all | yes | +| xAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes | +| showYAxisIndices | To show the pointers on the Y axis | boolean | no | all | yes | +| yAxisIndicesHeight | Height of the pointers on the Y axis | number | no | all | yes | +| yAxisIndicesWidth | Width of the pointers on the Y axis | number | no | all | yes | +| yAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes | +| yAxisLabelTexts | Array of label texts to be displayed along y axis | Array | no | all | yes | +| xAxisLabelTexts | Array of label texts to be displayed below x axis | Array | no | all | yes | +| xAxisLabelTextStyle | Style of label texts to be displayed below x axis | object | no | all | yes | +| rotateLabel | To rotate the X axis labels (by 60deg) | boolean | no | all | yes | +| hideAxesAndRules | To hide axes, rules, labels altogether | boolean | no | all | yes | +| hideOrigin | To hide the y Axis label at origin (i.e. 0) | boolean | no | all | yes | +| labelWidth | Width of the Label text appearing below the bar (under the X axis) | number | no | all | yes | +| labelsDistanceFromXaxis | Distance of the X Axis label from the X axis | number | no | all | yes | +| xAxisTextNumberOfLines | Number of lines for x axis label text | number | no | all | yes | +| xAxisLabelsHeight | Height of X axis labels container | number | no | all | yes | +| xAxisLabelsVerticalShift | prop to adjust the vertical position of X axis labels (move X axis labels up or down) | number | no | all | yes | +| labelsExtraHeight | used to display large rotated labels on X-axis (use this only when using the **rotateLabel** prop) | number | no | all | yes | +| secondaryYAxis | displays and controls the properties of the secondary Y axis on the right side | secondaryYAxisType | no | all | yes | +| secondaryData | the secondary data that will be rendered along the secondary Y axis | Array of items | no | all | no | +| verticalLinesStrokeLinecap1.4.62+ | Linecap of the vertical lines (see in svg)stroke-linecap | 'butt' \| 'round' \| 'square' | no | all | yes | +| xAxisLabelsAtBottom1.4.62+ | places the x-axis labels at bottom of the chart, useful in charts involving -ve values (4th quadrant) | boolean | no | all | yes | +| secondaryXAxis1.4.62+ | properties of the secondary X-axis (appearing at the top of the chart) | XAxisConfig | no | all | yse | **Bar related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| barWidth | Width of the bar | number | no | all | yes -| barStyle | style object for the Bars | object | no | all | yes -| isThreeD | Prop to render 3 dimensional bars | boolean | no | all | yes -| frontColor | Color of the bar | ColorValue | no | all | yes -| sideColor | Color of the side view of the bar, only for 3 D | ColorValue | no | all | yes -| topColor | Color of the top view of the bar, only for 3 D | ColorValue | no | all | yes -| sideWidth | Width of the side view of the bar, only for 3 D | number | no | all | yes -| showGradient | Prop to enable linear gradient for the bar color | boolean | no | all | yes -| gradientColor | Along with frontColor, gradientColor constitutes the 2 colors for gradient | ColorValue | no | all | yes -| roundedTop | To show rounded top | boolean | no | all | yes -| roundedBottom | To show rounded bottom | boolean | no | all | yes -| activeOpacity | activeOpacity on pressing the bar | number | no | all | yes -| disablePress | Prop to disable the bar press action | boolean | no | all | yes -| barBorderWidth | Border width of the bar | number | no | all | yes -| barBorderColor | Border color of the bar | ColorValue | no | all | yes -| barBorderRadius | Border radius of the bar | number | no | all | yes -| barBorderTopLeftRadius | Top left border radius of the bar | number | no | all | yes -| barBorderTopRightRadius | Top right border radius of the bar | number | no | all | yes -| barBorderBottomLeftRadius | Bottom left border radius of the bar | number | no | all | yes -| barBorderBottomRightRadius | Bottom right border radius of the bar | number | no | all | yes -| barMarginBottom | margin at the bottom of the bar (above X axis) | number | no | all | yes -| barBackgroundPattern | A svg component containing the background pattern for bars | Component | no | all | yes -| patternId | ID of the pattern component | String | no | all | yes -| minHeight | Minimum height of the Bars | number | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------------- | ------------------------------------------------------------ | ---------- | -------- | -------- | ----------------- | +| barWidth | Width of the bar | number | no | all | yes | +| barStyle | style object for the Bars | object | no | all | yes | +| isThreeD | Prop to render 3 dimensional bars | boolean | no | all | yes | +| frontColor | Color of the bar | ColorValue | no | all | yes | +| sideColor | Color of the side view of the bar, only for 3 D | ColorValue | no | all | yes | +| topColor | Color of the top view of the bar, only for 3 D | ColorValue | no | all | yes | +| sideWidth | Width of the side view of the bar, only for 3 D | number | no | all | yes | +| showGradient | Prop to enable linear gradient for the bar color | boolean | no | all | yes | +| gradientColor | Along with frontColor, gradientColor constitutes the 2 colors for gradient | ColorValue | no | all | yes | +| roundedTop | To show rounded top | boolean | no | all | yes | +| roundedBottom | To show rounded bottom | boolean | no | all | yes | +| activeOpacity | activeOpacity on pressing the bar | number | no | all | yes | +| disablePress | Prop to disable the bar press action | boolean | no | all | yes | +| barBorderWidth | Border width of the bar | number | no | all | yes | +| barBorderColor | Border color of the bar | ColorValue | no | all | yes | +| barBorderRadius | Border radius of the bar | number | no | all | yes | +| barBorderTopLeftRadius | Top left border radius of the bar | number | no | all | yes | +| barBorderTopRightRadius | Top right border radius of the bar | number | no | all | yes | +| barBorderBottomLeftRadius | Bottom left border radius of the bar | number | no | all | yes | +| barBorderBottomRightRadius | Bottom right border radius of the bar | number | no | all | yes | +| barMarginBottom | margin at the bottom of the bar (above X axis) | number | no | all | yes | +| barBackgroundPattern | A svg component containing the background pattern for bars | Component | no | all | yes | +| patternId | ID of the pattern component | String | no | all | yes | +| minHeight | Minimum height of the Bars | number | no | all | yes | **Animation related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| isAnimated | To show animates BarChart. Animation occurs onLoad and on value change | boolean | no | all | yes -| animationDuration | Duration of the animations | number | no | all | no -| animationEasing | Easing applied to the animation | Easing | no | all | yes -**Pagination related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| onEndReached | Callback function called when the chart is scrolled upto end | Function | no | all | yes -| onStartReached | Callback function called when the chart is scrolled upto start | Function | no | all | yes +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | ------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | +| isAnimated | To show animates BarChart. Animation occurs onLoad and on value change | boolean | no | all | yes | +| animationDuration | Duration of the animations | number | no | all | no | +| animationEasing | Easing applied to the animation | Easing | no | all | yes | + +**Pagination related propsAxes and rules related props** + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------------------- | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| onEndReached | Callback function called when the chart is scrolled upto end | Function | no | all | yes | +| onStartReached | Callback function called when the chart is scrolled upto start | Function | no | all | yes | +| endReachedOffset1.4.62+ | distance before end of scroll when onEndReached should be triggered | number | no | all | yes | **Bar related props for making Capped Bar chart** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| cappedBars | To show caps on the top of bars | boolean | no | all | yes -| capThickness | Thickness of the bar caps | number | no | all | yes -| capColor | Color of the bar caps | ColorValue | no | all | yes -| capRadius | Border radius of the bar caps | number | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------ | ------------------------------- | ---------- | -------- | -------- | ----------------- | +| cappedBars | To show caps on the top of bars | boolean | no | all | yes | +| capThickness | Thickness of the bar caps | number | no | all | yes | +| capColor | Color of the bar caps | ColorValue | no | all | yes | +| capRadius | Border radius of the bar caps | number | no | all | yes | **pointerConfig** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| height | Height of the pointer | number | no | all | yes -| width | width of the pointer | number | no | all | yes -| radius | radius of the pointer | number | no | all | yes -| pointerColor | pointer color | ColorValue | no | all | yes -| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using the pointerColorsForDataSet which is an array of color values. | ColorValue[] | no | all | no -| secondaryPointerColor | Secondary pointer color | ColorValue | no | all | no -| pointerComponent | is a function that returns the component to be rendered as a pointer | Function | no | all | yes -| showPointerStrip | show pointer bar | boolean | no | all | yes -| pointerStripWidth | width of the pointer bar | number | no | all | yes -| pointerStripHeight | height of the pointer bar | number | no | all | yes -| pointerStripColor | color of the pointer bar | ColorValue | no | all | yes -| pointerStripUptoDataPoint | Pointer stripped to data point | boolean | no | all | yes -| pointerLabelComponent | is a function that returns the component to be rendered as a Label. It takes 2 parameters - 1. an array of items 2 | Function | no | all | yes -| stripOverPointer | strip to over pointer | boolean | no | all | yes -| autoAdjustPointerLabelPosition | Adjust the position of the pointer | boolean | no | all | yes -| shiftPointerLabelX | x-axis displacement pointer label | number | no | all | yes -| shiftPointerLabelY | y-axis displacement pointer label | number | no | all | yes -| pointerLabelWidth | pointer label width | number | no | all | yes -| pointerLabelHeight | pointer label height | number | no | all | yes -| pointerVanishDelay | Pointer disappearance delay | number | no | all | yes -| activatePointersOnLongPress |Long press to activate pointer | boolean | no | all | yes -| activatePointersDelay | activation pointer delay | number | no | all | no -| persistPointer | persistent pointer | boolean | no | all | yes -| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted pointer | number[] | no | all | yes -| barTouchable | touchable bar | boolean | no | all | yes -| pointerEvents | pointer event in Bars | PointerEvents | no | no | no -| stripBehindBars | hide the strip in Bars | boolean | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------ | ------------------------------------------------------------ | ------------- | -------- | -------- | ----------------- | +| height | Height of the pointer | number | no | all | yes | +| width | width of the pointer | number | no | all | yes | +| radius | radius of the pointer | number | no | all | yes | +| pointerColor | pointer color | ColorValue | no | all | yes | +| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using the pointerColorsForDataSet which is an array of color values. | ColorValue[] | no | all | no | +| secondaryPointerColor | Secondary pointer color | ColorValue | no | all | no | +| pointerComponent | is a function that returns the component to be rendered as a pointer | Function | no | all | yes | +| showPointerStrip | show pointer bar | boolean | no | all | yes | +| pointerStripWidth | width of the pointer bar | number | no | all | yes | +| pointerStripHeight | height of the pointer bar | number | no | all | yes | +| pointerStripColor | color of the pointer bar | ColorValue | no | all | yes | +| pointerStripUptoDataPoint | Pointer stripped to data point | boolean | no | all | yes | +| pointerLabelComponent | is a function that returns the component to be rendered as a Label. It takes 2 parameters - 1. an array of items 2 | Function | no | all | yes | +| stripOverPointer | strip to over pointer | boolean | no | all | yes | +| autoAdjustPointerLabelPosition | Adjust the position of the pointer | boolean | no | all | yes | +| shiftPointerLabelX | x-axis displacement pointer label | number | no | all | yes | +| shiftPointerLabelY | y-axis displacement pointer label | number | no | all | yes | +| pointerLabelWidth | pointer label width | number | no | all | yes | +| pointerLabelHeight | pointer label height | number | no | all | yes | +| pointerVanishDelay | Pointer disappearance delay | number | no | all | yes | +| activatePointersOnLongPress | Long press to activate pointer | boolean | no | all | yes | +| activatePointersDelay | activation pointer delay | number | no | all | no | +| persistPointer | persistent pointer | boolean | no | all | yes | +| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted pointer | number[] | no | all | yes | +| barTouchable | touchable bar | boolean | no | all | yes | +| pointerEvents | pointer event in Bars | PointerEvents | no | no | no | +| stripBehindBars | hide the strip in Bars | boolean | no | all | yes | **Props for horizontal BarChart** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| horizontal | Render horizontal | boolean | no | all | yes -| rtl | Render the chart from right to left | boolean | no | all | yes -| shiftX | Shift the chart towards left or right by given value (only in horizontal charts) | number | no | all | yes -| shiftY | Shift the chart upwards or downwards by given value (only in horizontal charts) | number | no | all | yes -| rotateYAxisTexts | angle by which the Y axis label texts should rotate in horizontal charts | number | no | all | yes -| yAxisAtTop | In horizontal BarCharts the Y axis appears at bottom by default. Set it to true for otherwise | boolean | no | all | yes -| intactTopLabel | To rotate the top label component to make it intact with the Bars | boolean | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | +| horizontal | Render horizontal | boolean | no | all | yes | +| rtl | Render the chart from right to left | boolean | no | all | yes | +| shiftX | Shift the chart towards left or right by given value (only in horizontal charts) | number | no | all | yes | +| shiftY | Shift the chart upwards or downwards by given value (only in horizontal charts) | number | no | all | yes | +| rotateYAxisTexts | angle by which the Y axis label texts should rotate in horizontal charts | number | no | all | yes | +| yAxisAtTop | In horizontal BarCharts the Y axis appears at bottom by default. Set it to true for otherwise | boolean | no | all | yes | +| intactTopLabel | To rotate the top label component to make it intact with the Bars | boolean | no | all | yes | **Props for Stacked Bar Charts** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| stackData | A stack array represents a stack of bars in the bar chart. It is described in the next table | Array of stack arrays | no | all | yes -| barBorderRadius | Border radius of each bar of the stack | number| no | all | yes -| barBorderTopLeftRadius | Top left border radius of each bar of the stack | number| no | all | yes -| barBorderTopRightRadius | Top right border radius of each bar of the stack | number | no | all | yes -| barBorderBottomLeftRadius | Bottom left border radius of each bar of the stack | number | no | all | yes -| barBorderBottomRightRadius | Bottom right border radius of each bar of the stack | number | no | all | yes -| stackBorderRadius | Border radius of the top and bottom bars of the stack | number | no | all | yes -| stackBorderTopLeftRadius | Top left border radius of the top bar of the stack | number| no | all | yes -| stackBorderTopRightRadius | Top right border radius of the top bar of the stack | number | no | all | yes -| stackBorderBottomLeftRadius | Bottom left border radius of the bottom bar of the stack | number | no | all | yes -| stackBorderBottomRightRadius | Bottom right border radius of the bottom bar of the stack | number | no | all | yes -| autoShiftLabelsForNegativeStacks | Whether the x axis labels should auto shift to a position below the bar, if the bar is under x-axis due to negative value | boolean| no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------------------------- | ------------------------------------------------------------ | --------------------- | -------- | -------- | ----------------- | +| stackData | A stack array represents a stack of bars in the bar chart. It is described in the next table | Array of stack arrays | no | all | yes | +| barBorderRadius | Border radius of each bar of the stack | number | no | all | yes | +| barBorderTopLeftRadius | Top left border radius of each bar of the stack | number | no | all | yes | +| barBorderTopRightRadius | Top right border radius of each bar of the stack | number | no | all | yes | +| barBorderBottomLeftRadius | Bottom left border radius of each bar of the stack | number | no | all | yes | +| barBorderBottomRightRadius | Bottom right border radius of each bar of the stack | number | no | all | yes | +| stackBorderRadius | Border radius of the top and bottom bars of the stack | number | no | all | yes | +| stackBorderTopLeftRadius | Top left border radius of the top bar of the stack | number | no | all | yes | +| stackBorderTopRightRadius | Top right border radius of the top bar of the stack | number | no | all | yes | +| stackBorderBottomLeftRadius | Bottom left border radius of the bottom bar of the stack | number | no | all | yes | +| stackBorderBottomRightRadius | Bottom right border radius of the bottom bar of the stack | number | no | all | yes | +| autoShiftLabelsForNegativeStacks | Whether the x axis labels should auto shift to a position below the bar, if the bar is under x-axis due to negative value | boolean | no | all | yes | +| stackHighlightEnabled1.4.62+ | used to highlight a section of the Bar from each stack on press | boolean | no | all | yes | +| highlightedStackIndex1.4.62+ | index of the selected section (state variable) | number | no | all | yes | **Stack Array description** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| stacks array | A stack is made of 1 or more objects of the type described in the next table | Array of stack items| no | all | yes -| label | Label text appearing below the stack (under the X axis) | string | no | all | yes -| labelTextStyle | Style object for the label text appearing below the stack | object| no | all | yes -| barWidth | Width of the stack bar | number| no | all | yes -| spacing | Distance between 2 consecutive bars in the stack Bar chart | number| no | all | yes -| borderRadius | Border radius of each bar of the stack | number| no | all | yes -| borderTopLeftRadius | Top left border radius of the top bar of the stack | number| no | all | yes -| borderTopRightRadius | Top right border radius of the top bar of the stack | number| no | all | yes -| borderBottomLeftRadius | Bottom left border radius of the bottom bar of the stack | number| no | all | yes -| borderBottomRightRadius | Bottom right border radius of the bottom bar of the stack | number| no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------- | ------------------------------------------------------------ | -------------------- | -------- | -------- | ----------------- | +| stacks array | A stack is made of 1 or more objects of the type described in the next table | Array of stack items | no | all | yes | +| label | Label text appearing below the stack (under the X axis) | string | no | all | yes | +| labelTextStyle | Style object for the label text appearing below the stack | object | no | all | yes | +| barWidth | Width of the stack bar | number | no | all | yes | +| spacing | Distance between 2 consecutive bars in the stack Bar chart | number | no | all | yes | +| borderRadius | Border radius of each bar of the stack | number | no | all | yes | +| borderTopLeftRadius | Top left border radius of the top bar of the stack | number | no | all | yes | +| borderTopRightRadius | Top right border radius of the top bar of the stack | number | no | all | yes | +| borderBottomLeftRadius | Bottom left border radius of the bottom bar of the stack | number | no | all | yes | +| borderBottomRightRadius | Bottom right border radius of the bottom bar of the stack | number | no | all | yes | **Stack item description** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| value | Value of the item representing height of the stack item | number | no | all | yes -| color | Color of the stack item | ColorValue | no | all | yes -| onPress | Function called on pressing the stack item | function | no | all | yes -| onLongPress | Function called on long pressing the stack item | function | no | all | yes -| onPressOut | Callback function called on press out of a bar | Function | no | all | yes -| marginBottom | margin below a particular stack sectio | number n | no | all | yes -| barBorderRadius | Border radius of a stack section | number | no | all | yes -| borderTopLeftRadius | borderTopLeftRadius for a stack section | number | no | all | yes -| borderTopRightRadius | borderTopRightRadius for a stack section | number | no | all | yes -| borderBottomLeftRadius | borderBottomLeftRadius for a stack section | number | no | all | yes -| borderBottomRightRadius | borderBottomRightRadius for a stack section | number | no | all | yes -| showGradient | Prop to enable linear gradient for the bar color, defaults to false | boolean | no | all | yes -| gradientColor | Along with frontColor, this prop constitutes the 2 colors for gradient| ColorValue | no | all | yes -| barWidth | Width of the bar | number | no | all | yes -| showXAxisIndex | show small graduation at the X axis for the corresponding stack | boolean | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------------------- | ------------------------------------------------------------ | --------------- | -------- | -------- | ----------------- | +| value | Value of the item representing height of the stack item | number | no | all | yes | +| color | Color of the stack item | ColorValue | no | all | yes | +| onPress | Function called on pressing the stack item | function | no | all | yes | +| onLongPress | Function called on long pressing the stack item | function | no | all | yes | +| onPressOut | Callback function called on press out of a bar | Function | no | all | yes | +| marginBottom | margin below a particular stack sectio | number n | no | all | yes | +| barBorderRadius | Border radius of a stack section | number | no | all | yes | +| borderTopLeftRadius | borderTopLeftRadius for a stack section | number | no | all | yes | +| borderTopRightRadius | borderTopRightRadius for a stack section | number | no | all | yes | +| borderBottomLeftRadius | borderBottomLeftRadius for a stack section | number | no | all | yes | +| borderBottomRightRadius | borderBottomRightRadius for a stack section | number | no | all | yes | +| showGradient | Prop to enable linear gradient for the bar color, defaults to false | boolean | no | all | yes | +| gradientColor | Along with frontColor, this prop constitutes the 2 colors for gradient | ColorValue | no | all | yes | +| barWidth | Width of the bar | number | no | all | yes | +| showXAxisIndex | show small graduation at the X axis for the corresponding stack | boolean | no | all | yes | +| innerBarComponent1.4.62+ | Renders a component inside a section of a stack | () => ReactNode | no | all | yes | ### LineChart and AreaChart **Basic props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | An item object represents a point in the line chart. It is described in the next table. | Array | no | all | yes -| data2 | Second set of dataPoint for the second line | Array | no | all | yes -| data3 | Third set of dataPoint for the third line | Array | no | all | yes -| data4 | Fourth set of dataPoint for the fourth line | Array | no | all | yes -| data5 | Fifth set of dataPoint for the third line| Array | no | all | yes -| dataSet | Array of data sets (used instead of using `data2`, `data3`, `data4` etc) | Array| no | all | yes -| width | Width of the Bar chart | number | no | all | yes -| height| Height of the Bar chart (excluding the bottom label) | number | no | all | yes -| overflowTop | Extra space at the top of the chart to make room for dataPointText | number | no | all | yes -| overflowBottom | Extra space at the bottom of the chart to make room for dataPoints or dataPointText | number | no | all | yes -| maxValue | Maximum value shown in the Y axis | number | no | all | yes -| mostNegativeValue | The most negative value shown in the Y axis (to be used only if the data set has negative values too) | number | no | all | yes -| noOfSections | Number of sections in the Y axis | number | no | all | yes -| noOfSectionsBelowXAxis | Number of sections in the Y axis below X axis (in case the data set has negative values too)| number | no | all | yes -| stepValue | Value of 1 step/section in the Y axis | number | no | all | yes -| stepHeight | Height of 1 step/section in the Y axis| number | no | all | yes -| spacing | Distance between 2 consecutive bars in the Bar chart | number | no | all | yes -| adjustToWidth | When set to true, it auto computes the spacing value to fit the Line chart in the available width | boolean | no | all | yes -| backgroundColor | Background color of the Bar chart | ColorValue | no | all | yes -| sectionColors | Background color of the horizontal sections of the chart | Array | no | all | no -| scrollref | ref object that can be used to control the horizontal ScrollView inside which the chart is rendered | any | no | all | yes -| scrollToIndex | scroll to a particular index on chart load | number | no | all | yes -| disableScroll | To disable horizontal scroll | boolean | no | all | yes -| showScrollIndicator | To show horizontal scroll indicator | boolean | no | all | yes -| indicatorColor | (iOS only) The color of the scroll indicators - ('black', 'white' or 'default') | String | no | all | yes -| isAnimated | To show animated Line or Area Chart. Animation occurs when the chart load for the first time | boolean | no | all | yes -| onPress | The callback function that handles the press event. `item` and `index` are received as props | Function | no | all | yes -| scrollToEnd | When set to true, the chart automatically scrolls to the rightmost data point | boolean | no | all | yes -| scrollAnimation | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost data point | boolean | no | all | yes -| scrollEventThrottle | (only for iOS) see https://reactnative.dev/docs/scrollview#scrolleventthrottle-ios | number | no | iOS | yes -| onScroll | callback function called when the chart is scrolled horizontally| Function | no | all | yes -| onMomentumScrollEnd | callback function called when scroll is completed | Function| no | all | yes -| initialSpacing | distance of the first data point from the Y axis| number | no | all | yes -| endSpacing | distance/padding left at the end of the line chart | number | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------------------------------------- | ------------------------------------------------------------ | ------------------------- | -------- | -------- | ----------------- | +| data | An item object represents a point in the line chart. It is described in the next table. | Array | no | all | yes | +| data2 | Second set of dataPoint for the second line | Array | no | all | yes | +| data3 | Third set of dataPoint for the third line | Array | no | all | yes | +| data4 | Fourth set of dataPoint for the fourth line | Array | no | all | yes | +| data5 | Fifth set of dataPoint for the third line | Array | no | all | yes | +| dataSet | Array of data sets (used instead of using `data2`, `data3`, `data4` etc) | Array | no | all | yes | +| width | Width of the Bar chart | number | no | all | yes | +| height | Height of the Bar chart (excluding the bottom label) | number | no | all | yes | +| overflowTop | Extra space at the top of the chart to make room for dataPointText | number | no | all | yes | +| overflowBottom | Extra space at the bottom of the chart to make room for dataPoints or dataPointText | number | no | all | yes | +| maxValue | Maximum value shown in the Y axis | number | no | all | yes | +| mostNegativeValue | The most negative value shown in the Y axis (to be used only if the data set has negative values too) | number | no | all | yes | +| noOfSections | Number of sections in the Y axis | number | no | all | yes | +| noOfSectionsBelowXAxis | Number of sections in the Y axis below X axis (in case the data set has negative values too) | number | no | all | yes | +| stepValue | Value of 1 step/section in the Y axis | number | no | all | yes | +| stepHeight | Height of 1 step/section in the Y axis | number | no | all | yes | +| spacing | Distance between 2 consecutive bars in the Bar chart | number | no | all | yes | +| adjustToWidth | When set to true, it auto computes the spacing value to fit the Line chart in the available width | boolean | no | all | yes | +| backgroundColor | Background color of the Bar chart | ColorValue | no | all | yes | +| sectionColors | Background color of the horizontal sections of the chart | Array | no | all | no | +| scrollref | ref object that can be used to control the horizontal ScrollView inside which the chart is rendered | any | no | all | yes | +| scrollToIndex | scroll to a particular index on chart load | number | no | all | yes | +| disableScroll | To disable horizontal scroll | boolean | no | all | yes | +| showScrollIndicator | To show horizontal scroll indicator | boolean | no | all | yes | +| indicatorColor | (iOS only) The color of the scroll indicators - ('black', 'white' or 'default') | String | no | all | yes | +| isAnimated | To show animated Line or Area Chart. Animation occurs when the chart load for the first time | boolean | no | all | yes | +| onPress | The callback function that handles the press event. `item` and `index` are received as props | Function | no | all | yes | +| scrollToEnd | When set to true, the chart automatically scrolls to the rightmost data point | boolean | no | all | yes | +| scrollAnimation | When set to true, scroll animation is visible when the chart automatically scrolls to the rightmost data point | boolean | no | all | yes | +| scrollEventThrottle | (only for iOS) see [https://reactnative.dev/docs/scrollview#scrolleventthrottle-ios](https://gitee.com/link?target=https%3A%2F%2Freactnative.dev%2Fdocs%2Fscrollview%23scrolleventthrottle-ios) | number | no | iOS | yes | +| onScroll | callback function called when the chart is scrolled horizontally | Function | no | all | yes | +| onMomentumScrollEnd | callback function called when scroll is completed | Function | no | all | yes | +| initialSpacing | distance of the first data point from the Y axis | number | no | all | yes | +| endSpacing | distance/padding left at the end of the line chart | number | no | all | yes | +| customBackground1.4.62+ | An object used to set a custom background component (See the properties of this object below) | CustomBackground | no | all | yes | +| nestedScrollEnabled1.4.62+ | Useful when the chart is used inside a horizontal ScrollView (without this, the chart's scrolling is compromised) | boolean | no | all | yes | +| animateOnDataChange1.4.62+ | To show animation on change in data. A smooth transition takes place between the old and new line | boolean | no | all | yes | +| onDataChangeAnimationDuration1.4.62+ | Duration (milliseconds) in which the transition animation takes place on a change in data | number | no | all | yes | +| renderDataPointsAfterAnimationEnds1.4.62+ | to render the data points after the animation has ended. use if onPress or focusedDataPoint is used in multi-line animated charts (see note below) | boolean | no | all | yes | +| onScrollEndDrag1.4.62+ | callback function called when the chart is has finished scrolling. See Note below. | (event,direction) => void | no | all | yes | +| bounces1.4.62+ | controls the bouncing effect of the Scrolling chart on iOS. See [https://reactnative.dev/docs/scrollview#bounces-ios](#bounces-ios) | boolean | no | ios | no | +| overScrollMode1.4.62+ | controls the bouncing effect of the Scrolling chart on Android. See [https://reactnative.dev/docs/scrollview#overscrollmode-android](#overscrollmode-android) | boolean | no | Android | no | +| stepChart1.4.62+ | If set true, renders a step chart | boolean | no | all | yes | +| stepChart11.4.62+ | If set true, renders a step chart for 1st data set | boolean | no | all | no | +| stepChart21.4.62+ | If set true, renders a step chart for 2nd data set | boolean | no | all | no | +| stepChart31.4.62+ | If set true, renders a step chart for 3rd data set | boolean | no | all | no | +| stepChart41.4.62+ | If set true, renders a step chart for 4th data set | boolean | no | all | no | +| stepChart51.4.62+ | If set true, renders a step chart for 5th data set | boolean | no | all | no | +| edgePosition1.4.62+ | Used only for stepCharts to specify the edge positions of the steps | EdgePosition | no | all | yes | +| onlyPositive1.4.62+ | when this prop is truthy, it converts negative values to 0 | boolean | no | all | yes | +| onBackgroundPress1.4.62+ | Callback function called on pressing the chart body (outside of the are under chart in case of area charts) | Function | no | all | yes | **Item description (lineDataItem)** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| value| Value of the item representing representing its position | number | no | all | yes -| onPress | Function called on pressing the data point | function | no | all | no -| label | Label text appearing under the X axis | string | no | all | yes -| labelTextStyle | Style object for the label text appearing under the X axis | object | no | all | yes -| labelComponent | custom label component appearing under the X axis | Function | no | all | yes -| yAxisLabelText | Y axis label text | string | no | all | yes -| dataPointText | Text appearing near the data points | string | no | all | yes -| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes -| textShiftY | To shift the dataPointText text vertically | number | no | all | yes -| textColor | Color of the dataPointText | ColorValue| no | all | yes -| textFontSize | Font size of the dataPointText | number | no | all | yes -| dataPointHeight | Height of the data point (when data point's shape is rectangular) | number | no | all | yes -| dataPointWidth | Width of the data point (when data point's shape is rectangular) | number | no | all | yes -| dataPointRadius | Radius of the data point (when data points' shape is circular) | number| no | all | yes -| dataPointColor | Color of the data point | ColorValue | no | all | yes -| dataPointShape | Shape of the data point (rectangular or circular) defaults to circular | string | no | all | yes -| hideDataPoint | To hide the data point | boolean | no | all | yes -| showVerticalLine | When set to true, a vertical line will be displayed along that data point | boolean | no | all | yes -| verticalLineUptoDataPoint | When set to true, it sets the height of the vertical line upto the corresponding data point | boolean | no | all | yes -| verticalLineColor | Color of the vertical Line displayed along the data point | ColorValue | no | all | yes -| verticalLineThickness | Thickness of the vertical Line displayed along the data point | number| no | all | yes -| dataPointLabelWidth | width of the label shown beside a data point | number | no | all | no -| dataPointLabelShiftX | horizontal shift of a label from its corresponding data point | number | no | all | no -| dataPointLabelShiftY | vertical shift of a label from its corresponding data point | number | no | all | no -| dataPointLabelComponent | custom component rendered above a data point| Function | no | all | no -| focusedDataPointLabelComponent | custom component rendered above a data point only when focused/selected (when the user presses) | Function | no | all | no -| showStrip | To show a vertical strip along the data point (even if it's not focused/selected) | boolean | no | all | yes -| stripHeight | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number| no | all | yes -| stripWidth | Width of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number| no | all | yes -| stripColor | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | ColorValue| no | all | yes -| stripOpacity | Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number| no | all | yes -| pointerShiftX | Shifts the pointer for that item horizontally by given quantity (used only when pointerConfig prop is passed) | number| no | all | yes -| pointerShiftY | Shifts the pointer for that item vertically by given quantity (used only when pointerConfig prop is passed) | number | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------------------------- | ------------------------------------------------------------ | ---------- | -------- | -------- | ----------------- | +| value | Value of the item representing representing its position | number | no | all | yes | +| onPress | Function called on pressing the data point | function | no | all | no | +| label | Label text appearing under the X axis | string | no | all | yes | +| labelTextStyle | Style object for the label text appearing under the X axis | object | no | all | yes | +| labelComponent | custom label component appearing under the X axis | Function | no | all | yes | +| yAxisLabelText | Y axis label text | string | no | all | yes | +| dataPointText | Text appearing near the data points | string | no | all | yes | +| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes | +| textShiftY | To shift the dataPointText text vertically | number | no | all | yes | +| textColor | Color of the dataPointText | ColorValue | no | all | yes | +| textFontSize | Font size of the dataPointText | number | no | all | yes | +| dataPointHeight | Height of the data point (when data point's shape is rectangular) | number | no | all | yes | +| dataPointWidth | Width of the data point (when data point's shape is rectangular) | number | no | all | yes | +| dataPointRadius | Radius of the data point (when data points' shape is circular) | number | no | all | yes | +| dataPointColor | Color of the data point | ColorValue | no | all | yes | +| dataPointShape | Shape of the data point (rectangular or circular) defaults to circular | string | no | all | yes | +| hideDataPoint | To hide the data point | boolean | no | all | yes | +| showVerticalLine | When set to true, a vertical line will be displayed along that data point | boolean | no | all | yes | +| verticalLineUptoDataPoint | When set to true, it sets the height of the vertical line upto the corresponding data point | boolean | no | all | yes | +| verticalLineColor | Color of the vertical Line displayed along the data point | ColorValue | no | all | yes | +| verticalLineThickness | Thickness of the vertical Line displayed along the data point | number | no | all | yes | +| dataPointLabelWidth | width of the label shown beside a data point | number | no | all | no | +| dataPointLabelShiftX | horizontal shift of a label from its corresponding data point | number | no | all | no | +| dataPointLabelShiftY | vertical shift of a label from its corresponding data point | number | no | all | no | +| dataPointLabelComponent | custom component rendered above a data point | Function | no | all | no | +| focusedDataPointLabelComponent | custom component rendered above a data point only when focused/selected (when the user presses) | Function | no | all | no | +| showStrip | To show a vertical strip along the data point (even if it's not focused/selected) | boolean | no | all | yes | +| stripHeight | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number | no | all | yes | +| stripWidth | Width of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number | no | all | yes | +| stripColor | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | ColorValue | no | all | yes | +| stripOpacity | Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart, or when showStrip is set to true | number | no | all | yes | +| pointerShiftX | Shifts the pointer for that item horizontally by given quantity (used only when pointerConfig prop is passed) | number | no | all | yes | +| pointerShiftY | Shifts the pointer for that item vertically by given quantity (used only when pointerConfig prop is passed) | number | no | all | yes | +| secondaryLabel1.4.62+ | Label text appearing above the secondary X-axis (at the top of the chart) | string | no | all | yes | +| secondaryLabelComponent1.4.62+ | Custom label component appearing above the secondary X-axis (at the top of the chart) | Component | no | all | yes | +| secondaryLabelTextStyle1.4.62+ | Style object for the label text of secondary X-axis (at the top of the chart) | object | no | all | yes | +| spacing1.4.62+ | Distance between 2 consecutive points in the Line chart | number | no | all | yes | +| stripStrokeDashArray1.4.62+ | Array of 2 numbers denoting the dashWidth and dashGap of the vertical strip | Array | no | all | yes | **Pagination related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| onEndReached | Callback function called when the chart is scrolled upto end | Function | no | all | yes -| onStartReached | Callback function called when the chart is scrolled upto start | Function | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------------------- | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| onEndReached | Callback function called when the chart is scrolled upto end | Function | no | all | yes | +| onStartReached | Callback function called when the chart is scrolled upto start | Function | no | all | yes | +| endReachedOffset1.4.62+ | distance before end of scroll when onEndReached should be triggered | number | no | all | yes | **Axes and rules related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| xAxisLength | X axis length | number | no | all | yes -| xAxisColor| X axis color | ColorValue | no | all | yes -| xAxisThickness | X axis thickness | number | no | all | yes -| xAxisType | solid or dotted/dashed | RuleType | no | all | yes -| yAxisColor | Y axis color | ColorValue | no | all | yes -| yAxisThickness | Y axis thickness | number | no | all | yes -| yAxisLabelWidth | Width of the Y axis Label container | number | no | all | ye -| yAxisTextStyle | Style object for the Y axis text style | object | no | all | yes -| yAxisTextNumberOfLines | Number of lines for y axis label text | number | no | all | yes -| yAxisLabelContainerStyle | Style object for the Y axis label container | object | no | all | yes -| trimYAxisAtTop | Removes the extra length of the Y axis from the top | boolean | no | all | yes -| yAxisExtraHeight | Extra length of Y axis at the top | number | no | all | yes -| yAxisOffset | Starting value on Y Axis | number | no | all | yes -| horizontalRulesStyle | Style object for the horizontal rules container | object | no | all | yes -| showFractionalValues | Allow fractional values for the Y axis label | boolean | no | all | yes -| roundToDigits | Rounds the y axis values to given number of digits after decimal point | number | no | all | yes -| yAxisLabelPrefix | The String prepended to the y axis label text (for example- '$') | String| no | all | yes -| yAxisLabelSuffix |The String appended to the y axis label text | String| no | all | yes -| hideYAxisText | To hide Y axis label text | boolean | no | all | yes -| formatYLabel | a callback function that takes the label generated by the library and modifies it. | (label: string) => string | no | all | yes -| yAxisSide | Tells which side of the chart, should the y axis be present, defaults to 'left' | String | no | all | yes -| rulesLength | Length of the horizontal | number | no | all | yes -| rulesColor | Color of the horizontal rules | ColorValue | no | all | yes | -| rulesThickness | Thickness of the horizontal | number | no | all | yes -| hideRules | To hide the horizontal | boolean | no | all | yes -| rulesType | solid or dotted/dashed | RuleType | no | all | yes -| dashWidth | width of each dash | number | no | all | yes -| dashGap | gap between 2 | number | no | all | yes -| rulesConfigArray | Array of rulesConfig objects, used to customise the properties (like color, type etc) of specific rules | Array | no | all | yes -| showReferenceLine1 | show reference line | boolean | no | all | yes -| referenceLine1Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes -| referenceLine1Position | position of reference | number | no | all | yes -| showReferenceLine2 | show second reference | boolean | no | all | yes -| referenceLine2Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType| no | all | yes -| referenceLine2Position | position of second reference | number | no | all | yes -| showReferenceLine3 | show third reference | boolean | no | all | yes -| referenceLine3Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes -| referenceLine3Position | position of third reference line | number| no | all | yes -| showVerticalLines | To show vertical lines | boolean | no | all | yes -| verticalLinesUptoDataPoint | To set the height of the vertical lines upto the corresponding data point| boolean | no | all | yes -| verticallinesThickness | Thickness of the vertical lines | number | no | all | yes -| verticalLinesHeight | Height of the vertical lines | number | no | all | yes -| verticalLinesStrokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted vertical line | Array| no | all |yes -| verticalLinesShift | vertical lines are aligned with data point. Shift them left or right using +ve or -ve value of verticalLinesShift| number| no | all |yes -| verticalLinesZIndex | Z index of the vertical lines | number | no | all | yes -| noOfVerticalLines | Number of vertical lines displayed | number | no | all | yes -| verticalLinesSpacing | Distance between consecutive vertical lines | number | no | all | yes -| showXAxisIndices | To show the pointers on the X axis| boolean | no | all | yes -| xAxisIndicesHeight | Height of the pointers on the X axis | number | no | all | yes -| xAxisIndicesWidth | Width of the pointers on the X axis | number | no | all | yes -| xAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes -| showYAxisIndices | To show the pointers on the Y axis | boolean | no | all | yes -| yAxisIndicesHeight | Height of the pointers on the Y axis | number | no | all | yes -| yAxisIndicesWidth | Width of the pointers on the Y axis | number | no | all | yes -| yAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes -| hideAxesAndRules | To hide axes, rules, labels altogether | boolean | no | all | yes -| yAxisLabelTexts | Array of label texts to be displayed along y axis | Array| no | all |yes -| xAxisLabelTexts | Array of label texts to be displayed below x axis | Array| no | all |yes -| xAxisLabelTextStyle | Style of label texts to be displayed below x axis | object | no | all | yes -| xAxisTextNumberOfLines | Number of lines for x axis label text | number | no | all | yes -| xAxisLabelsHeight | Height of X axis labels container | number | no | all | yes -| xAxisLabelsVerticalShift | prop to adjust the vertical position of X axis labels (move X axis labels up or down) | number | no | all |yes -| rotateLabel | To rotate the X axis labels (by 60deg) | boolean | no | all | yes -| hideOrigin | To hide the y Axis label at origin (i.e. 0) | boolean | no | all | yes -| secondaryYAxis | displays and controls the properties of the secondary Y axis on the right side | secondaryYAxisType | no | all |yes -| secondaryData | the secondary data that will be rendered along the secondary Y axis | Array of items | no | all | yes -| secondaryLineConfig | properties of the secondary data line (secondaryLineConfigType is described below) | secondaryLineConfigType| no | all |yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------------------------ | ------------------------------------------------------------ | ----------------------------- | -------- | -------- | ----------------- | +| xAxisLength | X axis length | number | no | all | yes | +| xAxisColor | X axis color | ColorValue | no | all | yes | +| xAxisThickness | X axis thickness | number | no | all | yes | +| xAxisType | solid or dotted/dashed | RuleType | no | all | yes | +| yAxisColor | Y axis color | ColorValue | no | all | yes | +| yAxisThickness | Y axis thickness | number | no | all | yes | +| yAxisLabelWidth | Width of the Y axis Label container | number | no | all | ye | +| yAxisTextStyle | Style object for the Y axis text style | object | no | all | yes | +| yAxisTextNumberOfLines | Number of lines for y axis label text | number | no | all | yes | +| yAxisLabelContainerStyle | Style object for the Y axis label container | object | no | all | yes | +| trimYAxisAtTop | Removes the extra length of the Y axis from the top | boolean | no | all | yes | +| yAxisExtraHeight | Extra length of Y axis at the top | number | no | all | yes | +| yAxisOffset | Starting value on Y Axis | number | no | all | yes | +| horizontalRulesStyle | Style object for the horizontal rules container | object | no | all | yes | +| showFractionalValues | Allow fractional values for the Y axis label | boolean | no | all | yes | +| roundToDigits | Rounds the y axis values to given number of digits after decimal point | number | no | all | yes | +| yAxisLabelPrefix | The String prepended to the y axis label text (for example- '$') | String | no | all | yes | +| yAxisLabelSuffix | The String appended to the y axis label text | String | no | all | yes | +| hideYAxisText | To hide Y axis label text | boolean | no | all | yes | +| formatYLabel | a callback function that takes the label generated by the library and modifies it. | (label: string) => string | no | all | yes | +| yAxisSide | Tells which side of the chart, should the y axis be present, defaults to 'left' | String | no | all | yes | +| rulesLength | Length of the horizontal | number | no | all | yes | +| rulesColor | Color of the horizontal rules | ColorValue | no | all | yes | +| rulesThickness | Thickness of the horizontal | number | no | all | yes | +| hideRules | To hide the horizontal | boolean | no | all | yes | +| rulesType | solid or dotted/dashed | RuleType | no | all | yes | +| dashWidth | width of each dash | number | no | all | yes | +| dashGap | gap between 2 | number | no | all | yes | +| rulesConfigArray | Array of rulesConfig objects, used to customise the properties (like color, type etc) of specific rules | Array | no | all | yes | +| showReferenceLine1 | show reference line | boolean | no | all | yes | +| referenceLine1Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes | +| referenceLine1Position | position of reference | number | no | all | yes | +| showReferenceLine2 | show second reference | boolean | no | all | yes | +| referenceLine2Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes | +| referenceLine2Position | position of second reference | number | no | all | yes | +| showReferenceLine3 | show third reference | boolean | no | all | yes | +| referenceLine3Config | properties of reference line like thickness, color etc (described below the table) | referenceConfigType | no | all | yes | +| referenceLine3Position | position of third reference line | number | no | all | yes | +| showVerticalLines | To show vertical lines | boolean | no | all | yes | +| verticalLinesUptoDataPoint | To set the height of the vertical lines upto the corresponding data point | boolean | no | all | yes | +| verticallinesThickness | Thickness of the vertical lines | number | no | all | yes | +| verticalLinesHeight | Height of the vertical lines | number | no | all | yes | +| verticalLinesStrokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted vertical line | Array | no | all | yes | +| verticalLinesShift | vertical lines are aligned with data point. Shift them left or right using +ve or -ve value of verticalLinesShift | number | no | all | yes | +| verticalLinesZIndex | Z index of the vertical lines | number | no | all | yes | +| noOfVerticalLines | Number of vertical lines displayed | number | no | all | yes | +| verticalLinesSpacing | Distance between consecutive vertical lines | number | no | all | yes | +| showXAxisIndices | To show the pointers on the X axis | boolean | no | all | yes | +| xAxisIndicesHeight | Height of the pointers on the X axis | number | no | all | yes | +| xAxisIndicesWidth | Width of the pointers on the X axis | number | no | all | yes | +| xAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes | +| showYAxisIndices | To show the pointers on the Y axis | boolean | no | all | yes | +| yAxisIndicesHeight | Height of the pointers on the Y axis | number | no | all | yes | +| yAxisIndicesWidth | Width of the pointers on the Y axis | number | no | all | yes | +| yAxisIndicesColor | Color of the pointers on the X axis | ColorValue | no | all | yes | +| hideAxesAndRules | To hide axes, rules, labels altogether | boolean | no | all | yes | +| yAxisLabelTexts | Array of label texts to be displayed along y axis | Array | no | all | yes | +| xAxisLabelTexts | Array of label texts to be displayed below x axis | Array | no | all | yes | +| xAxisLabelTextStyle | Style of label texts to be displayed below x axis | object | no | all | yes | +| xAxisTextNumberOfLines | Number of lines for x axis label text | number | no | all | yes | +| xAxisLabelsHeight | Height of X axis labels container | number | no | all | yes | +| xAxisLabelsVerticalShift | prop to adjust the vertical position of X axis labels (move X axis labels up or down) | number | no | all | yes | +| rotateLabel | To rotate the X axis labels (by 60deg) | boolean | no | all | yes | +| hideOrigin | To hide the y Axis label at origin (i.e. 0) | boolean | no | all | yes | +| secondaryYAxis | displays and controls the properties of the secondary Y axis on the right side | secondaryYAxisType | no | all | yes | +| secondaryData | the secondary data that will be rendered along the secondary Y axis | Array of items | no | all | yes | +| secondaryLineConfig | properties of the secondary data line (secondaryLineConfigType is described below) | secondaryLineConfigType | no | all | yes | +| referenceLinesOverChartContent1.4.62+ | used to render the reference lines over the rest of the chart content. | boolean | no | all | yes | +| verticalLinesColor1.4.62+ | Color of the vertical lines | ColorValue | no | all | yes | +| verticalLinesStrokeLinecap1.4.62+ | Linecap of the vertical lines (see stroke-linecap in svg) | 'butt' \| 'round' \| 'square' | no | all | yes | +| yAxisIndicesColor1.4.62+ | To hide axes, rules, labels altogether | ColorValue | no | all | yes | +| xAxisLabelsAtBottom1.4.62+ | places the x-axis labels at bottom of the chart, useful in charts involving -ve values (4th quadrant) | boolean | no | all | yes | +| secondaryXAxis1.4.62+ | properties of the secondary X-axis (appearing at the top of the chart) | XAxisConfig | no | all | yes | **Line related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| curved | To show curved line joining the data points | boolean| no | all |yes -| color | Color of the lines joining the data points | ColorValue | no | all | yes -| color1| Color of the lines joining the first set of data points | ColorValue | no | all | yes -| color2 | Color of the lines joining the second set of data points | ColorValue| no | all | yes -| color3 | Color of the lines joining the third set of data points | ColorValue| no | all | yes -| color4 | Color of the lines joining the fourth set of data points | ColorValue| no | all | yes -| color5 | Color of the lines joining the fifth set of data points | ColorValue| no | all | yes -| thickness | Thickness of the lines joining the data points | number| no | all | yes -| thickness1 | Thickness of the lines joining the first set of data points | number | no | all | yes -| thickness2 | Thickness of the lines joining the second set of data points | number | no | all | yes -| thickness3 | Thickness of the lines joining the third set of data points | number | no | all | yes -| thickness4 | Thickness of the lines joining the fourth set of data points | number| no | all | yes -| thickness5 | Thickness of the lines joining the fifth set of data points | number | no | all | yes -| zIndex1 | zIndex of the lines joining the first set of data points | number | no | all | yes -| zIndex2 | zIndex of the lines joining the second set of data points | number | no | all | yes -| zIndex3 | zIndex of the lines joining the third set of data points| number | no | all | yes -| zIndex4 | zIndex of the lines joining the fourth set of data points | number | no | all | yes -| zIndex5 | zIndex of the lines joining the fifth set of data points | number | no | all | yes -| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted line chart | Array| no | all | yes -| strokeDashArray1 | Array of 2 numbers denoting the dashWidth and dashGap of line1. Used to render dashed/dotted line chart| Array | no | all | yes -| strokeDashArray2| Array of 2 numbers denoting the dashWidth and dashGap of line2. Used to render dashed/dotted line chart | Array| no | all | yes -| strokeDashArray3 | Array of 2 numbers denoting the dashWidth and dashGap of line3. Used to render dashed/dotted line chart | Array| no | all | yes -| strokeDashArray4 | Array of 2 numbers denoting the dashWidth and dashGap of line4. Used to render dashed/dotted line chart | Array| no | all | yes -| strokeDashArray5 | Array of 2 numbers denoting the dashWidth and dashGap of line5. Used to render dashed/dotted line chart | Array | no | all | yes -| lineSegments | Array of objects used to customize segments (parts) of line | Array | no | all | yes -| lineSegments2 | Array of objects used to customize segments (parts) of line2 | Array | no | all | yes -| lineSegments3 | Array of objects used to customize segments (parts) of line3 | Array | no | all | yes -| lineSegments4 | Array of objects used to customize segments (parts) of line4 | Array | no | all | yes -| lineSegments5 | Array of objects used to customize segments (parts) of line5 | Array | no | all | yes -| highlightedRange | renders the parts of lines lying in a given data range with a different style (color, thickness,type)| HighlightedRange | no | all | yes -| startIndex | Start index for data line (used to display data lines having breaks) | number | no | all | yes -| startIndex1 | Start index for data line 1 (used to display data lines having breaks) | number| no | all | yes -| startIndex2 | Start index for data line 2 (used to display data lines having breaks) | number | no | all | yes -| startIndex3 | Start index for data line 3 (used to display data lines having breaks) | number | no | all | yes -| startIndex4 | Start index for data line 4 (used to display data lines having breaks) | number | no | all | yes -| startIndex5 | Start index for data line 5 (used to display data lines having breaks) | number| no | all | yes -| endIndex | End index for data line (used to display data lines having breaks) | number| no | all | yes -| endIndex1 | End index for data line 1 (used to display data lines having breaks) | number | no | all | yes -| endIndex2 | End index for data line 2 (used to display data lines having breaks) | number| no | all | yes -| endIndex3 | End index for data line 3 (used to display data lines having breaks) | number| no | all | yes -| endIndex4 | End index for data line 4 (used to display data lines having breaks) | number | no | all | yes -| endIndex5 | End index for data line 5 (used to display data lines having breaks) | number| no | all | yes -| lineGradient | this prop is used to render the line with a gradient blend of colors | boolean| no | all | yes -| lineGradientComponent | this prop defines the svg gradient that should be applied to the line (requires lineGradient to be truthy) | Function| no | all | yes -| lineGradientId | id of the (needed along with lineGradientComponent prop) | string| no | all | yes -| lineGradientDirection | 'vertical'/'horizontal' | string | no | all | yes -| lineGradientStartColor | Start gradient color for the line (requires lineGradient to be truthy) | string| no | all | yes -| lineGradientEndColor | End gradient color for the line (requires lineGradient to be truthy) | string | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------------------- | ------------------------------------------------------------ | ---------------- | -------- | -------- | ----------------- | +| curved | To show curved line joining the data points | boolean | no | all | yes | +| color | Color of the lines joining the data points | ColorValue | no | all | yes | +| color1 | Color of the lines joining the first set of data points | ColorValue | no | all | yes | +| color2 | Color of the lines joining the second set of data points | ColorValue | no | all | yes | +| color3 | Color of the lines joining the third set of data points | ColorValue | no | all | yes | +| color4 | Color of the lines joining the fourth set of data points | ColorValue | no | all | yes | +| color5 | Color of the lines joining the fifth set of data points | ColorValue | no | all | yes | +| thickness | Thickness of the lines joining the data points | number | no | all | yes | +| thickness1 | Thickness of the lines joining the first set of data points | number | no | all | yes | +| thickness2 | Thickness of the lines joining the second set of data points | number | no | all | yes | +| thickness3 | Thickness of the lines joining the third set of data points | number | no | all | yes | +| thickness4 | Thickness of the lines joining the fourth set of data points | number | no | all | yes | +| thickness5 | Thickness of the lines joining the fifth set of data points | number | no | all | yes | +| zIndex1 | zIndex of the lines joining the first set of data points | number | no | all | yes | +| zIndex2 | zIndex of the lines joining the second set of data points | number | no | all | yes | +| zIndex3 | zIndex of the lines joining the third set of data points | number | no | all | yes | +| zIndex4 | zIndex of the lines joining the fourth set of data points | number | no | all | yes | +| zIndex5 | zIndex of the lines joining the fifth set of data points | number | no | all | yes | +| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted line chart | Array | no | all | yes | +| strokeDashArray1 | Array of 2 numbers denoting the dashWidth and dashGap of line1. Used to render dashed/dotted line chart | Array | no | all | yes | +| strokeDashArray2 | Array of 2 numbers denoting the dashWidth and dashGap of line2. Used to render dashed/dotted line chart | Array | no | all | yes | +| strokeDashArray3 | Array of 2 numbers denoting the dashWidth and dashGap of line3. Used to render dashed/dotted line chart | Array | no | all | yes | +| strokeDashArray4 | Array of 2 numbers denoting the dashWidth and dashGap of line4. Used to render dashed/dotted line chart | Array | no | all | yes | +| strokeDashArray5 | Array of 2 numbers denoting the dashWidth and dashGap of line5. Used to render dashed/dotted line chart | Array | no | all | yes | +| lineSegments | Array of objects used to customize segments (parts) of line | Array | no | all | yes | +| lineSegments2 | Array of objects used to customize segments (parts) of line2 | Array | no | all | yes | +| lineSegments3 | Array of objects used to customize segments (parts) of line3 | Array | no | all | yes | +| lineSegments4 | Array of objects used to customize segments (parts) of line4 | Array | no | all | yes | +| lineSegments5 | Array of objects used to customize segments (parts) of line5 | Array | no | all | yes | +| highlightedRange | renders the parts of lines lying in a given data range with a different style (color, thickness,type) | HighlightedRange | no | all | yes | +| startIndex | Start index for data line (used to display data lines having breaks) | number | no | all | yes | +| startIndex1 | Start index for data line 1 (used to display data lines having breaks) | number | no | all | yes | +| startIndex2 | Start index for data line 2 (used to display data lines having breaks) | number | no | all | yes | +| startIndex3 | Start index for data line 3 (used to display data lines having breaks) | number | no | all | yes | +| startIndex4 | Start index for data line 4 (used to display data lines having breaks) | number | no | all | yes | +| startIndex5 | Start index for data line 5 (used to display data lines having breaks) | number | no | all | yes | +| endIndex | End index for data line (used to display data lines having breaks) | number | no | all | yes | +| endIndex1 | End index for data line 1 (used to display data lines having breaks) | number | no | all | yes | +| endIndex2 | End index for data line 2 (used to display data lines having breaks) | number | no | all | yes | +| endIndex3 | End index for data line 3 (used to display data lines having breaks) | number | no | all | yes | +| endIndex4 | End index for data line 4 (used to display data lines having breaks) | number | no | all | yes | +| endIndex5 | End index for data line 5 (used to display data lines having breaks) | number | no | all | yes | +| lineGradient | this prop is used to render the line with a gradient blend of colors | boolean | no | all | yes | +| lineGradientComponent | this prop defines the svg gradient that should be applied to the line (requires lineGradient to be truthy) | Function | no | all | yes | +| lineGradientId | id of the (needed along with lineGradientComponent prop) | string | no | all | yes | +| lineGradientDirection | 'vertical'/'horizontal' | string | no | all | yes | +| lineGradientStartColor | Start gradient color for the line (requires lineGradient to be truthy) | string | no | all | yes | +| lineGradientEndColor | End gradient color for the line (requires lineGradient to be truthy) | string | no | all | yes | +| curvature1.4.62+ | A number between 0 to 1 that controls the curvature of the cubic bezier curve | number | no | all | yes | +| curveType1.4.62+ | Type of the curve- cubic or quadratic | CurveType | no | all | yes | +| spacing11.4.62+ | Distance between 2 consecutive points in the first line | number | no | all | yes | +| spacing21.4.62+ | Distance between 2 consecutive points in the second line | number | no | all | yes | +| spacing31.4.62+ | Distance between 2 consecutive points in the third line | number | no | all | yes | +| spacing41.4.62+ | Distance between 2 consecutive points in the fourth line | number | no | all | yes | +| spacing51.4.62+ | Distance between 2 consecutive points in the fifth line | number | no | all | yes | +| strokeLinecap1.4.62+ | Linecap of the lines (see stroke-linecap in svg) | Linecap | no | all | yes | +| strokeLinecap11.4.62+ | Linecap of the first line (see stroke-linecap in svg) | Linecap | no | all | yes | +| strokeLinecap21.4.62+ | Linecap of the second line (see stroke-linecap in svg) | Linecap | no | all | yes | +| strokeLinecap31.4.62+ | Linecap of the third line (see stroke-linecap in svg) | Linecap | no | all | yes | +| strokeLinecap41.4.62+ | Linecap of the fourth line (see stroke-linecap in svg) | Linecap | no | all | yes | +| strokeLinecap51.4.62+ | Linecap of the fifth line (see stroke-linecap in svg) | Linecap | no | all | yes | + +**Interpolation related props**1.4.62+ + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------------------------ | ------------------------------------------------------------ | ------- | -------- | -------- | ----------------- | +| interpolateMissingValues1.4.62+ | auto-assigns values to data items that have nullish (`null` or `undefined`) values by interpolation | boolean | no | all | yes | +| showDataPointsForMissingValues1.4.62+ | data points are hidden by default for interpolated values, to show them, use this props | boolean | no | all | yes | +| extrapolateMissingValues1.4.62+ | auto-assigns values to data items that have nullish values in the start and end of chart | boolean | no | all | yes | +| onlyPositive1.4.62+ | when this prop is truthy, it converts negative values to 0 (possibly obtained by interpolation) | boolean | no | all | yes | **The arrow** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| showArrows | To show an arrow at the end of each data line | boolean | no | all | yes -| arrowConfig | Object describing the properties of the arrows like length, width, strokeWidth, strokeColor, fillColor | arrowType | no | all | yes -| showArrow1 | To show an arrow at the end of the first data line | boolean | no | all | yes -| arrowConfig1 | Object describing the properties of the first arrow | arrowType| no | all | yes -| showArrow2 | To show an arrow at the end of the second data line | boolean | no | all | yes -| arrowConfig2 | Object describing the properties of the second arrow | arrowType | no | all | yes -| showArrow3 | To show an arrow at the end of the third data line | boolean | no | all | yes -| arrowConfig3 | Object describing the properties of the third arrow | arrowType | no | all | yes -| showArrow4 | To show an arrow at the end of the fourth data line| boolean | no | all | yes -| arrowConfig4 | Object describing the properties of the fourth arrow| arrowType | no | all | yes -| showArrow5 | To show an arrow at the end of the fifth data line | boolean | no | all | yes -| arrowConfig5| Object describing the properties of the fifth arrow | arrowType | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------ | ------------------------------------------------------------ | --------- | -------- | -------- | ----------------- | +| showArrows | To show an arrow at the end of each data line | boolean | no | all | yes | +| arrowConfig | Object describing the properties of the arrows like length, width, strokeWidth, strokeColor, fillColor | arrowType | no | all | yes | +| showArrow1 | To show an arrow at the end of the first data line | boolean | no | all | yes | +| arrowConfig1 | Object describing the properties of the first arrow | arrowType | no | all | yes | +| showArrow2 | To show an arrow at the end of the second data line | boolean | no | all | yes | +| arrowConfig2 | Object describing the properties of the second arrow | arrowType | no | all | yes | +| showArrow3 | To show an arrow at the end of the third data line | boolean | no | all | yes | +| arrowConfig3 | Object describing the properties of the third arrow | arrowType | no | all | yes | +| showArrow4 | To show an arrow at the end of the fourth data line | boolean | no | all | yes | +| arrowConfig4 | Object describing the properties of the fourth arrow | arrowType | no | all | yes | +| showArrow5 | To show an arrow at the end of the fifth data line | boolean | no | all | yes | +| arrowConfig5 | Object describing the properties of the fifth arrow | arrowType | no | all | yes | **Data points related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| hideDataPoints | To hide data points | boolean | no | all | yes -| dataPointsHeight | Height of data points (when data points' shape is rectangular) | number | no | all | yes -| dataPointsWidth | Width of data points (when data points' shape is rectangular) | number| no | all | yes -| dataPointsRadius | Radius of data points (when data points' shape is circular) | number| no | all | yes -| dataPointsColor | Color of the data points | ColorValue | no | all | yes -| dataPointsShape | Shape of the data points (_'rectangular'_ or _'circular'_) | string| no | all | yes -| hideDataPoints1 | To hide data points for the first set of data | boolean | no | all | yes -| dataPointsHeight1 | Height of data points for the first dataset (when data points' shape is rectangular) | number | no | all | yes -| dataPointsWidth1 | Width of data points for the first dataset (when data points' shape is rectangular) | number| no | all | yes -| dataPointsRadius1 | Radius of data points for the first dataset (when data points' shape is circular) | number| no | all | yes -| dataPointsColor1 | Color of data points for the first dataset | ColorValue | no | all | yes -| dataPointsShape1 | Shape of data points for the first dataset | string | no | all | yes -| hideDataPoints2 | To hide data points for the second set of data | boolean | no | all | yes -| dataPointsHeight2 | Height of data points for the second dataset (when data points' shape is rectangular) | number| no | all | yes -| dataPointsWidth2 | Width of data points for the second dataset (when data points' shape is rectangular) | number | no | all | yes -| dataPointsRadius2 | Radius of data points for the second dataset (when data points' shape is circular) | number| no | all | yes -| dataPointsColor2 | Color of data points for the second dataset | ColorValue| no | all | yes -| dataPointsShape2 | Shape of data points for the second dataset (_'rectangular'_ or _'circular'_) | string| no | all | yes -| hideDataPoints3 | To hide data points for the third set of data | boolean | no | all | yes -| dataPointsHeight3 | Height of data points for the third dataset (when data points' shape is rectangular) | number | no | all | yes -| dataPointsWidth3 | Width of data points for the third dataset (when data points' shape is rectangular) | number | no | all | yes -| dataPointsRadius3 | Radius of data points for the third dataset (when data points' shape is circular) | number | no | all | yes -| dataPointsColor3 | Color of data points for the third dataset | ColorValue| no | all | yes -| dataPointsShape3 | Shape of data points for the third dataset (_'rectangular'_ or _'circular'_) | string| no | all | yes -| hideDataPoints4 | To hide data points for the fourth set of data | boolean | no | all | yes -| dataPointsHeight4 | Height of data points for the fourth dataset (when data points' shape is rectangular) | number | no | all | yes -| dataPointsWidth4 | Width of data points for the fourth dataset (when data points' shape is rectangular) | number | no | all | yes -| dataPointsRadius4 | Radius of data points for the fourth dataset (when data points' shape is circular) | number| no | all | yes -| dataPointsColor4 | Color of data points for the fourth dataset | ColorValue| no | all | yes -| dataPointsShape4 | Shape of data points for the fourth dataset (_'rectangular'_ or _'circular'_) | string| no | all | yes -| hideDataPoints5 | To hide data points for the fifth set of data | boolean | no | all | yes -| dataPointsHeight5 | Height of data points for the fifth dataset (when data points' shape is rectangular) | number | no | all | yes -| dataPointsWidth5 | Width of data points for the fifth dataset (when data points' shape is rectangular) | number| no | all | yes -| dataPointsRadius5 | Radius of data points for the fifth dataset (when data points' shape is circular) | number | no | all | yes -| dataPointsColor5 | Color of data points for the fifth dataset | ColorValue| no | all | yes -| dataPointsShape5 | Shape of data points for the fifth dataset (_'rectangular'_ or _'circular'_) | string| no | all | yes -| focusedDataPointIndex | Index of the focused data point, works only when focusEnabled prop is used | number | no | all | yes -| focusedDataPointShape | Shape of the data points when focused due to press event | String | no | all | yes -| focusedDataPointWidth | Width of the data points when focused due to press event | number | no | all | yes -| focusedDataPointHeight | Height of the data points when focused due to press event | number | no | all | yes -| focusedDataPointColor | Color of the data points when focused due to press event | ColorValue | no | all | yes -| focusedDataPointRadius | Radius of the data points when focused due to press event | number| no | all | yes -| focusedCustomDataPoint | Custom data point when focused due to press event| Function| no | all | no -| textColor | Color of the dataPointText | ColorValue | no | all | yes -| textFontSize | Font size of the dataPointText | number | no | all | yes -| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes -| textShiftY | To shift the dataPointText text vertically | number | no | all | yes -| customDataPoint | A callback function to render a custom component as the data points | Function | no | all | yes -| dataPointLabelWidth | width of the label shown beside a data point | number | no | all | no -| dataPointLabelShiftX | horizontal shift of a label from its corresponding data point | number | no | all | no -| dataPointLabelShiftY | vertical shift of a label from its corresponding data point | number | no | all | no -| showValuesAsDataPointsText | When set to true, the data item value will be shown as a label text near data point | boolean | no | all | yes -| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using this array | ColorValue[] | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------------------------ | ------------------------------------------------------------ | ------------ | -------- | -------- | ----------------- | +| hideDataPoints | To hide data points | boolean | no | all | yes | +| dataPointsHeight | Height of data points (when data points' shape is rectangular) | number | no | all | yes | +| dataPointsWidth | Width of data points (when data points' shape is rectangular) | number | no | all | yes | +| dataPointsRadius | Radius of data points (when data points' shape is circular) | number | no | all | yes | +| dataPointsColor | Color of the data points | ColorValue | no | all | yes | +| dataPointsShape | Shape of the data points (*'rectangular'* or *'circular'*) | string | no | all | yes | +| hideDataPoints1 | To hide data points for the first set of data | boolean | no | all | yes | +| dataPointsHeight1 | Height of data points for the first dataset (when data points' shape is rectangular) | number | no | all | yes | +| dataPointsWidth1 | Width of data points for the first dataset (when data points' shape is rectangular) | number | no | all | yes | +| dataPointsRadius1 | Radius of data points for the first dataset (when data points' shape is circular) | number | no | all | yes | +| dataPointsColor1 | Color of data points for the first dataset | ColorValue | no | all | yes | +| dataPointsShape1 | Shape of data points for the first dataset | string | no | all | yes | +| hideDataPoints2 | To hide data points for the second set of data | boolean | no | all | yes | +| dataPointsHeight2 | Height of data points for the second dataset (when data points' shape is rectangular) | number | no | all | yes | +| dataPointsWidth2 | Width of data points for the second dataset (when data points' shape is rectangular) | number | no | all | yes | +| dataPointsRadius2 | Radius of data points for the second dataset (when data points' shape is circular) | number | no | all | yes | +| dataPointsColor2 | Color of data points for the second dataset | ColorValue | no | all | yes | +| dataPointsShape2 | Shape of data points for the second dataset (*'rectangular'* or *'circular'*) | string | no | all | yes | +| hideDataPoints3 | To hide data points for the third set of data | boolean | no | all | yes | +| dataPointsHeight3 | Height of data points for the third dataset (when data points' shape is rectangular) | number | no | all | yes | +| dataPointsWidth3 | Width of data points for the third dataset (when data points' shape is rectangular) | number | no | all | yes | +| dataPointsRadius3 | Radius of data points for the third dataset (when data points' shape is circular) | number | no | all | yes | +| dataPointsColor3 | Color of data points for the third dataset | ColorValue | no | all | yes | +| dataPointsShape3 | Shape of data points for the third dataset (*'rectangular'* or *'circular'*) | string | no | all | yes | +| hideDataPoints4 | To hide data points for the fourth set of data | boolean | no | all | yes | +| dataPointsHeight4 | Height of data points for the fourth dataset (when data points' shape is rectangular) | number | no | all | yes | +| dataPointsWidth4 | Width of data points for the fourth dataset (when data points' shape is rectangular) | number | no | all | yes | +| dataPointsRadius4 | Radius of data points for the fourth dataset (when data points' shape is circular) | number | no | all | yes | +| dataPointsColor4 | Color of data points for the fourth dataset | ColorValue | no | all | yes | +| dataPointsShape4 | Shape of data points for the fourth dataset (*'rectangular'* or *'circular'*) | string | no | all | yes | +| hideDataPoints5 | To hide data points for the fifth set of data | boolean | no | all | yes | +| dataPointsHeight5 | Height of data points for the fifth dataset (when data points' shape is rectangular) | number | no | all | yes | +| dataPointsWidth5 | Width of data points for the fifth dataset (when data points' shape is rectangular) | number | no | all | yes | +| dataPointsRadius5 | Radius of data points for the fifth dataset (when data points' shape is circular) | number | no | all | yes | +| dataPointsColor5 | Color of data points for the fifth dataset | ColorValue | no | all | yes | +| dataPointsShape5 | Shape of data points for the fifth dataset (*'rectangular'* or *'circular'*) | string | no | all | yes | +| focusedDataPointIndex | Index of the focused data point, works only when focusEnabled prop is used | number | no | all | yes | +| focusedDataPointShape | Shape of the data points when focused due to press event | String | no | all | yes | +| focusedDataPointWidth | Width of the data points when focused due to press event | number | no | all | yes | +| focusedDataPointHeight | Height of the data points when focused due to press event | number | no | all | yes | +| focusedDataPointColor | Color of the data points when focused due to press event | ColorValue | no | all | yes | +| focusedDataPointRadius | Radius of the data points when focused due to press event | number | no | all | yes | +| focusedCustomDataPoint | Custom data point when focused due to press event | Function | no | all | no | +| textColor | Color of the dataPointText | ColorValue | no | all | yes | +| textFontSize | Font size of the dataPointText | number | no | all | yes | +| textShiftX | To shift the dataPointText text horizontally | number | no | all | yes | +| textShiftY | To shift the dataPointText text vertically | number | no | all | yes | +| customDataPoint | A callback function to render a custom component as the data points | Function | no | all | yes | +| dataPointLabelWidth | width of the label shown beside a data point | number | no | all | no | +| dataPointLabelShiftX | horizontal shift of a label from its corresponding data point | number | no | all | no | +| dataPointLabelShiftY | vertical shift of a label from its corresponding data point | number | no | all | no | +| showValuesAsDataPointsText | When set to true, the data item value will be shown as a label text near data point | boolean | no | all | yes | +| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using this array | ColorValue[] | no | all | yes | +| dataPointLabelComponent1.4.62+ | custom label component rendered beside a data point | Function | no | all | no | +| focusedDataPointLabelComponent1.4.62+ | custom label component rendered beside a data point only when focused/selected (when the user presses) | Function | no | all | no | **pointerConfig** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| height | Height of the pointer | number | no | all | yes -| width | width of the pointer | number | no | all | yes -| radius | radius of the pointer | number | no | all | yes -| pointerColor | pointer color | ColorValue | no | all | yes -| pointer1Color | pointer color | ColorValue | no | all | yes -| pointer2Color | pointer color | ColorValue | no | all | yes -| pointer3Color | pointer color | ColorValue | no | all | yes -| pointer4Color | pointer color | ColorValue | no | all | yes -| pointer5Color | pointer color | ColorValue | no | all | yes -| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using the pointerColorsForDataSet which is an array of color values. | ColorValue[] | no | all | yes -| secondaryPointerColor | Secondary pointer color | ColorValue | no | all | yes -| pointerComponent | is a function that returns the component to be rendered as a pointer | Function | no | all | yes -| showPointerStrip | show pointer bar | boolean | no | all | yes -| pointerStripWidth | width of the pointer bar | number | no | all | yes -| pointerStripHeight | height of dthe pointer bar | number | no | all | yes -| pointerStripColor | color of the pointer bar | ColorValue | no | all | yes -| pointerStripUptoDataPoint | Pointer stripped to data point | boolean | no | all | yes -| pointerLabelComponent | is a function that returns the component to be rendered as a Label. It takes 2 parameters - 1. an array of items 2 | Function | no | all | yes -| stripOverPointer | strip to over pointer | boolean | no | all | yes -| autoAdjustPointerLabelPosition | Adjust the position of the pointer | boolean | no | all | yes -| shiftPointerLabelX | x-axis displacement pointer label | number | no | all | yes -| shiftPointerLabelY | y-axis displacement pointer label | number | no | all | yes -| pointerLabelWidth | pointer label width | number | no | all | yes -| pointerLabelHeight | pointer label height | number | no | all | yes -| pointerVanishDelay | Pointer disappearance delay | number | no | all | yes -| activatePointersOnLongPress |Long press to activate pointer | boolean | no | all | yes -| activatePointersDelay | activation pointer delay | number | no | all | no -| persistPointer | persistent pointer | boolean | no | all | yes -| hidePointer1 | hidden pointer | boolean | no | all | yes -| hidePointer2 | hidden pointer | boolean | no | all | yes -| hidePointer3 | hidden pointer | boolean | no | all | yes -| hidePointer4 | hidden pointer | boolean | no | all | yes -| hidePointer5 | hidden pointer | boolean | no | all | yes -| hideSecondaryPointer | Hide auxiliary pointer | boolean | no | all | yes -| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted pointer | number[] | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------ | ------------------------------------------------------------ | ------------ | -------- | -------- | ----------------- | +| height | Height of the pointer | number | no | all | yes | +| width | width of the pointer | number | no | all | yes | +| radius | radius of the pointer | number | no | all | yes | +| pointerColor | pointer color | ColorValue | no | all | yes | +| pointer1Color | pointer color | ColorValue | no | all | yes | +| pointer2Color | pointer color | ColorValue | no | all | yes | +| pointer3Color | pointer color | ColorValue | no | all | yes | +| pointer4Color | pointer color | ColorValue | no | all | yes | +| pointer5Color | pointer color | ColorValue | no | all | yes | +| pointerColorsForDataSet | When using pointers with dataSet, you can set pointer colors on each data line using the pointerColorsForDataSet which is an array of color values. | ColorValue[] | no | all | yes | +| secondaryPointerColor | Secondary pointer color | ColorValue | no | all | yes | +| pointerComponent | is a function that returns the component to be rendered as a pointer | Function | no | all | yes | +| showPointerStrip | show pointer bar | boolean | no | all | yes | +| pointerStripWidth | width of the pointer bar | number | no | all | yes | +| pointerStripHeight | height of dthe pointer bar | number | no | all | yes | +| pointerStripColor | color of the pointer bar | ColorValue | no | all | yes | +| pointerStripUptoDataPoint | Pointer stripped to data point | boolean | no | all | yes | +| pointerLabelComponent | is a function that returns the component to be rendered as a Label. It takes 2 parameters - 1. an array of items 2 | Function | no | all | yes | +| stripOverPointer | strip to over pointer | boolean | no | all | yes | +| autoAdjustPointerLabelPosition | Adjust the position of the pointer | boolean | no | all | yes | +| shiftPointerLabelX | x-axis displacement pointer label | number | no | all | yes | +| shiftPointerLabelY | y-axis displacement pointer label | number | no | all | yes | +| pointerLabelWidth | pointer label width | number | no | all | yes | +| pointerLabelHeight | pointer label height | number | no | all | yes | +| pointerVanishDelay | Pointer disappearance delay | number | no | all | yes | +| activatePointersOnLongPress | Long press to activate pointer | boolean | no | all | yes | +| activatePointersDelay | activation pointer delay | number | no | all | no | +| persistPointer | persistent pointer | boolean | no | all | yes | +| hidePointer1 | hidden pointer | boolean | no | all | yes | +| hidePointer2 | hidden pointer | boolean | no | all | yes | +| hidePointer3 | hidden pointer | boolean | no | all | yes | +| hidePointer4 | hidden pointer | boolean | no | all | yes | +| hidePointer5 | hidden pointer | boolean | no | all | yes | +| hideSecondaryPointer | Hide auxiliary pointer | boolean | no | all | yes | +| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted pointer | number[] | no | all | yes | **onFocus and strip related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| focusEnabled | If set true, allows users to press on the chart and focuses the nearest data point (focus event can be then handled using the `onFocus` prop) | boolean| no | all | yes -| onFocus | The callback function that handles the focus event. `item` and `index` are received as props | Function| no | all | yes -| focusedDataPointIndex | Index of the focused data point, used to set initially focused data point and to override the focus behaviour on onFocus | number| no | all | yes -| showDataPointOnFocus | If set true, it shows the data point corresponding to the focused area of the chart | boolean | no | all | yes -| showStripOnFocus | If set true, it shows a vertical strip corresponding to the focused area of the chart | boolean | no | all | yes -| showTextOnFocus | If set true, it shows the data point text corresponding to the focused area of the chart | boolean | no | all | yes -| showDataPointLabelOnFocus | If set true, it shows the data point corresponding to the focused area of the chart | boolea| no | all | no -| stripHeight | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes -| stripWidth | Width of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes -| stripColor | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart | ColorValue| no | all | yes -| stripOpacity | Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes -| unFocusOnPressOut | If set true, it unselects/unfocuses the focused/selected data point | boolean| no | all | yes -| delayBeforeUnFocus | Delay (in milliseconds) between the release of the press and ghe unfocusing of the data point | number | no | all | yes -| focusedDataPointShape | Shape of the data points when focused due to press | String | no | all | yes -| focusedDataPointWidth | Width of the data points when focused due to press | number | no | all | yes -| focusedDataPointHeight | Height of the data points when focused due to press | number | no | all | yes -| focusedDataPointColor | Color of the data points when focused due to press | ColorValue | no | all | yes -| focusedDataPointRadius | Radius of the data points when focused due to press | number | no | all | yes -| focusedCustomDataPoint | Custom data point when focused due to press event | Function | no | all | no + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------------------------- | ------------------------------------------------------------ | ---------- | -------- | -------- | ----------------- | +| focusEnabled | If set true, allows users to press on the chart and focuses the nearest data point (focus event can be then handled using the `onFocus` prop) | boolean | no | all | yes | +| onFocus | The callback function that handles the focus event. `item` and `index` are received as props | Function | no | all | yes | +| focusedDataPointIndex | Index of the focused data point, used to set initially focused data point and to override the focus behaviour on onFocus | number | no | all | yes | +| showDataPointOnFocus | If set true, it shows the data point corresponding to the focused area of the chart | boolean | no | all | yes | +| showStripOnFocus | If set true, it shows a vertical strip corresponding to the focused area of the chart | boolean | no | all | yes | +| showTextOnFocus | If set true, it shows the data point text corresponding to the focused area of the chart | boolean | no | all | yes | +| showDataPointLabelOnFocus | If set true, it shows the data point corresponding to the focused area of the chart | boolea | no | all | no | +| stripHeight | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes | +| stripWidth | Width of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes | +| stripColor | Color of the vertical strip that becomes visible on pressing the corresponding area of the chart | ColorValue | no | all | yes | +| stripOpacity | Opacity of the vertical strip that becomes visible on pressing the corresponding area of the chart | number | no | all | yes | +| unFocusOnPressOut | If set true, it unselects/unfocuses the focused/selected data point | boolean | no | all | yes | +| delayBeforeUnFocus | Delay (in milliseconds) between the release of the press and ghe unfocusing of the data point | number | no | all | yes | +| focusedDataPointShape | Shape of the data points when focused due to press | String | no | all | yes | +| focusedDataPointWidth | Width of the data points when focused due to press | number | no | all | yes | +| focusedDataPointHeight | Height of the data points when focused due to press | number | no | all | yes | +| focusedDataPointColor | Color of the data points when focused due to press | ColorValue | no | all | yes | +| focusedDataPointRadius | Radius of the data points when focused due to press | number | no | all | yes | +| focusedCustomDataPoint | Custom data point when focused due to press event | Function | no | all | no | +| stripOverDataPoints1.4.62+ | If set true, the vertical strip appears over the data points, else it appears beneath the data points | boolean | no | all | yes | +| stripStrokeDashArray1.4.62+ | Array of 2 numbers denoting the dashWidth and dashGap of the vertical strip | Array | no | all | yes | +| focusTogether1.4.62+ | In case of multi-line charts, Unless focusTogether is set to false, all the data points at the focused index get focused together | boolean | no | all | yes | +| focusProximity1.4.62+ | Sets the distance from a data point upto which a press event should result in focusing that data point | number | no | all | yes | **Props for Area Chart** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| areaChart | If set true, renders area chart instead of line chart | boolean| no | all | yes -| areaChart1 | If set true, renders area chart for 1st data set instead of line chart | boolean | no | no | no -| areaChart2 | If set true, renders area chart for 2nd data set instead of line chart | boolean | no | no | no -| areaChart3 | If set true, renders area chart for 3rd data set instead of line chart | boolean | no | no | no -| areaChart4 | If set true, renders area chart for 4th data set instead of line chart | boolean | no | no | no -| areaChart5 | If set true, renders area chart for 5th data set instead of line chart | boolean | no | no | no -| startFillColor | Start gradient color for the area chart | ColorValue | no | all | yes -| endFillColor | End gradient color for the area chart | ColorValue | no | all | yes -| startOpacity | Start gradient opacity for the area chart | number | no | all | yes -| endOpacity | End gradient opacity for the area chart | number | no | all | yes -| startFillColor1 | Start gradient color for the first dataset of the area chart | ColorValue| no | all | yes -| endFillColor1 | End gradient color for the first dataset of the area chart | ColorValue | no | all | yes -| startOpacity1 | Start gradient opacity for the first dataset of the area chart | number | no | all | yes -| endOpacity1 | End gradient opacity for the first dataset of the area chart | number | no | all | yes -| startFillColor2 | Start gradient color for the second dataset of the area chart | ColorValue | no | all | yes -| endFillColor2 | End gradient color for the second dataset of the area chart | ColorValue | no | all | yes -| startOpacity2 | Start gradient color for the second dataset of the area chart | number | no | all | yes -| endOpacity2 | End gradient opacity for the second dataset of the area chart | number | no | all | yes -| startFillColor3 | Start gradient color for the third dataset of the area chart | ColorValue| no | all | yes -| endFillColor3 | End gradient color for the third dataset of the area chart | ColorValue | no | all | yes -| startOpacity3 | Start gradient color for the third dataset of the area chart | number | no | all | yes -| endOpacity3 | End gradient opacity for the third dataset of the area chart | number | no | all | yes -| startFillColor4 | Start gradient color for the fourth dataset of the area chart | ColorValue | no | all | yes -| endFillColor4 | End gradient color for the fourth dataset of the area chart | ColorValue | no | all | yes -| startOpacity4 | Start gradient color for the fourth dataset of the area chart | number | no | all | yes -| endOpacity4 | End gradient opacity for the fourth dataset of the area chart | number | no | all | yes -| startFillColor5 | Start gradient color for the fifth dataset of the area chart | ColorValue | no | all | yes -| endFillColor5 | End gradient color for the fifth dataset of the area chart | ColorValue | no | all | yes -| startOpacity5 | Start gradient color for the fifth dataset of the area chart | number | no | all | yes -| endOpacity5 | End gradient opacity for the fifth dataset of the area chart | number | no | all | yes -| gradientDirection | Direction of the gradient (_'horizontal'_ or _'vertical'_) | string | no | all | yes -| areaGradientComponent | this prop defines the svg gradient that should be applied to the area (requires areaChart to be truthy) | Function| no | all | yes -| areaGradientId | id of the (needed along with areaGradientComponent prop) | string | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------------------------- | ------------------------------------------------------------ | ---------------------- | -------- | -------- | ----------------- | +| areaChart | If set true, renders area chart instead of line chart | boolean | no | all | yes | +| areaChart1 | If set true, renders area chart for 1st data set instead of line chart | boolean | no | no | no | +| areaChart2 | If set true, renders area chart for 2nd data set instead of line chart | boolean | no | no | no | +| areaChart3 | If set true, renders area chart for 3rd data set instead of line chart | boolean | no | no | no | +| areaChart4 | If set true, renders area chart for 4th data set instead of line chart | boolean | no | no | no | +| areaChart5 | If set true, renders area chart for 5th data set instead of line chart | boolean | no | no | no | +| startFillColor | Start gradient color for the area chart | ColorValue | no | all | yes | +| endFillColor | End gradient color for the area chart | ColorValue | no | all | yes | +| startOpacity | Start gradient opacity for the area chart | number | no | all | yes | +| endOpacity | End gradient opacity for the area chart | number | no | all | yes | +| startFillColor1 | Start gradient color for the first dataset of the area chart | ColorValue | no | all | yes | +| endFillColor1 | End gradient color for the first dataset of the area chart | ColorValue | no | all | yes | +| startOpacity1 | Start gradient opacity for the first dataset of the area chart | number | no | all | yes | +| endOpacity1 | End gradient opacity for the first dataset of the area chart | number | no | all | yes | +| startFillColor2 | Start gradient color for the second dataset of the area chart | ColorValue | no | all | yes | +| endFillColor2 | End gradient color for the second dataset of the area chart | ColorValue | no | all | yes | +| startOpacity2 | Start gradient color for the second dataset of the area chart | number | no | all | yes | +| endOpacity2 | End gradient opacity for the second dataset of the area chart | number | no | all | yes | +| startFillColor3 | Start gradient color for the third dataset of the area chart | ColorValue | no | all | yes | +| endFillColor3 | End gradient color for the third dataset of the area chart | ColorValue | no | all | yes | +| startOpacity3 | Start gradient color for the third dataset of the area chart | number | no | all | yes | +| endOpacity3 | End gradient opacity for the third dataset of the area chart | number | no | all | yes | +| startFillColor4 | Start gradient color for the fourth dataset of the area chart | ColorValue | no | all | yes | +| endFillColor4 | End gradient color for the fourth dataset of the area chart | ColorValue | no | all | yes | +| startOpacity4 | Start gradient color for the fourth dataset of the area chart | number | no | all | yes | +| endOpacity4 | End gradient opacity for the fourth dataset of the area chart | number | no | all | yes | +| startFillColor5 | Start gradient color for the fifth dataset of the area chart | ColorValue | no | all | yes | +| endFillColor5 | End gradient color for the fifth dataset of the area chart | ColorValue | no | all | yes | +| startOpacity5 | Start gradient color for the fifth dataset of the area chart | number | no | all | yes | +| endOpacity5 | End gradient opacity for the fifth dataset of the area chart | number | no | all | yes | +| gradientDirection | Direction of the gradient (*'horizontal'* or *'vertical'*) | string | no | all | yes | +| areaGradientComponent | this prop defines the svg gradient that should be applied to the area (requires areaChart to be truthy) | Function | no | all | yes | +| areaGradientId | id of the (needed along with areaGradientComponent prop) | string | no | all | yes | +| onChartAreaPress1.4.62+ | Callback function called on pressing the chart area | Function | no | all | yes | +| intersectionAreaConfig1.4.62+ | Config object that defines properties for intersection area of data and data2 (1st & 2nd areas) | IntersectionAreaConfig | no | all | no | ### PieChart and DonutChart **Basic props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| data | An item object represents a section in the Pie chart. Descibed in the next table | pieDataItem[] | no | all | yes -| radius | Radius of the Pie | number | no | all | yes -| initialAngle | Starting angle in radians (illustrated below this table)| number | no | all | yes -| isThreeD | If set to true, it rotates and translates the chart to give it a 3D effect | boolean | no | all | yes -| showGradient | Prop to enable radial gradient for the Pie sections | boolean | no | all | yes -| gradientCenterColor | Gradient color at the center of the Pie chart | ColorValue | no | all | yes -| onPress | Callback function called on press of Pie sections (takes item and index as parameter) | Function | no | all | yes -| focusOnPress | When set to true, the pressed section of the Pie chart will have a bigger radius, hence appear focused | boolean | no | all | yes -| toggleFocusOnPress | When set to true, if the user presses an already focused pie section, it will be unfocused | boolean | no | all | yes -| extraRadius | Extra radius for the focused Pie section | number | no | all | yes -| inwardExtraLengthForFocused | Extra length of focused Pie section towards the center (only for donut charts) | number | no | all | yes -| sectionAutoFocus | In case you don't want focusOnPress but want a particular section to autofocus, this prop will be needed | boolean | no | all | yes -| tiltAngle | The angle by which the chart should be tilted | Angle in deg | no | all | yes -| shadow | Shadow to the Pie chart, when set to true, it enhances the 3D effect | boolean | no | all | yes -| shadowColor | Color of the shadow | ColorValue | no | all | yes -| shadowWidth | Width of the shadow | number | no | all | yes -| strokeWidth | Stroke (line) width for the Pie chart and its section | number | no | all | yes -| strokeColor | Stroke (line) color | ColorValue | no | all | yes -| backgroundColor | Background color of the container that contains the Pie chart | ColorValue | no | all | yes -| showText | When set to true, displays text on the Pie sections | boolean | no | all | yes -| textColor | Color of the label texts | ColorValue | no | all | yes -| textSize | Size of the label texts (max allowed: radius / 5) | number | no | all | yes -| fontStyle | Style of the text - 'normal', 'italic' or 'oblique'| string| no | all | yes -| fontWeight | Weight of the text - 'bold', 'bolder', 'lighter', '100', '200' etc | string | no | all | yes -| font | Font family of the text - 'Arial', 'Cursive', 'Comic Sans MS' etc | string | no | all | no -| showTextBackground | When set to true, displays background for text on the Pie sections | boolean | no | all | yes -| textBackgroundColor | Background color for the label texts | ColorValue | no | all | yes -| textBackgroundRadius | Radius for the background of the text labels | number | no | all | yes -| showValuesAsLabels | When set to true, the values of the Pie sections are displayed as labels | boolean | no | all | yes -| centerLabelComponent | Component to be rendered at the center of the Pie chart | Function | no | all | yes -| semiCircle | When set to true, renders the Pie Chart in a semi-circle. donut semiCircle charts look like a speed-meter | boolean | no | all | yes -| labelsPosition | Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' | string | no | all | yes -| pieInnerComponent | Svg element to be rendered inside each Pie like a label (position controlled by 'labelsPosition' ) | () => svg element | no | all | yes -| paddingHorizontal | horizontal padding in the chart svg component (useful to accomodate _"onBorder"_ labels) | number | no | all | yes -| paddingVertical | vertical padding in the chart svg component (useful to accomodate _"onBorder"_ labels) | number | no | all | yes -| isAnimated | To show animates PieProChart. Animation occurs onLoad and on value change | boolean | no | all | yes -| animationDuration | Duration of the animations, only fro PieProChart | number| no | all | no -| curvedStartEdges | Bend start edge, only fro PieProChart | boolean | no | all | yes -| curvedEndEdges | Bend end edge, only fro PieProChart | boolean | no | all | yes -| edgesRadius | Bend radius, only fro PieProChart | number | no | all | yes -| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted pointer. only for PieProChart | number[] | no | all | yes -| ring | Whether the pie chart needs to be filled with fan leaves | boolean | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------------------------- | ------------------------------------------------------------ | ----------------- | -------- | -------- | ----------------- | +| data | An item object represents a section in the Pie chart. Descibed in the next table | pieDataItem[] | no | all | yes | +| radius | Radius of the Pie | number | no | all | yes | +| initialAngle | Starting angle in radians (illustrated below this table) | number | no | all | yes | +| isThreeD | If set to true, it rotates and translates the chart to give it a 3D effect | boolean | no | all | yes | +| showGradient | Prop to enable radial gradient for the Pie sections | boolean | no | all | yes | +| gradientCenterColor | Gradient color at the center of the Pie chart | ColorValue | no | all | yes | +| onPress | Callback function called on press of Pie sections (takes item and index as parameter) | Function | no | all | yes | +| focusOnPress | When set to true, the pressed section of the Pie chart will have a bigger radius, hence appear focused | boolean | no | all | yes | +| toggleFocusOnPress | When set to true, if the user presses an already focused pie section, it will be unfocused | boolean | no | all | yes | +| extraRadius | Extra radius for the focused Pie section | number | no | all | yes | +| inwardExtraLengthForFocused | Extra length of focused Pie section towards the center (only for donut charts) | number | no | all | yes | +| sectionAutoFocus | In case you don't want focusOnPress but want a particular section to autofocus, this prop will be needed | boolean | no | all | yes | +| tiltAngle | The angle by which the chart should be tilted | Angle in deg | no | all | yes | +| shadow | Shadow to the Pie chart, when set to true, it enhances the 3D effect | boolean | no | all | yes | +| shadowColor | Color of the shadow | ColorValue | no | all | yes | +| shadowWidth | Width of the shadow | number | no | all | yes | +| strokeWidth | Stroke (line) width for the Pie chart and its section | number | no | all | yes | +| strokeColor | Stroke (line) color | ColorValue | no | all | yes | +| backgroundColor | Background color of the container that contains the Pie chart | ColorValue | no | all | yes | +| showText | When set to true, displays text on the Pie sections | boolean | no | all | yes | +| textColor | Color of the label texts | ColorValue | no | all | yes | +| textSize | Size of the label texts (max allowed: radius / 5) | number | no | all | yes | +| fontStyle | Style of the text - 'normal', 'italic' or 'oblique' | string | no | all | yes | +| fontWeight | Weight of the text - 'bold', 'bolder', 'lighter', '100', '200' etc | string | no | all | yes | +| font | Font family of the text - 'Arial', 'Cursive', 'Comic Sans MS' etc | string | no | all | no | +| showTextBackground | When set to true, displays background for text on the Pie sections | boolean | no | all | yes | +| textBackgroundColor | Background color for the label texts | ColorValue | no | all | yes | +| textBackgroundRadius | Radius for the background of the text labels | number | no | all | yes | +| showValuesAsLabels | When set to true, the values of the Pie sections are displayed as labels | boolean | no | all | yes | +| centerLabelComponent | Component to be rendered at the center of the Pie chart | Function | no | all | yes | +| semiCircle | When set to true, renders the Pie Chart in a semi-circle. donut semiCircle charts look like a speed-meter | boolean | no | all | yes | +| labelsPosition | Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' | string | no | all | yes | +| pieInnerComponent | Svg element to be rendered inside each Pie like a label (position controlled by 'labelsPosition' ) | () => svg element | no | all | yes | +| paddingHorizontal | horizontal padding in the chart svg component (useful to accomodate *"onBorder"* labels) | number | no | all | yes | +| paddingVertical | vertical padding in the chart svg component (useful to accomodate *"onBorder"* labels) | number | no | all | yes | +| isAnimated | To show animates PieProChart. Animation occurs onLoad and on value change | boolean | no | all | yes | +| animationDuration | Duration of the animations, only fro PieProChart | number | no | all | no | +| curvedStartEdges | Bend start edge, only fro PieProChart | boolean | no | all | yes | +| curvedEndEdges | Bend end edge, only fro PieProChart | boolean | no | all | yes | +| edgesRadius | Bend radius, only fro PieProChart | number | no | all | yes | +| strokeDashArray | Array of 2 numbers denoting the dashWidth and dashGap of the lines. Used to render dashed/dotted pointer. only for PieProChart | number[] | no | all | yes | +| ring | Whether the pie chart needs to be filled with fan leaves | boolean | no | all | yes | +| focusedPieIndex1.4.62+ | index of the initially focused Pie, works only when focusOnPress is true | number | no | all | yes | +| onLabelPress (removed)1.4.62+ | Callback function called on press of a Label (takes item and index as parameter) | Function | no | all | yes | +| showTooltip1.4.62+ | When set to true, displays a tooltip on pressing | boolean | no | all | yes | +| showValuesAsTooltipText1.4.62+ | When set to true, the values of the Pie sections are displayed as tooltips (on pressing) | boolean | no | all | yes | +| pieInnerComponentHeight1.4.62+ | inner component's size is determined by innerRadius, but can be overridden using pieInnerComponentHeight | number | no | all | yes | +| pieInnerComponentWidth1.4.62+ | inner component's size is determined by innerRadius, but can be overridden using pieInnerComponentWidth | number | no | all | yes | +| showExternalLabels1.4.62+ | To show labels for each Pie section outside the chart towards left or right based on its position | boolean | no | all | yes | +| labelLineConfig1.4.62+ | Object to configure the properties (like length, color, tailLength etc.) of external label's line | LabelLineConfig | no | all | yes | +| externalLabelComponent1.4.62+ | Component to be rendered as external labels for each Pie section | Function | no | all | yes | +| edgesPressable1.4.62+ | used with focusOnPress, to make the extra length of the focused slice pressable (more details below) | boolean | no | all | yes | **Item description (pieDataItem)** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| value | Value of the item, representing a section of the Pie chart | number | no | all | yes -| shiftX | Translates (shifts) the particular section horizontally by given value | number | no | all | yes -| shiftY | Translates (shifts) the particular section vertically by given value | number | no | all | yes -| shiftTextX | Translates (shifts) the position of label text horizontally | number | no | all | yes -| shiftTextY | Translates (shifts) the position of label text vertically | number | no | all | yes -| shiftTextBackgroundX | Shifts the background of label text horizontally (default value is shiftTextX) | number | no | all | yes -| shiftTextBackgroundY | Shifts the background of label text vertically (default value is shiftTextY) | number | no | all | yes -| color | Color (background color) of the section | ColorValue | no | all | yes -| text | Label text for the sections | string | no | all | yes -| textColor | Color of the text (label) inside the section | ColorValue | no | all | no -| textSize | Size of the text (label) inside the section | number | no | all | yes -| fontStyle | Style of the text - 'normal', 'italic' or 'oblique' | string | no | all | yes -| fontWeight | Weight of the text - 'bold', 'bolder', 'lighter', '100', '200' etc | string | no | all | yes -| font | Font family of the text - 'Arial', 'Cursive', 'Comic Sans MS' etc | string | no | all | no -| textBackgroundColor | Background color for the label text | ColorValue | no | all | yes -| textBackgroundRadius | Radius for the background of the text label| number | no | all | yes -| labelPosition | Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' | string | no | all | yes -| onPress | Callback function called on press of Pie sections (takes item and index as parameter) | Function | no | all | yes -| strokeWidth | Stroke (line) width for the Pie chart and its section | number | no | all | yes -| strokeColor | Stroke (line) color | ColorValue | no | all | yes -| focused | When set to true, the section for that item is focused, sectionAutoFocus must be set true in order to use this property | boolean | no | all | yes -| pieInnerComponent | Svg element to be rendered inside the Pie like a label (position controlled by 'labelsPosition' ) | () => svg element | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------- | ------------------------------------------------------------ | ----------------- | -------- | -------- | ----------------- | +| value | Value of the item, representing a section of the Pie chart | number | no | all | yes | +| shiftX | Translates (shifts) the particular section horizontally by given value | number | no | all | yes | +| shiftY | Translates (shifts) the particular section vertically by given value | number | no | all | yes | +| shiftTextX | Translates (shifts) the position of label text horizontally | number | no | all | yes | +| shiftTextY | Translates (shifts) the position of label text vertically | number | no | all | yes | +| shiftTextBackgroundX | Shifts the background of label text horizontally (default value is shiftTextX) | number | no | all | yes | +| shiftTextBackgroundY | Shifts the background of label text vertically (default value is shiftTextY) | number | no | all | yes | +| color | Color (background color) of the section | ColorValue | no | all | yes | +| text | Label text for the sections | string | no | all | yes | +| textColor | Color of the text (label) inside the section | ColorValue | no | all | no | +| textSize | Size of the text (label) inside the section | number | no | all | yes | +| fontStyle | Style of the text - 'normal', 'italic' or 'oblique' | string | no | all | yes | +| fontWeight | Weight of the text - 'bold', 'bolder', 'lighter', '100', '200' etc | string | no | all | yes | +| font | Font family of the text - 'Arial', 'Cursive', 'Comic Sans MS' etc | string | no | all | no | +| textBackgroundColor | Background color for the label text | ColorValue | no | all | yes | +| textBackgroundRadius | Radius for the background of the text label | number | no | all | yes | +| labelPosition | Tells where inside the Pie sections should the labels be shown- 'onBorder', 'outward', 'inward' or 'mid' | string | no | all | yes | +| onPress | Callback function called on press of Pie sections (takes item and index as parameter) | Function | no | all | yes | +| strokeWidth | Stroke (line) width for the Pie chart and its section | number | no | all | yes | +| strokeColor | Stroke (line) color | ColorValue | no | all | yes | +| focused | When set to true, the section for that item is focused, sectionAutoFocus must be set true in order to use this property | boolean | no | all | yes | +| pieInnerComponent | Svg element to be rendered inside the Pie like a label (position controlled by 'labelsPosition' ) | () => svg element | no | all | yes | **Donut chart related props** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| donut | When set to true, renders a Donut chart (makes an inner ring) | boolean | no | all | yes -| innerRadius | Radius of the inner ring | number | no | all | yes -| innerCircleColor | Color of the inner ring | ColorValue| no | all | yes -| innerCircleBorderWidth | Stroke (border) width of the inner ring | number | no | all | yes -| innerCircleBorderColor | Stroke (border) color of the inner ring | ColorValue | no | all | yes -| shiftInnerCenterX | Shifts the inner ring horizontally to enhance the 3D effect | number | no | all | yes -| shiftInnerCenterY | Shifts the inner ring vertically to enhance the 3D effect | number | no | all | yes + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------- | ------------------------------------------------------------ | ---------- | -------- | -------- | ----------------- | +| donut | When set to true, renders a Donut chart (makes an inner ring) | boolean | no | all | yes | +| innerRadius | Radius of the inner ring | number | no | all | yes | +| innerCircleColor | Color of the inner ring | ColorValue | no | all | yes | +| innerCircleBorderWidth | Stroke (border) width of the inner ring | number | no | all | yes | +| innerCircleBorderColor | Stroke (border) color of the inner ring | ColorValue | no | all | yes | +| shiftInnerCenterX | Shifts the inner ring horizontally to enhance the 3D effect | number | no | all | yes | +| shiftInnerCenterY | Shifts the inner ring vertically to enhance the 3D effect | number | no | all | yes | ### Population Pyramid @@ -1000,6 +1136,37 @@ export default function () { | rightSurplusBorderColor | border color of the right surplus | ColorValue | no | all | yes | | leftSurplusBorderWidth | border width of the left surplus | number | no | all | yes | | rightSurplusBorderWidth | border width of the right surplus | number | no | all | yes | +| verticalLinesType1.4.62+ | SOLID or DASHED/DOTTED | RuleTypes | no | all | no | +| onLeftPress1.4.62+ | Callback function called when a left bar is pressed. Takes 2 params- item and index. | (item, index) => void | no | all | yes | +| onRightPress1.4.62+ | Callback function called when a right bar is pressed. Takes 2 params- item and index. | (item, index) => void | no | all | yes | + +### **Radar Chart Props**1.4.62+ + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ------------------------------------------------------------ | ---------------- | -------- | -------- | ----------------- | +| circular | Determines whether the RadarChart uses a circular layout (`true`) or a polygonal layout (`false`). | boolean | no | all | yes | +| gridConfig | Configures the appearance and behavior of grid lines in the RadarChart. | GridConfig | no | all | yes | +| data | Defines the data for the RadarChart, where each number represents a data point's value along an axis. | number[] | no | all | yes | +| maxValue | maximum data value that the radar chart can render | number | no | all | yes | +| noOfSections | number of cocentric polygons/circle that depict the number of levels in the grid | number | no | all | yes | +| chartSize | size of the chart | number | no | all | yes | +| labelConfig | Configures the appearance and positioning of axis labels in the RadarChart. | LabelConfig | no | all | yes | +| labelConfigArray | An array of configuration objects to customize individual axis labels in the RadarChart. Each object corresponds to a specific axis. | LabelConfig[] | no | all | yes | +| labels | Defines the titles for each axis in the RadarChart. Each string corresponds to a specific axis, providing a descriptive label. | string[] | no | all | yes | +| dataLabels | label texts at the polygon vertices | string[] | no | all | yes | +| dataLabelsConfigArray | An array of configuration objects to customize individual data point labels in the RadarChart. Each object corresponds to a specific data point | LabelConfig[] | no | all | yes | +| showdataValuesAsLabels | Controls whether data point values are displayed as labels on the RadarChart. When enabled, each value appears near its corresponding data point. | boolean | no | all | no | +| polygonConfig | Configures the appearance and behavior of the polygonal shape formed by data points in the RadarChart. This property customizes the visual structure of the chart's core geometry. | PolygonConfig | no | all | yes | +| asterLinesConfig | Configures the appearance of radial grid lines (background reference lines) in the RadarChart. | AsterLinesConfig | no | all | yes | +| hideAsterLines | Controls whether radial reference lines (aster lines) are hidden or displayed in the RadarChart. When enabled, these lines are not rendered. | boolean | no | all | yes | +| hideGrid | When set to `true`, the concentric grid lines (e.g., circular or polygonal background lines) are hidden. When set to `false` (default), the grid lines are displayed. | boolean | no | all | yes | +| hideLabels | Controls whether all labels (axis labels and data point labels) are hidden in the RadarChart. When enabled, all labels are not displayed. | boolean | no | all | yes | +| dataLabelsConfig | Configures the visual style and positioning of all data point labels in the RadarChart. | LabelConfig | no | all | yes | +| labelsPositionOffset | Adjusts the distance of all labels (axis or data point labels) from their default position on the RadarChart. | number | no | all | yes | +| dataLabelsPositionOffset | Adjusts the distance of data point labels from their default position on the RadarChart. | number | no | all | yes | +| isAnimated | Controls whether animation effects are enabled for the RadarChart. | boolean | no | all | yes | +| animationDuration | Specifies the duration of the animation (in milliseconds) for the RadarChart when `isAnimated={true}`. Controls how long the animation takes to complete. | number | no | all | yes | +| animateTogether | Determines whether all data points animate simultaneously or sequentially when animation is enabled. When `true`, all elements reach their final state at the same time | boolean | no | all | yes | ## 遗留问题 @@ -1030,6 +1197,11 @@ export default function () { - LineChart areaChart1 areaChart2 areaChart3 areaChart4 areaChart5 不生效,效果与 iOS/Android 一致。[issue#892](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/892) - BarChart pointerEvents 不生效,效果与 iOS/Android 一致. - BarChart/LineChart pointerConfig 的 activatePointersDelay 不生效,效果与 iOS/Android 一致。 +- V1.4.62，LineChart组件新增属性：stepChart1、stepChart2、stepChart3、stepChart4、stepChart5、dataPointLabelComponent、focusedDataPointLabelComponent、intersectionAreaConfig 不生效，效果与Android 一致。 +- V1.4.62，Population Pyramid组件新增属性：verticalLinesType 不生效，效果与Android 一致。 +- V1.4.62，RadarieChart组件新增属性：showdataValuesAsLabels 不生效，效果与Android 一致。 +- V1.4.62，BarChart组件新增属性：bounces， 该属性仅支持iOS，不需要鸿蒙化。 +- V1.4.62，BarChart组件新增属性：overScrollMode， 该属性仅支持Android，不需要鸿蒙化。 ## 开源协议 diff --git a/zh-cn/react-native-idle-timer.md b/zh-cn/react-native-idle-timer.md index 30a5514c..e6926184 100644 --- a/zh-cn/react-native-idle-timer.md +++ b/zh-cn/react-native-idle-timer.md @@ -19,7 +19,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-idle-timer Releases](https://github.com/react-native-oh-library/react-native-idle-timer/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.2.3 | [@react-native-oh-tpl/react-native-idle-timer Releases](https://github.com/react-native-oh-library/react-native-idle-timer/releases) | 0.72 | +| 2.2.3 | [@react-native-ohos/react-native-idle-timer Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -28,13 +35,21 @@ #### **npm** ```bash +# V2.2.3 for RN0.72 npm install @react-native-oh-tpl/react-native-idle-timer + +# V2.2.3 for RN0.77 +npm install @react-native-ohos/react-native-idle-timer ``` #### **yarn** ```bash +# V2.2.3 for RN0.72 yarn add @react-native-oh-tpl/react-native-idle-timer + +# V2.2.3 for RN0.77 +yarn add @react-native-ohos/react-native-idle-timer ``` @@ -70,6 +85,8 @@ export default IdleTimerExample; ## 使用 Codegen +> [!TIP] V2.2.3 for RN0.77 不需要执行 Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -102,6 +119,8 @@ export default IdleTimerExample; 打开 `entry/oh-package.json5`，添加以下依赖 +- V2.2.3 for RN0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony" : "file:../react_native_openharmony", @@ -109,6 +128,15 @@ export default IdleTimerExample; } ``` +- V2.2.3 for RN0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony" : "file:../react_native_openharmony", + "@react-native-ohos/react-native-idle-timer": "file:../../node_modules/@react-native-ohos/react-native-idle-timer/harmony/idle_timer.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -130,8 +158,13 @@ ohpm install ```diff ... import type {RNPackageContext, RNPackage} from '@rnoh/react-native-openharmony/ts'; + +// V2.2.3 for RN0.72 +import {RNIdleTimerPackage} from '@react-native-oh-tpl/react-native-idle-timer/ts'; +// V2.2.3 for RN0.77 ++import {RNIdleTimerPackage} from '@react-native-ohos/react-native-idle-timer/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -159,7 +192,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-idle-timer Releases](https://github.com/react-native-oh-library/react-native-idle-timer/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.2.3 | [@react-native-oh-tpl/react-native-idle-timer Releases](https://github.com/react-native-oh-library/react-native-idle-timer/releases) | 0.72 | +| 2.2.3 | [@react-native-ohos/react-native-idle-timer Releases]() | 0.77 | ## API diff --git a/zh-cn/react-native-map-clustering.md b/zh-cn/react-native-map-clustering.md index b16bfd52..3960d0c4 100644 --- a/zh-cn/react-native-map-clustering.md +++ b/zh-cn/react-native-map-clustering.md @@ -16,7 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-map-clustering Releases](https://github.com/react-native-oh-library/react-native-map-clustering/releases)。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 3.4.0 | [@react-native-oh-tpl/react-native-map-clustering Releases](https://github.com/react-native-oh-library/react-native-map-clustering/releases) | 0.72 | +| 3.4.0 | [@react-native-ohos/react-native-map-clustering Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -27,13 +34,21 @@ #### **npm** ```bash +# V3.4.0 for RN0.72 npm install @react-native-oh-tpl/react-native-map-clustering + +# V3.4.0 for RN0.77 +npm install @react-native-ohos/react-native-map-clustering ``` #### **yarn** ```bash +# V3.4.0 for RN0.72 yarn add @react-native-oh-tpl/react-native-map-clustering + +# V3.4.0 for RN0.77 +yarn add @react-native-ohos/react-native-map-clustering ``` @@ -92,7 +107,6 @@ export function MapClusteringExample() { ); }; - ``` ## Link @@ -106,7 +120,12 @@ export function MapClusteringExample() { 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-map-clustering Releases](https://github.com/react-native-oh-library/react-native-map-clustering/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 3.4.0 | [@react-native-oh-tpl/react-native-map-clustering Releases](https://github.com/react-native-oh-library/react-native-map-clustering/releases) | 0.72 | +| 3.4.0 | [@react-native-ohos/react-native-map-clustering Releases]() | 0.77 | ## 属性 diff --git a/zh-cn/react-native-material-ui.md b/zh-cn/react-native-material-ui.md index 720a22a5..294eabfb 100644 --- a/zh-cn/react-native-material-ui.md +++ b/zh-cn/react-native-material-ui.md @@ -18,7 +18,14 @@ ## 安装与使用 请到三方库的 Releases -发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-material-ui Releases](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-material-ui%2Freleases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.30.1 | [@react-native-oh-tpl/react-native-material-ui Releases](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-material-ui%2Freleases) | 0.72 | +| 1.30.1 | [@react-native-ohos/react-native-material-ui Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -27,13 +34,21 @@ #### **npm** ```bash +# V1.30.1 for RN0.72 npm install @react-native-oh-tpl/react-native-material-ui + +# V1.30.1 for RN0.77 +npm install @react-native-ohos/react-native-material-ui ``` #### **yarn** ```bash +# V1.30.1 for RN0.72 yarn add @react-native-oh-tpl/react-native-material-ui + +# V1.30.1 for RN0.77 +yarn add @react-native-ohos/react-native-material-ui ``` @@ -85,7 +100,7 @@ const ActionButtonDemo = () => { { style={{toolbarContainer:{backgroundColor:'blue'}}} actions={[{ icon: 'email', label: 'email', name: 'email' }, { icon: 'phone', label: 'Phone', name: 'phone' }, - { icon: 'sms', label: 'text', name: 'text' }, + { icon: 'sms', label: 'sms', name: 'sms' }, { icon: 'chat', label: 'chat', name: 'chat' }]} icon="share" transition="toolbar" @@ -133,7 +148,6 @@ const styles = StyleSheet.create({ } }); - export default ActionButtonDemo ``` ### 在 ArkTs 侧引入和注册字体文件 @@ -194,7 +208,12 @@ struct Index { 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-material-ui Releases](https://github.com/react-native-oh-library/react-native-material-ui/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.30.1 | [@react-native-oh-tpl/react-native-material-ui Releases](https://github.com/react-native-oh-library/react-native-material-ui/releases) | 0.72 | +| 1.30.1 | [@react-native-ohos/react-native-material-ui Releases]() | 0.77 | ## 组件 diff --git a/zh-cn/react-native-safe-modules.md b/zh-cn/react-native-safe-modules.md index 82b539b6..3ce88e50 100644 --- a/zh-cn/react-native-safe-modules.md +++ b/zh-cn/react-native-safe-modules.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-safe-modules Releases](https://github.com/react-native-oh-library/react-native-safe-modules/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.0.3 | [@react-native-oh-tpl/react-native-safe-modules Releases](https://github.com/react-native-oh-library/react-native-safe-modules/releases) | 0.72 | +| 1.0.3 | [@react-native-ohos/react-native-safe-modules Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -26,13 +33,21 @@ #### **npm** ```bash +# V1.0.3 for RN0.72 npm install @react-native-oh-tpl/react-native-safe-modules + +# V1.0.3 for RN0.77 +npm install @react-native-ohos/react-native-safe-modules ``` #### **yarn** ```bash +# V1.0.3 for RN0.72 yarn add @react-native-oh-tpl/react-native-safe-modules + +# V1.0.3 for RN0.77 +yarn add @react-native-ohos/react-native-safe-modules ``` @@ -78,7 +93,12 @@ export default App; 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-safe-modules Releases](https://github.com/react-native-oh-library/react-native-safe-modules/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.0.3 | [@react-native-oh-tpl/react-native-safe-modules Releases](https://github.com/react-native-oh-library/react-native-safe-modules/releases) | 0.72 | +| 1.0.3 | [@react-native-ohos/react-native-safe-modules Releases]() | 0.77 | ## API diff --git a/zh-cn/react-native-signature-capture.md b/zh-cn/react-native-signature-capture.md index 36f09ca6..30fc3892 100644 --- a/zh-cn/react-native-signature-capture.md +++ b/zh-cn/react-native-signature-capture.md @@ -19,23 +19,37 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-signature-capture Releases](https://github.com/react-native-oh-library/react-native-signature-capture/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： -进入到工程目录并输入以下命令： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.4.11 | [@react-native-oh-library/react-native-signature-capture Releases](https://github.com/react-native-oh-library/react-native-signature-capture/releases) | 0.72 | +| 0.4.11 | [@react-native-oh-library/react-native-signature-capture Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +进入到工程目录并输入以下命令： #### npm ```bash +# V0.4.11 for RN0.72 npm install @react-native-oh-tpl/react-native-signature-capture + +# V0.4.11 for RN0.77 +npm install @react-native-ohos/react-native-signature-capture ``` #### yarn ```bash +# V0.4.11 for RN0.72 yarn add @react-native-oh-tpl/react-native-signature-capture + +# V0.4.11 for RN0.77 +yarn add @react-native-ohos/react-native-signature-capture ``` @@ -134,6 +148,8 @@ AppRegistry.registerComponent('RNSignatureExample', () => RNSignatureExample); ## 使用 Codegen +> [!TIP] V0.4.11 for RN0.77 不需要执行 Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -166,6 +182,8 @@ AppRegistry.registerComponent('RNSignatureExample', () => RNSignatureExample); 打开 `entry/oh-package.json5`，添加以下依赖 +- V0.4.11 for RN0.72 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -173,6 +191,15 @@ AppRegistry.registerComponent('RNSignatureExample', () => RNSignatureExample); } ``` +- V0.4.11 for RN0.77 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-signature-capture": "file:../../node_modules/@react-native-ohos/react-native-signature-capture/harmony/rnoh_signature_capture.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -186,14 +213,78 @@ ohpm install > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) -### 3.在 ArkTs 侧引入 SignatureCaptureArkView 组件 +### 3.配置 CMakeLists 和引入SignatureCapturePackage + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff + +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V0.4.11 for RN0.77 ++ set(REACT_NATIVE_SIGNATURE_CAPTURE_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@react-native-ohos/react-native-signature-capture/src/main/cpp") ++ include_directories(${REACT_NATIVE_SIGNATURE_CAPTURE_CPP_DIR}) +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "generated/SignatureCapturePackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4.在 ArkTs 侧引入 SignatureCaptureArkView 组件 找到 `function buildCustomRNComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： ```diff ... +// V0.4.11 for RN0.72 + import { SignatureCaptureArkView } from '@react-native-oh-tpl/react-native-signature-capture' +// V0.4.11 for RN0.77 ++ import { SignatureCaptureArkView } from '@react-native-ohos/react-native-signature-capture' + @Builder export function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... @@ -221,14 +312,18 @@ const arkTsComponentNames: Array = [ ]; ``` -### 4.在 ArkTs 侧引入 SignatureCapturePackage +### 5.在 ArkTs 侧引入 SignatureCapturePackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff ... +// V0.4.11 for RN0.72 + import { SignatureCapturePackage } from '@react-native-oh-tpl/react-native-signature-capture/ts'; +// V0.4.11 for RN0.77 ++ import { SignatureCapturePackage } from '@react-native-ohos/react-native-signature-capture/ts'; + export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), @@ -237,7 +332,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 5.运行 +### 6.运行 点击右上角的 `sync` 按钮 @@ -256,9 +351,14 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-signature-capture Releases](https://github.com/react-native-oh-library/react-native-signature-capture/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 0.4.11 | [@react-native-oh-library/react-native-signature-capture Releases](https://github.com/react-native-oh-library/react-native-signature-capture/releases) | 0.72 | +| 0.4.11 | [@react-native-oh-library/react-native-signature-capture Releases]() | 0.77 | + - ## 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 diff --git a/zh-cn/react-native-snackbar.md b/zh-cn/react-native-snackbar.md index 90e58ddf..3f6e1dc7 100644 --- a/zh-cn/react-native-snackbar.md +++ b/zh-cn/react-native-snackbar.md @@ -16,7 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-snackbar Releases](https://github.com/react-native-oh-library/react-native-snackbar/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.7.1 | [@react-native-oh-tpl/react-native-snackbar Releases](https://github.com/react-native-oh-library/react-native-snackbar/releases) | 0.72 | +| 2.9.0 | [@react-native-ohos/react-native-snackbar Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -25,13 +32,21 @@ #### **npm** ```bash +# V2.7.1 npm install @react-native-oh-tpl/react-native-snackbar + +# V2.9.0 +npm install @react-native-ohos/react-native-snackbar ``` #### **yarn** ```bash +# V2.7.1 yarn add @react-native-oh-tpl/react-native-snackbar + +# V2.9.0 +yarn add @react-native-ohos/react-native-snackbar ``` @@ -56,15 +71,17 @@ export const SnackbarTest = () => { }} > -