{"id":21936706,"url":"https://github.com/ilz5753/rnutils","last_synced_at":"2025-06-24T10:33:18.536Z","repository":{"id":212172228,"uuid":"730871431","full_name":"ilz5753/rnutils","owner":"ilz5753","description":"Crafting seamless UI/UX in React Native with RNUtils 🚀 Passionate about bridging design and code Contributing to fluid mobile experiences one animation at a time 💫","archived":false,"fork":false,"pushed_at":"2024-03-09T10:03:45.000Z","size":2009,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T14:11:15.146Z","etag":null,"topics":["animation-library","hooks","react","react-native","react-native-module","utility-library"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ilz5753.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-12-12T21:24:29.000Z","updated_at":"2023-12-12T22:37:39.000Z","dependencies_parsed_at":"2024-01-14T14:49:19.360Z","dependency_job_id":"b3993f64-a69c-4e17-a738-fad64d7eeb9c","html_url":"https://github.com/ilz5753/rnutils","commit_stats":null,"previous_names":["ilz5753/rnutils"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilz5753%2Frnutils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilz5753%2Frnutils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilz5753%2Frnutils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ilz5753%2Frnutils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ilz5753","download_url":"https://codeload.github.com/ilz5753/rnutils/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244966524,"owners_count":20539797,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation-library","hooks","react","react-native","react-native-module","utility-library"],"created_at":"2024-11-29T01:16:02.685Z","updated_at":"2025-03-22T14:17:54.006Z","avatar_url":"https://github.com/ilz5753.png","language":"TypeScript","readme":"# RNUtils (@ilz5753/rnutils) Comprehensive React Native Styling, Animation \u0026 Utils Library\n\nRNUtils is an all-encompassing library designed to provide React Native developers with an extensive suite of tools for creating dynamic styles, animations, and utility functions for an improved developer experience and efficient, clean codebases.\n\n## Table of Contents\n\n- [Features](#features)\n- [Installation](#installation)\n- [Animated Components](#animated-components)\n- [Animated Components Usage](#animated-components-usage)\n- [Hooks](#hooks)\n- [Utility Functions](#utility-functions)\n- [API Reference](#api-reference)\n- [Types](#types)\n- [Static Styles Functions](#static-styles-functions)\n- [Platform-Specific Utilities](#platform-specific-utilities)\n- [Platform-Specific Utilities Usage](#platform-specific-utilities-usage)\n- [Extensibility](#extensibility)\n- [Contributing](#contributing)\n- [License](#license)\n- [Acknowledgments](#acknowledgments)\n\n## Features\n\n- A range of **Animated Components** for improved user experiences with smooth animations\n- **Hooks** that tap into Reanimated 3(3.3.0) for fluid animations and gestures\n- **Regular expressions** to identify numeric and percentage-based values\n- **Utility functions** to streamline common style pattern generations\n- **Type support** for TypeScript users to leverage strong typing throughout their styles\n\n## Installation\n\nTo install the library, run the following command in your React Native project:\n\n```bash\nnpm install @ilz5753/rnutils\n```\n\n```bash\nyarn add @ilz5753/rnutils\n```\n\n## Animated Components\n\nThe library wraps common React Native components, providing animated versions that can be used interchangeably to enhance your application.\n\n```ts\nimport { ReView, ReText, ReTouchableOpacity } from '@ilz5753/rnutils';\n```\n\n### Animated Components Usage\n\nThese components act as drop-in replacements for their React Native equivalents, now with support for animated styles generated by Reanimated:\n\n```tsx\n\u003cReView\u003e\n  \u003cReText\u003eThis is animated text within an animated view.\u003c/ReText\u003e\n\u003c/ReView\u003e\n```\n\n## Hooks\n\n`RNUtils` provides a rich set of hooks for working with shared and derived values, easing the animation process with tools for color, dimension, and number interpolations.\n\n**`useCacheShareValue`**\n\nThis hook manages a shared value for animations with a caching mechanism that memorizes the previous and current states to facilitate reversed or repeated animations.\n\n**`useColors`**\n\nProvides a suite of animated styles based on a single color value for different properties including `backgroundColor`, `borderColor`, and more.\n\n**`useNumberSizes`**\n\nGenerate numeric size-based styles like `flex`, `borderRadius`, or `fontSize` that are animatable.\n\n**`useDimensionSizes`**\n\nManipulate dimensions like `width`, `height`, `margin`, and `padding` with animated support for fluidly responsive designs.\n\n## Utility Functions\n\nThe library includes numerous utility functions to aid in quick style generation, border radii control, color manipulations, shadow handling, and layout shortcuts, along with others that determine the current operating system for conditional styling logic.\n\n**`getStyle`**\n\nRetrieve predefined styles for common needs using design tokens:\n\n```ts\nconst center = getStyle(['aic', 'jcc']); // Align items center, Justify content center\n```\n\n## API Reference\n\nFor in-depth documentation on the API, including all methods, hooks, and components, please refer to the included API documentation in the package.\n\n## Types\n\nTypeScript users can employ RNUtils’ comprehensive types to enforce strict typing throughout their styling code. The library exports types for every provided function and utility, ensuring that errors can be caught at compile-time.\n\n```ts\nimport type {\n  CustomDimensionValue,\n  StrNum,\n  DerivedColor,\n  DerivedDimension,\n} from '@ilz5753/rnutils';\n```\n\n**`CustomDimensionValue`**\n\nAllows either a number or a string percentage value, supporting dynamic dimensions.\n\n**`StrNum`**\n\nA union type that embraces both string and number, facilitating flexible API design where both types are commonplace.\n\n**`DerivedColor`**, **`DerivedDimension`**\n\nWrap Reanimated’s DerivedValue for specific use-cases like colors and dimensions, associating strong typing with animated values.\n\n## Static Styles Functions\n\nWith a focus on flexibility, static functions are provided to create scalable styles with minimal code, perfect for a range of scenarios from theming to dynamic user-driven styles.\n\n## Platform-Specific Utilities\n\nDetect the current platform using booleans like `isAndroid` or `isIos`, or check for mobile environments in general with `isMobile`.\n\n### Platform-Specific Utilities Usage\n\nImport and use functions directly within your style definitions:\n\n```ts\nimport { backgroundColor, flex, Layout } from '@ilz5753/rnutils';\n\nconst styles = {\n  ...backgroundColor('blue'),\n  ...flex(1),\n  ...Layout('50%', '25%'),\n};\n```\n\n## Extensibility\n\nRNUtils is designed to be extensible, working alongside your existing solutions and third-party libraries, allowing for broad compatibility and comprehensive styling control within React Native.\n\n## Contributing\n\nWe welcome contributions to make RNUtils better for everyone. If you’re looking to contribute, please follow the guidelines in [CONTRIBUTION.md](/CODE_OF_CONDUCT.md). Your proposals, bug reports, and pull requests are appreciated.\n\n## License\n\nRNUtils is licensed under the MIT License. See the [LICENSE](/LICENSE) file for more details.\n\n## Acknowledgments\n\nSpecial thanks to all the contributors and the open-source community for their ongoing support and inspiration.\n\n---\n\nFor more detailed usage and API information, please refer to the individual files pertaining to components, hooks, and utilities you wish to employ.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filz5753%2Frnutils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Filz5753%2Frnutils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Filz5753%2Frnutils/lists"}