{"id":16630323,"url":"https://github.com/yamankatby/react-native-material","last_synced_at":"2025-04-06T00:06:57.435Z","repository":{"id":38792126,"uuid":"396023653","full_name":"yamankatby/react-native-material","owner":"yamankatby","description":"Modular and customizable Material Design UI components for React Native","archived":false,"fork":false,"pushed_at":"2024-05-14T12:07:45.000Z","size":13772,"stargazers_count":237,"open_issues_count":19,"forks_count":38,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-29T08:46:22.834Z","etag":null,"topics":["material-design","react-native"],"latest_commit_sha":null,"homepage":"https://rn-material.js.org","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/yamankatby.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2021-08-14T13:52:58.000Z","updated_at":"2025-03-25T09:33:57.000Z","dependencies_parsed_at":"2024-10-25T18:30:29.444Z","dependency_job_id":"ced97c99-63c1-4a47-83b0-75b9d4cac6f8","html_url":"https://github.com/yamankatby/react-native-material","commit_stats":{"total_commits":404,"total_committers":6,"mean_commits":67.33333333333333,"dds":"0.017326732673267342","last_synced_commit":"63557637921dfb2e6683c5899a62265b1c5ca1a1"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamankatby%2Freact-native-material","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamankatby%2Freact-native-material/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamankatby%2Freact-native-material/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamankatby%2Freact-native-material/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yamankatby","download_url":"https://codeload.github.com/yamankatby/react-native-material/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247415967,"owners_count":20935388,"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":["material-design","react-native"],"created_at":"2024-10-12T04:46:22.270Z","updated_at":"2025-04-06T00:06:57.411Z","avatar_url":"https://github.com/yamankatby.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## ⚠️ Maintenance \u0026 support\n\nI am currently unable to actively maintain this library. While I continue to use it in my projects, I am facing time constraints that prevent me from dedicating proper attention to its maintenance.\n\nPlease understand that I may not be able to address issues, implement new features, or release updates at this time. However, I intend to resume maintenance as soon as I find the necessary resources.\n\n---\n\n# Material UI components for React Native [![Twitter Follow](https://img.shields.io/twitter/follow/yamankatby?style=social)](https://twitter.com/intent/user?screen_name=yamankatby)\n\n\u003e React Native Material is a set of pre-built, cross-platform, highly customizable UI components that follow Material Design principles.\n\n[![Latest Stable Version](https://img.shields.io/npm/v/@react-native-material/core.svg)](https://www.npmjs.com/package/@react-native-material/core)\n[![NPM Downloads](https://img.shields.io/npm/dm/@react-native-material/core.svg)](https://www.npmjs.com/package/@react-native-material/core)\n[![GitHub issues](https://img.shields.io/github/issues-raw/yamankatby/react-native-material.svg)](https://github.com/yamankatby/react-native-material/issues)\n[![Used Languages](https://img.shields.io/github/languages/top/yamankatby/react-native-material.svg)](https://github.com/yamankatby/react-native-material)\n\n![App bar](https://raw.githubusercontent.com/yamankatby/react-native-material/main/hero.png)\n\nLoved the project? Please share it with your friends and give it a ⭐️\n\n## ☘️️ Try it out\n\nTake a look at our example apps:\n\n- [💨 Expo Snack](https://snack.expo.dev/@yamankatby/react-native-material-explorer)\n- [🤖 Android](https://play.google.com/store/apps/details?id=com.swazer.material)\n- [🌍 Web](https://example.rn-material.js.org/)\n\n### Run the Explorer App on your device\n\nDownload Expo Go app on your device and scan this QR code to get started.\n\n- [🤖 Google Play](https://play.google.com/store/apps/details?id=host.exp.exponent)\n- [🍎 App Store](https://apps.apple.com/tr/app/expo-go/id982107779)\n\n\u003e Expo Go for iOS does not include a QR code scanner [learn more](https://blog.expo.dev/upcoming-limitations-to-ios-expo-client-8076d01aee1a). So you have to scan the code using the regular camera app.\n\n![Expo Go QR code](https://raw.githubusercontent.com/yamankatby/react-native-material/main/images/qr.png)\n\n### Run the Example app locally\n\nRun the [example app](https://github.com/yamankatby/react-native-material/tree/main/example) with Expo to see it in\naction. The source code is located under the `/example` folder.\n\n## ⬇️ Installation\n\n```shell\nnpm install @react-native-material/core\n```\n\nOr (If you're using yarn):\n\n```shell\nyarn add @react-native-material/core\n```\n\n## 🚀 Quick Start\n\nHere's a quick example to get you started, it's **literally all you need**:\n\n```js\nimport React from \"react\";\nimport { Button } from \"@react-native-material/core\";\n\nexport default function App() {\n  return \u003cButton title=\"Button\" onPress={() =\u003e alert(\"hi!\")} /\u003e;\n}\n```\n\n## 🔌 Component API\n\n### `\u003cAppbar /\u003e`\n\n[Try it out](https://rn-material.js.org/docs/components/app-bar)\n\nThe App bars display information and actions relating to the current screen.\n\n![App bar](https://raw.githubusercontent.com/yamankatby/react-native-material/main/images/app-bar.png)\n\n![Prominent App bar](https://raw.githubusercontent.com/yamankatby/react-native-material/main/images/prominent-app-bar.png)\n\n![Bottom App bar](https://raw.githubusercontent.com/yamankatby/react-native-material/main/images/bottom-app-bar.png)\n\n### `\u003cAvatar /\u003e`\n\n[Try it out](https://rn-material.js.org/docs/components/avatar)\n\nAvatars are found throughout material design with uses in everything from tables to dialog menus.\n\n![Avatar](https://raw.githubusercontent.com/yamankatby/react-native-material/main/images/avatar.png)\n\n### `\u003cBackdrop /\u003e`\n\n[Try it out](https://rn-material.js.org/docs/components/backdrop)\n\nA backdrop appears behind all other surfaces in an app, displaying contextual and actionable content.\n\n![Backdrop](https://raw.githubusercontent.com/yamankatby/react-native-material/main/images/backdrop.png)\n\n### `\u003cBadge /\u003e`\n\n[Try it out](https://rn-material.js.org/docs/components/badge)\n\nA Badge represents dynamic information such as several pending requests in a Bottom Navigation or Tab Bar.\n\n![Badge](https://raw.githubusercontent.com/yamankatby/react-native-material/main/images/badge.png)\n\n### `\u003cBanner /\u003e`\n\n[Try it out](https://rn-material.js.org/docs/components/banner)\n\nA banner displays a prominent message and related optional actions.\n\n![Banner](https://raw.githubusercontent.com/yamankatby/react-native-material/main/images/banner.png)\n\n### `\u003cButton /\u003e`\n\n[Try it out](https://rn-material.js.org/docs/components/button)\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n![Button](https://raw.githubusercontent.com/yamankatby/react-native-material/main/images/button.png)\n\n### `\u003cDivider /\u003e`\n\n[Try it out](https://rn-material.js.org/docs/components/divider)\n\nA divider is a thin line that groups content in lists and layouts.\n\n### `\u003cFAB /\u003e`\n\n[Try it out](https://rn-material.js.org/docs/components/fab)\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![Floating Action Button](https://raw.githubusercontent.com/yamankatby/react-native-material/main/images/fab.png)\n\n### `\u003cSurface /\u003e`\n\n[Try it out](https://rn-material.js.org/docs/components/surface)\n\nMaterial surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state,\nand express brand.\n\n![Surface](https://raw.githubusercontent.com/yamankatby/react-native-material/main/images/surface.png)\n\n### `\u003cTypography /\u003e`\n\n[Try it out](https://rn-material.js.org/docs/components/typography)\n\nUse typography to present your design and content as clearly and efficiently as possible.\n\n![Typography](https://raw.githubusercontent.com/yamankatby/react-native-material/main/images/typography.png)\n\n## 👍 Community\n\nThe community is your first stop for questions and advice about the framework. Welcome to the community!\n\n### StackOverflow\n\nFor crowdsourced answers from expert **React Native Material** developers in our community. StackOverflow is also\nfrequented, from time to time, by the maintainers of **React Native Material**.\n\n[Post a question](https://stackoverflow.com/questions/tagged/react-native-material)\n\n### GitHub\n\n**React Native Material** uses GitHub issues as a bug and feature request tracker. If you think you have found a bug, or\nhave a new feature idea, please start by making sure it hasn't already\nbeen [reported or fixed](https://github.com/yamankatby/react-native-material/issues?utf8=%E2%9C%93\u0026q=is%3Aopen+is%3Aclosed)\n. You can search through existing issues and pull requests to see if someone has reported one similar to yours.\n\n[Open an issue](https://github.com/yamankatby/react-native-material/issues/new/choose)\n\n## 🤝 Contributing\n\nPlease take a look at [Kanban](https://github.com/yamankatby/react-native-material/projects/1) where we have a roadmap\nfor **React Native Material** community. Also, we have a list\nof [good first issues](https://github.com/yamankatby/react-native-material/labels/good%20first%20issue) that contain\nbugs that have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with\nour contribution process.\n\n## 📝 License\n\nThis library is licensed under the MIT License - see\nthe [LICENSE](https://github.com/yamankatby/react-native-material/blob/main/LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamankatby%2Freact-native-material","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyamankatby%2Freact-native-material","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamankatby%2Freact-native-material/lists"}