{"id":29791627,"url":"https://github.com/blaiti/react-native-mixins","last_synced_at":"2025-10-06T11:21:38.300Z","repository":{"id":303284607,"uuid":"1014992636","full_name":"blaiti/react-native-mixins","owner":"blaiti","description":"A utility-first style mixin helper for clean and responsive UI design.","archived":false,"fork":false,"pushed_at":"2025-07-06T20:13:10.000Z","size":1373,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-30T09:55:14.521Z","etag":null,"topics":["react-native","typescript"],"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/blaiti.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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-06T19:59:40.000Z","updated_at":"2025-07-31T12:48:32.000Z","dependencies_parsed_at":"2025-07-06T20:11:49.255Z","dependency_job_id":"2cc96b30-5e3b-498b-9775-d5a57d8b39f0","html_url":"https://github.com/blaiti/react-native-mixins","commit_stats":null,"previous_names":["blaiti/react-native-mixins"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/blaiti/react-native-mixins","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blaiti%2Freact-native-mixins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blaiti%2Freact-native-mixins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blaiti%2Freact-native-mixins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blaiti%2Freact-native-mixins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blaiti","download_url":"https://codeload.github.com/blaiti/react-native-mixins/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blaiti%2Freact-native-mixins/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278567085,"owners_count":26007895,"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","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["react-native","typescript"],"created_at":"2025-07-28T00:32:39.151Z","updated_at":"2025-10-06T11:21:38.251Z","avatar_url":"https://github.com/blaiti.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Mixins\n\nA lightweight utility library for React Native that provides essential mixins and utilities for responsive design, platform-specific styling, and device detection.\n\n## 🧪 Features\n\n- 📱 **Responsive Scaling**: Scale sizes, fonts, and layouts across different screen sizes\n- 🎯 **Platform-Specific Styling**: Easy platform-specific style management\n- 📏 **Device Detection**: Detect device types and orientations\n- 📦 **Zero Dependencies**: No external dependencies\n- ⚡ **Lightweight**: Minimal bundle size impact\n\n## 📦 Installation\n\n```bash\nnpm install react-native-mixins\n```\n\nor\n\n```bash\nyarn add react-native-mixins\n```\n\n## 🚀 Quick Start\n\n```tsx\nimport {\n  sizeScale,\n  verticalScale,\n  fontScale,\n  platformMixin,\n} from 'react-native-mixins';\n\nconst styles = StyleSheet.create({\n  container: {\n    padding: sizeScale(16),\n    gap: verticalScale(8),\n  },\n  text: {\n    fontSize: fontScale(18),\n    ...platformMixin({\n      ios: { fontFamily: 'Arial' },\n      android: { fontFamily: 'Roboto' },\n    }),\n  },\n});\n```\n\n## ⚙️ API Reference\n\n### Scaling Utilities\n\n#### `sizeScale(size: number): number`\n\nScales a size value based on screen width. Uses a guideline base width of 375px.\n\n```tsx\nconst padding = sizeScale(16); // Responsive padding\nconst margin = sizeScale(8); // Responsive margin\n```\n\n#### `verticalScale(size: number): number`\n\nScales a size value based on screen height. Uses a guideline base height of 812px.\n\n```tsx\nconst gap = verticalScale(16); // Responsive vertical spacing\nconst height = verticalScale(100); // Responsive height\n```\n\n#### `fontScale(size: number): number`\n\nScales font sizes with pixel-perfect rounding for crisp text rendering.\n\n```tsx\nconst fontSize = fontScale(18); // Responsive font size\n```\n\n### Platform Mixin\n\n#### `platformMixin(styles: PlatformStyles): object`\n\nApplies platform-specific styles with fallback support.\n\n```tsx\nconst styles = StyleSheet.create({\n  button: {\n    ...platformMixin({\n      ios: {\n        backgroundColor: '#007AFF',\n        borderRadius: 8,\n      },\n      android: {\n        backgroundColor: '#6200EE',\n        elevation: 2,\n      },\n      default: {\n        backgroundColor: '#000000',\n      },\n    }),\n  },\n});\n```\n\n### Device Detection\n\n#### `isSmallDevice(): boolean`\n\nReturns `true` if the device width is less than 360px.\n\n```tsx\nif (isSmallDevice()) {\n  // Apply compact layout\n}\n```\n\n#### `isTablet(): boolean`\n\nReturns `true` if the device width is 768px or greater.\n\n```tsx\nif (isTablet()) {\n  // Apply tablet-specific layout\n}\n```\n\n## 📖 Guidelines\n\n### Scaling Guidelines\n\n- **Base Width**: 375px (iPhone X/11/12/13/14 width)\n- **Base Height**: 812px (iPhone X/11/12/13/14 height)\n- **Small Device**: \u003c 360px width\n- **Tablet**: ≥ 768px width\n\n### Best Practices\n\n1. **Use `sizeScale` for horizontal spacing**: padding, margin, width\n2. **Use `verticalScale` for vertical spacing**: gap, height, line-height\n3. **Use `fontScale` for text sizes**: Ensures crisp rendering\n4. **Combine with device detection**: Create adaptive layouts\n5. **Platform-specific styling**: Use `platformMixin` for native feel\n\n## ✍️ Contributing\n\nContributions are welcome! 🚀\n\nIf you'd like to:\n\n- Fix a bug\n- Suggest a new animated component\n- Improve performance or API design\n\nPlease open an [issue](https://github.com/blaiti/react-native-mixins/issues) or submit a [pull request](https://github.com/blaiti/react-native-mixins/pulls).\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## 📄 License\n\nMIT © [Skander Blaiti](https://github.com/blaiti)\n\n## 💬 Let's Connect!\n\n- [Portfolio](https://www.blaiti.com)\n- [Twitter](https://twitter.com/SkanderBlaiti)\n- [LinkedIn](https://www.linkedin.com/in/skanderblaiti)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblaiti%2Freact-native-mixins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblaiti%2Freact-native-mixins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblaiti%2Freact-native-mixins/lists"}