diff --git a/1224/react-native-confirmation-code-field.md b/1224/react-native-confirmation-code-field.md
new file mode 100644
index 0000000000000000000000000000000000000000..8f6461a51d4c1527b918cc98a88fadd80f453ba7
--- /dev/null
+++ b/1224/react-native-confirmation-code-field.md
@@ -0,0 +1,153 @@
+> 模板版本：v0.1.3
+
+
+
react-native-confirmation-code-field
+
+
+
+ 
+
+
+ 
+
+
+
+> [!tip] [Github 地址](https://github.com/retyui/react-native-confirmation-code-field)
+
+## 安装与使用
+
+#### **npm**
+
+```bash
+npm install react-native-confirmation-code-field@7.3.2
+```
+
+#### **yarn**
+
+```bash
+yarn add react-native-confirmation-code-field@7.3.2
+```
+
+
+
+下面的代码展示了这个库的基本使用场景：
+
+>[!WARNING] 使用时 import 的库名不变。
+
+```js
+import React, {useState} from 'react';
+import {SafeAreaView, Text, StyleSheet} from 'react-native';
+
+import {
+ CodeField,
+ Cursor,
+ useBlurOnFulfill,
+ useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
+
+const styles = StyleSheet.create({
+ root: {flex: 1, padding: 20},
+ title: {textAlign: 'center', fontSize: 30},
+ codeFieldRoot: {marginTop: 20},
+ cell: {
+ width: 40,
+ height: 40,
+ lineHeight: 38,
+ fontSize: 24,
+ borderWidth: 2,
+ borderColor: '#00000030',
+ textAlign: 'center',
+ },
+ focusCell: {
+ borderColor: '#000',
+ },
+});
+
+const CELL_COUNT = 6;
+
+const App = () => {
+ const [value, setValue] = useState('');
+ const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT});
+ const [props, getCellOnLayoutHandler] = useClearByFocusCell({
+ value,
+ setValue,
+ });
+
+ return (
+
+ Verification
+ (
+
+ {symbol || (isFocused ? : null)}
+
+ )}
+ />
+
+ );
+};
+
+export default App;
+```
+
+## 约束与限制
+
+## 兼容性
+
+本文档内容基于以下版本验证通过：
+
+1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.59;
+## 组件
+
+> [!tip] "Platform"列表示该组件在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该组件；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name| Description| Type | Platform | HarmonyOS Support |
+|------------------------------------------ | -------- | -------- | -------- | ----------------- |
+| `CodeField` | This a base component that render RootComponent (default: View) with cells that would be returned by renderCell() and a that will be invisible and over all cells within root component | component | All | yes
+| `Cursor` | It's a help component for simulation a cursor blinking animation in | components | component | All | yes
+## CodeField属性
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------------ | ----------------------------------------------------------------------------------------- | ---------------- | -------- | -------- | ----------------- |
+| `cellCount` | Number of characters in input (optional, default: 4)| number | yes | All | yes |
+| `renderCell?` | Required function for Cell rendering, will be invoke with next options:{index: number, symbol: string, isFocused: boolean} | ReactElement | No | All | yes |
+| `RootComponent?` | if you want change root component for example using animations RootComponent={Animated.View} (optional, default View) | ComponentType | No | All | yes |
+| `InputComponent?` | If you want to provide a custom TextInput component that can receive the same props (optional, default TextInput) | ComponentType | No | All | yes |
+| `rootStyle?` | Styles for root component (optional) | StyleProp | No | All | yes |
+| `RootProps?` | Any props that will applied for root component | Object | No | All | yes|
+| `textInputStyle?` | Styles for invisible , can be used for testing or debug (optional) | StyleProp | No | All | yes
+## Hooks
+
+> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
+
+> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
+
+| Name | Description | Type | Required | Platform | HarmonyOS Support |
+| ------------------------------ | ----------------------------------------------------------------------------------------- | ---------------- | -------- | -------- | ----------------- |
+| `useClearByFocusCell` | Simple hook that add functionality that trim value by pressed cell,After invoke this hook wil return array with two values ` [props,getCellOnLayout] `;
-` props `- an object that you should spreed to ` `
- `getCellOnLayout(index: number): Function` - helper method that returns ` onLayout ` handler
- If you need to style only one borderX (example `borderBottom`) you need to know about React Native issue with [border styles for `` on iOS](https://github.com/facebook/react-native/issues/23537).
- To fix it need `` wrapper for Cell, but don't forger to move `onLayout={getCellOnLayoutHandler(index)` to ``| Function | yes | All | yes |
+| `useBlurOnFulfill` | This hook include a logic to blurring` `when value fulfilled You should pass two params:
- `value?: string` - a string value that;
- `cellCount: number`;
Returned value will be a TextInput ref that you should pass to` `component.And when a value length would equal cellCount will be called `.blur()` method.It work perfectly with `useClearByFocusCell` hook | Ref | yes | All | yes
+
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/Kureev/react-native-blur/blob/master/LICENSE) ，请自由地享受和参与开源。