Skip to content

Commit 50f84d0

Browse files
committed
docs: fix links
1 parent eae34e8 commit 50f84d0

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,13 +279,19 @@ The `react-native-template` includes several packages that extend its capabiliti
279279
#### Lucide-React-Native
280280
[Lucide-React-Native](https://github.com/lucide-icons/lucide-react-native) is a fork of the Feather Icons project, specifically tailored for React Native applications. It provides a collection of beautifully crafted, customizable icons which are easy to use in UI development. Using Lucide icons helps maintain consistency and clarity in the app’s design, making the interface more intuitive and visually appealing.
281281

282+
<a name="react-hook-form"></a>
283+
282284
#### React Hook Form
283285
[React Hook Form](https://react-hook-form.com/) is a flexible and efficient library for managing forms in React applications. It embraces uncontrolled components and native HTML inputs, utilizing hooks to optimize re-renders and improve performance. React Hook Form reduces the amount of boilerplate code needed to build complex forms while increasing performance compared to traditional form state management practices.
284286

287+
<a name="customizable-components"></a>
288+
285289
## Customizable Components 🎄
286290

287291
This template includes a set of customizable components that you can use to build your application:
288292

293+
<a name="button"></a>
294+
289295
## Button ⏩
290296

291297
A highly customizable button component that adopts the variants pattern inspired by `shadcn/ui`, allowing for a consistent yet adaptable design throughout your application.
@@ -350,6 +356,8 @@ To use your custom variant, just set the `variant` prop on the `Button` componen
350356

351357
By modifying the `Button` component's variants or adding new ones, you can cater to all your button design needs across the application with ease.
352358

359+
<a name="dialog"></a>
360+
353361
## Dialog 🗨️
354362

355363
A pre-styled `Dialog` component, using a context-based approach to manage its visibility. This component provides an easy way to create and control modal dialogs within your application.
@@ -460,6 +468,8 @@ return isLoading ? (
460468

461469
With the `Loading` component, you provide a seamless and informative loading experience to your application's users.
462470

471+
<a name="formtextinput"></a>
472+
463473
## FormTextInput 📝
464474

465475
The `FormTextInput` component in the template is a versatile input field designed to work seamlessly with `react-hook-form`. It incorporates features like form context integration, custom icons, and support for different input types including text, number, and multiline text.
@@ -522,6 +532,8 @@ import { MailIcon } from 'lucide-react-native';
522532

523533
By using `FormTextInput`, form inputs are handled elegantly, providing a streamlined user experience for form interactions.
524534

535+
<a name="validationerror"></a>
536+
525537
## ValidationError 🔍
526538

527539
The `ValidationError` component in the template is a dedicated UI element for displaying form validation errors. It integrates with `react-hook-form` and uses internationalization for error messages.
@@ -588,6 +600,8 @@ import { WithValidationError } from '@components/ValidationError';
588600

589601
The `ValidationError` and `WithValidationError` components help maintain a clean UI by only showing error messages when necessary, enhancing the user experience with clear feedback.
590602

603+
<a name="toaster"></a>
604+
591605
## Toaster 🍞
592606

593607
The `Toaster` component is a dynamic and interactive toast notification system designed to provide immediate feedback to users. It's connected to a store for global state management and comes with an API plugin for automatic display on API events.
@@ -639,10 +653,14 @@ The `Toaster` provides a smooth, user-friendly notification mechanism that enhan
639653

640654
Stay tuned for more components and features that will be added to the template in the future. We're committed to providing a comprehensive set of tools and solutions to help you build your mobile applications with ease.
641655

656+
<a name="using-the-template-effectively"></a>
657+
642658
## Using the Template Effectively 🛠️
643659

644660
To get the most out of the `react-native-template`, it's crucial to understand and utilize the recommended folder structure. This structure is meticulously designed to guide best practices in maintaining a clean, scalable, and maintainable codebase, enabling you to build applications quickly and efficiently.
645661

662+
<a name="recommended-folder-structure"></a>
663+
646664
### Recommended Folder Structure 📁
647665

648666
The folder structure serves as a blueprint for organizing your project's files:
@@ -656,6 +674,8 @@ The folder structure serves as a blueprint for organizing your project's files:
656674
- **`/ui`**: For generic, reusable UI components.
657675
- **`/[component-name]`**: For large, complex, or specific components like `/sidebar`, `/complex-navbar`, or `/custom-calendar`.
658676

677+
<a name="development-decision-flow-chart"></a
678+
659679
### Development Decision Flow Chart 🔄
660680

661681
When developing with this template, use the following decision process:
@@ -666,6 +686,8 @@ When developing with this template, use the following decision process:
666686

667687
![Flowchart Description](/assets/docs/flow-chart.png)
668688

689+
<a name="benefits-of-this-approach"></a>
690+
669691
### Benefits of This Approach ✨
670692

671693
- **Readability**: Keeping simple, screen-specific components within the screen file makes the code easier to follow.
@@ -675,6 +697,8 @@ When developing with this template, use the following decision process:
675697

676698
By following this development flow, you can maintain a clean and organized codebase that is easy to navigate and scale as your application grows.
677699

700+
<a name="finish-line"></a>
701+
678702
## Finish Line 🏁
679703

680704
Now go build something amazing with `react-native-template`! We hope this template provides you with the tools and structure you need to create high-quality mobile applications efficiently. If you have any questions, feedback, or suggestions, feel free to reach out to us. Happy coding! 🚀

0 commit comments

Comments
 (0)