You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+24Lines changed: 24 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -279,13 +279,19 @@ The `react-native-template` includes several packages that extend its capabiliti
279
279
#### Lucide-React-Native
280
280
[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.
281
281
282
+
<aname="react-hook-form"></a>
283
+
282
284
#### React Hook Form
283
285
[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.
284
286
287
+
<aname="customizable-components"></a>
288
+
285
289
## Customizable Components 🎄
286
290
287
291
This template includes a set of customizable components that you can use to build your application:
288
292
293
+
<aname="button"></a>
294
+
289
295
## Button ⏩
290
296
291
297
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
350
356
351
357
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.
352
358
359
+
<aname="dialog"></a>
360
+
353
361
## Dialog 🗨️
354
362
355
363
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 ? (
460
468
461
469
With the `Loading` component, you provide a seamless and informative loading experience to your application's users.
462
470
471
+
<aname="formtextinput"></a>
472
+
463
473
## FormTextInput 📝
464
474
465
475
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';
522
532
523
533
By using `FormTextInput`, form inputs are handled elegantly, providing a streamlined user experience for form interactions.
524
534
535
+
<aname="validationerror"></a>
536
+
525
537
## ValidationError 🔍
526
538
527
539
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';
588
600
589
601
The `ValidationError` and `WithValidationError` components help maintain a clean UI by only showing error messages when necessary, enhancing the user experience with clear feedback.
590
602
603
+
<aname="toaster"></a>
604
+
591
605
## Toaster 🍞
592
606
593
607
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
639
653
640
654
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.
641
655
656
+
<aname="using-the-template-effectively"></a>
657
+
642
658
## Using the Template Effectively 🛠️
643
659
644
660
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.
645
661
662
+
<aname="recommended-folder-structure"></a>
663
+
646
664
### Recommended Folder Structure 📁
647
665
648
666
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:
656
674
-**`/ui`**: For generic, reusable UI components.
657
675
-**`/[component-name]`**: For large, complex, or specific components like `/sidebar`, `/complex-navbar`, or `/custom-calendar`.
658
676
677
+
<aname="development-decision-flow-chart"></a
678
+
659
679
### Development Decision Flow Chart 🔄
660
680
661
681
When developing with this template, use the following decision process:
@@ -666,6 +686,8 @@ When developing with this template, use the following decision process:
-**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:
675
697
676
698
By following this development flow, you can maintain a clean and organized codebase that is easy to navigate and scale as your application grows.
677
699
700
+
<aname="finish-line"></a>
701
+
678
702
## Finish Line 🏁
679
703
680
704
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