From e451191c9ff63e4798199f538b86c9ba181d3507 Mon Sep 17 00:00:00 2001
From: kdn0325 <dn10003@gmail.com>
Date: Fri, 3 May 2024 01:47:18 +0900
Subject: [PATCH] docs: add @kdn0325/react-native-outlined-text-example docs

---
 README.md | 112 +++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 98 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index a1487e4..8b3e7da 100644
--- a/README.md
+++ b/README.md
@@ -1,31 +1,115 @@
-# @kdn0325/react-native-outlined-text
-
-If you use text contours in React-Native, you can easily build them with this library
+# React Native Stroke/Outline Text
 
 ## Installation
 
-```sh
+```bash
 npm install @kdn0325/react-native-outlined-text
+# or
+yarn add @kdn0325/react-native-outlined-text
 ```
 
 ## Usage
+Here's a quick example to get you started with StrokeText:
+
+```jsx
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import OutlinedText from '@kdn0325/react-native-outlined-text';
 
-```js
-import { multiply } from '@kdn0325/react-native-outlined-text';
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <OutlinedText
+        text={'Hello World'}
+        fontColor={'#000'}
+        fontSize={50}
+        fontWeight={'500'}
+        outlineColor={'#fff'}
+        shadowLine={2}
+      />
+      <OutlinedText
+        text={'Hello World'}
+        fontColor={'#fff'}
+        fontSize={50}
+        fontWeight={'500'}
+        outlineColor={'pink'}
+        shadowLine={2}
+      />
+      <OutlinedText
+        text={'Hello World'}
+        fontColor={'green'}
+        fontSize={50}
+        fontWeight={'500'}
+        outlineColor={'blue'}
+        shadowLine={2}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+});
 
-// ...
 
-const result = await multiply(3, 7);
 ```
 
-## Contributing
+### Props
 
-See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+The following table outlines the props available for the `StrokeText` component:
+
+| Prop           | Type    | Description                                                                                                                                                                                                         |
+|----------------|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `text`         | string  | The text content you want to display.                                                                                                                                                                               |
+| `shadowLine`         | number  | The thickness of the stroke (outline) around the text. If this prop isn't provided, the default thickness will be used. (default: `1`)                                                                              |
+| `color`        | string  | Color of the text, can use any valid color format. (default: `#fff`)                                                                                                                                                |
+| `outlineColor` | string  | Color of the stroke (outline) around the text.     (default: `#000`)                                                                                                                                                |
+| `fontWeight`   | string  | The thickness of the font. It accepts the following values: 'normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'. If this prop isn't provided, the default value 'normal' will be used. (default: `normal`)         |
+| `fontSize`     | string  | Size of the text font, defining how large the text will be.     (default: `14`)                                                                                                                                     |
+| `fontFamily`   | string  | Font family for the text, should match available project fonts.  (default: `system font`)                                                                                                                           |
+| `align`        | string  | Text alignment. It accepts the following values: 'auto', 'left', 'right', 'center', 'justify'. If this prop isn't provided, the default value 'center' will be used. (default: `center`)                                                                                                                                                                                  | |
 
-## License
 
-MIT
+## Ellipsis
 
----
+```jsx
+<OutlinedText
+    text={'Hello World'}
+    fontColor={'#fff'}
+    fontSize={50}
+    fontWeight={'500'}
+    outlineColor={'pink'}
+    line={2}
+/>
+
+```
 
-Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+## Custom Font
+Create a `react-native.config.js` file in the root directory
+
+```javascript
+module.exports = {
+  project: {
+    ios: {},
+    android: {},
+  },
+  assets: ['/assets/fonts'], // or './src/assets/fonts'
+};
+```
+
+
+## Contributing
+We welcome contributions to improve this component. Feel free to submit issues and enhancement requests.
+
+## License
+Please refer to the project's license for usage rights and limitations.