diff --git a/README.en.md b/README.en.md
new file mode 100644
index 0000000000000000000000000000000000000000..250b6ec10eedaf3eb997f91b53069aa6321f4a2b
--- /dev/null
+++ b/README.en.md
@@ -0,0 +1,29 @@
+# Native XComponent
+
+### Introduction
+
+This codelab introduces how to use **XComponent** to call the NAPI to create an EGL/GLES environment, draw a square on the home page, and change the color of the square. The Native C++ template is used here.
+
+As shown in the following figure, tap the Draw Rectangle button to render a square in the drawing area of **XComponent**. Tap the drawing area so that the square displays another color. Tap the Draw Rectangle button again so that the square is restored to the original color.
+
+![native_xcomponent](screenshots/device/native_xcomponent.en.gif)
+
+### Concepts
+
+- EGL: an interface between Khronos rendering APIs (such as OpenGL ES and OpenVG) and the underlying native window system.
+- XComponent: a component that can accept and display the EGL/OpenGL ES and media data input.
+
+### Permissions
+
+N/A
+
+### How to Use
+
+1. Tap Draw Rectangle to render a square in the drawing area. Tap the drawing area to render the square with another color. Tap Draw Rectangle again to restore the color.
+
+### Constraints
+
+1. The sample is only supported on Huawei phones with standard systems.
+2. HarmonyOS: HarmonyOS NEXT Developer Beta1 or later.
+3. DevEco Studio: DevEco Studio NEXT Developer Beta1 or later.
+4. HarmonyOS SDK: HarmonyOS NEXT Developer Beta1 SDK or later.
diff --git a/screenshots/device/native_xcomponent.en.gif b/screenshots/device/native_xcomponent.en.gif
new file mode 100644
index 0000000000000000000000000000000000000000..2106142326c0445151430e4961689d6972aebb3f
Binary files /dev/null and b/screenshots/device/native_xcomponent.en.gif differ