{"id":13515549,"url":"https://github.com/callstack/react-native-ios-kit","last_synced_at":"2025-06-28T23:42:04.887Z","repository":{"id":28232196,"uuid":"98528045","full_name":"callstack/react-native-ios-kit","owner":"callstack","description":"The missing React Native UI Kit for iOS","archived":false,"fork":false,"pushed_at":"2024-02-26T19:00:39.000Z","size":15234,"stargazers_count":520,"open_issues_count":68,"forks_count":53,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-05-02T19:17:48.173Z","etag":null,"topics":["ios-ui","react-native","ui-kit"],"latest_commit_sha":null,"homepage":"https://callstack.github.io/react-native-ios-kit/","language":"JavaScript","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/callstack.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}},"created_at":"2017-07-27T11:27:16.000Z","updated_at":"2024-06-18T18:27:21.244Z","dependencies_parsed_at":"2024-01-13T10:42:01.198Z","dependency_job_id":"6adb682a-e4ea-4c86-91c6-80c9f3753c16","html_url":"https://github.com/callstack/react-native-ios-kit","commit_stats":{"total_commits":235,"total_committers":21,"mean_commits":11.19047619047619,"dds":0.5234042553191489,"last_synced_commit":"61802710afaebbc618b7291a9aa4ac696c7b20e5"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Freact-native-ios-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Freact-native-ios-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Freact-native-ios-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstack%2Freact-native-ios-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/callstack","download_url":"https://codeload.github.com/callstack/react-native-ios-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246418693,"owners_count":20773935,"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":["ios-ui","react-native","ui-kit"],"created_at":"2024-08-01T05:01:12.762Z","updated_at":"2025-03-31T04:37:11.470Z","avatar_url":"https://github.com/callstack.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"react-native-ios-kit\" src=\"./assets/ios-kit-logo-name.png\" width=\"496\"\u003e\n\u003c/p\u003e\n\u003c/br\u003e\n\u003cp align=\"center\"\u003e\n  The missing React Native UI Kit for iOS.\n\u003c/p\u003e\n\n---\n\n![Build and test](https://github.com/callstack/react-native-ios-kit/workflows/Build%20and%20test/badge.svg)\n[![Version][version-badge]][package]\n[![MIT License][license-badge]][license]\n\n[![PRs Welcome][prs-welcome-badge]][prs-welcome]\n[![Chat][chat-badge]][chat]\n[![tweet][tweet-badge]][tweet]\n[![Sponsored by Callstack][callstack-badge]][callstack]\n\n## Features\n\nYou can find documentation with all list of features and components [here](https://callstack.github.io/react-native-ios-kit)\n\n## Try it out\n\nRun the [example app](https://snack.expo.io/@marchenkova/github.com-callstack-react-native-ios-kit:example) with [Expo](https://expo.io/) to see it in action.\n\nThe source code for the examples are under the [/example](https://github.com/callstack/react-native-ios-kit/tree/master/example) folder.\n\n## Getting Started\n\n### Installation\n\nOpen a Terminal in your project's folder and run\n\n```sh\n  yarn add react-native-ios-kit react-native-vector-icons\n```\n\nAfter installation, you'll need to link [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).\n\n### Usage\n\nWrap your root component in **ThemeProvider** from **react-native-ios-kit**.\n\nIt's a good idea to wrap the component which is passed to **AppRegistry.registerComponent**.\n\nExample:\n\n```javascript\nimport * as React from 'react';\nimport { AppRegistry } from 'react-native';\nimport { ThemeProvider } from 'react-native-ios-kit';\nimport App from './src/App';\n\nfunction Main() {\n  return (\n    \u003cThemeProvider\u003e\n      \u003cApp /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n\nAppRegistry.registerComponent('main', () =\u003e Main);\n```\n\nThe **ThemeProvider** component provides the theme to all the components in the framework. It also acts as a portal to components which need to be rendered at the top level.\n\n### Customization\n\n#### Main theme for application\n\nYou can provide a custom theme to customize the colors, fonts etc. with the **ThemeProvider** component.\nCheck the [Theme Type](https://callstack.github.io/react-native-ios-kit/docs/theme) to see what customization options are supported.\n\nExample:\n\n```javascript\nimport * as React from 'react';\nimport { AppRegistry } from 'react-native';\nimport { DefaultTheme, ThemeProvider } from 'react-native-ios-kit';\nimport color from 'color';\nimport App from './src/App';\n\nconst theme = {\n  ...DefaultTheme,\n  primaryColor: 'tomato',\n  primaryLightColor: color('tomato')\n    .lighten(0.2)\n    .rgb()\n    .string(),\n  disabledColor: 'yellow',\n};\n\nfunction Main() {\n  return (\n    \u003cThemeProvider theme={theme}\u003e\n      \u003cApp /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n#### Customization per component\n\nYou can also customize theme per one component by using `theme` prop.\n\nExample:\n\n```javascript\n  \u003cIcon\n    name=\"ios-people\"\n    theme={{\n      primaryColor: 'green'\n    }}\n  \u003e\n```\n\nThis code will change icon color to `green`\n\n## Documentation\n\nCheck the components and their usage in our [documentation](https://callstack.github.io/react-native-ios-kit).\n\n## Contributing\n\nRead the [contribution guidelines](/CONTRIBUTING.md) before contributing.\n\n## Made with ❤️ at Callstack\n\n`react-native-ios-kit` is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. [Callstack](callstack-readme-with-love) is a group of React and React Native geeks, contact us at [hello@callstack.com](mailto:hello@callstack.com) if you need any help with these or just want to say hi!\n\n\u003c!-- badges --\u003e\n\n[version-badge]: https://img.shields.io/npm/v/react-native-ios-kit.svg?style=flat-square\n[package]: https://www.npmjs.com/package/react-native-ios-kit\n[license-badge]: https://img.shields.io/npm/l/react-native-ios-kit.svg?style=flat-square\n[license]: https://opensource.org/licenses/MIT\n[chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=flat-square\u0026colorB=758ED3\n[chat]: https://discord.gg/zwR2Cdh\n[tweet-badge]: https://img.shields.io/badge/tweet-%23react--native--ios--kit-blue.svg?style=flat-square\u0026colorB=1DA1F2\u0026logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAUCAYAAACXtf2DAAAAAXNSR0IArs4c6QAAAaRJREFUOBGtlM8rBGEYx3cWtRHJRaKcuMtBSitxkCQ3LtzkP9iUUu5ODspRHLhRLtq0FxeicEBC2cOivcge%2FMgan3fNM8bbzL4zm6c%2BPT%2Fe7%2FO8887svrFYBWbbtgWzsAt3sAcpqJFxxF1QV8oJFqFPFst5dLWQAT87oTgPB7DtziFRT1EA4yZolsFkhwjGYFRO8Op0KD8HVe7unoB6PRTBZG8IctAmG1xrHcfkQ2B55sfI%2ByGMXSBqV71xZ8CWdxBxN6ThFuECDEAL%2Bc9HIzDYumVZ966GZnX0SzCZvEqTbkaGywkyFE6hKAsBPhFQ18uPUqh2ggJ%2BUor%2F4M%2F%2FzOC8g6YzR1i%2F8g4vvSI%2ByD7FFNjexQrjHd8%2BnjABI3AU4Wl16TuF1qANGll81jsi5qu%2Bw6XIsCn4ijhU5FmCJpkV6BGNw410hfSf6JKBQ%2FUFxHGYBnWnmOwDwYQ%2BwzdHqO75HtiAMJfaC7ph32FSRJCENUhDHsLaJkL%2FX4wMF4%2BwA5bgAcrZE4sr0Cu9Jq9fxyrvBHWbNkMD5CEHWTjjT2m6r5D92jfmbbKJEWuMMAAAAABJRU5ErkJggg%3D%3D\n[tweet]: https://twitter.com/intent/tweet?text=Check%20out%20react-native-ios-kit!%20https://github.com/callstack/react-native-ios-kit%20%F0%9F%91%8D\n[callstack]: https://callstack.com/open-source/?utm_source=github.com\u0026utm_medium=referral\u0026utm_campaign=react-native-ios-kit\u0026utm_term=readme-badge\n[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com\u0026utm_medium=referral\u0026utm_campaign=react-native-ios-kit\u0026utm_term=readme-with-love\n[callstack-badge]: https://callstack.com/images/callstack-badge.svg\n[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs-welcome]: http://makeapullrequest.com\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallstack%2Freact-native-ios-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcallstack%2Freact-native-ios-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallstack%2Freact-native-ios-kit/lists"}