{"id":31925433,"url":"https://github.com/carbon-design-system/carbon-react-native","last_synced_at":"2025-10-14T00:56:52.069Z","repository":{"id":184511635,"uuid":"668025726","full_name":"carbon-design-system/carbon-react-native","owner":"carbon-design-system","description":"The React Native implementation of the Carbon Design System","archived":false,"fork":false,"pushed_at":"2025-09-04T12:21:12.000Z","size":4438,"stargazers_count":38,"open_issues_count":2,"forks_count":10,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-09-12T22:25:15.118Z","etag":null,"topics":["design-system","react-native"],"latest_commit_sha":null,"homepage":"https://carbon-design-system.github.io/carbon-react-native/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/carbon-design-system.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-07-14T16:22:41.000Z","updated_at":"2025-08-20T00:21:09.000Z","dependencies_parsed_at":"2023-10-18T19:33:00.890Z","dependency_job_id":"3502f067-be87-4c02-858f-6bdd8464cd46","html_url":"https://github.com/carbon-design-system/carbon-react-native","commit_stats":null,"previous_names":["carbon-design-system/carbon-react-native"],"tags_count":53,"template":false,"template_full_name":null,"purl":"pkg:github/carbon-design-system/carbon-react-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carbon-design-system","download_url":"https://codeload.github.com/carbon-design-system/carbon-react-native/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-react-native/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279017339,"owners_count":26086053,"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-13T02:00:06.723Z","response_time":61,"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":["design-system","react-native"],"created_at":"2025-10-14T00:56:47.988Z","updated_at":"2025-10-14T00:56:52.058Z","avatar_url":"https://github.com/carbon-design-system.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.carbondesignsystem.com\"\u003e\n    \u003cimg alt=\"Carbon Design System\" src=\"https://user-images.githubusercontent.com/3360588/261031612-656879c1-832a-4ae9-9e93-6e68be7309b7.jpg\" width=\"100%\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n  Carbon for React Native\n\u003c/h1\u003e\n\n\u003e The React Native implementation of the [Carbon Design System](https://github.com/carbon-design-system/carbon)\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/carbon-design-system/carbon-react-native/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-Apache--2.0-blue.svg\" alt=\"Carbon is released under the Apache-2.0 license\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/carbon-design-system/carbon-react-native/actions/workflows/ci.yml\"\u003e\n    \u003cimg src=\"https://github.com/carbon-design-system/carbon-react-native/actions/workflows/ci.yml/badge.svg\" alt=\"CI workflow status\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/carbon-design-system/carbon-react-native/blob/main/.github/CONTRIBUTING.md\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs welcome\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bestpractices.coreinfrastructure.org/projects/7741\"\u003e\n    \u003cimg src=\"https://bestpractices.coreinfrastructure.org/projects/7741/badge\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://discord.gg/J7JEUEkTRX\"\u003e\n    \u003cimg src=\"https://img.shields.io/discord/689212587170201628?color=5865F2\" alt=\"Chat with us on Discord\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nComponent and shared patterns for React Native apps using Carbon. Styles are based on the [Carbon Native Mobile](https://carbondesignsystem.com/designing/design-resources/#native-mobile) designs. Color (`g10` for light theme and `g100` for dark theme) and typography tokens are based on Carbon v11.\n\n## Documentation\n\nDocumentation can be found [here](https://carbon-design-system.github.io/carbon-react-native/). This documentation is auto generated by the TypeScript files. To use the documentations you can find each component on the left side as a `Class`. Each component has a link to the example app code and the Props (`Component\u003cItemProps\u003e`) which can be jumped to by clicking the ItemProps. Props will indicate all props this component supports with documentation. Links will jump to related to type declarations.\n\n## Getting started\n\nTo install `@carbon/react-native` in your project, you will need to run the following\ncommand using [npm](https://www.npmjs.com/):\n\n```bash\nnpm install -S @carbon/react-native\n```\n\nIf you prefer [Yarn](https://yarnpkg.com/en/), use the following command\ninstead:\n\n```bash\nyarn add @carbon/react-native\n```\n\n1. Go into the `ios` directory and run `pod install` (be sure to use the system Ruby on Mac if you are using rvm or similar tool)\n1. Create or edit `react-native.config.js` file to be:\n   ```javascript\n   module.exports = {\n     project: {\n       ios: {},\n       android: {},\n     },\n     assets: [\n       './node_modules/@carbon/react-native/src/assets/fonts/', // This needs to be added if file already exists\n     ],\n   };\n   ```\n1. Run `npx react-native-asset` to link the fonts (install this package if not already).\n1. Install the following peer dependencies (install as dependencies. [See dependecies here for tested versions](example/package.json)):\n   - `@carbon/themes`\n   - `@carbon/icons`\n   - `@carbon/icon-helpers`\n   - `react-native-svg`\n   - `react-native-webview`\n   - `react-native-safe-area-context`\n\n**Important**: This library does not support EXPO by default. This library is designed and developed without EXPO.  If you are using EXPO you will need to do additioanl items to alter the build and setup to make it work. Please do not open tickets about issues with EXPO, the app is only tested to run with React Native.\n\n## Recommended Settings\n\nFor best experience with navigation we recommend for Android setting `android:windowSoftInputMode=\"adjustPan\"` in your AndroidManifest file. This will prevent the bottom navigation from pushing up. Other known mechanisms exist and you should consider keyboard overlay for developing input areas.\n\n## Usage\n\n### Components\n\n```js\nimport { Button } from '@carbon/react-native';\n\n\u003cButton kind=\"primary\" text=\"My Button\" onPress={() =\u003e {}} /\u003e;\n```\n\n### Colors\n\nYou can use `getColor` to retrieve a color token using the system theme for Carbon colors. You can pass a second param to force a theme (light/dark).\n\n```js\nimport { getColor } from '@carbon/react-native';\n\nconst styles = StyleSheet.create({\n  example: {\n    padding: 16,\n    color: getColor('textPrimary'),\n    backgroundColor: getColor('background'),\n  },\n});\n```\n\nColor scheme will follow the OS. You can request specific colors at any point via second param on get Color. If you wish to use a theme for your app you will need to set the theme globally. This means that any color you use in your own styling will need to be done via a getter (and have this component reload its state). For changing your own colors on the fly you need to ensure getters are used for those styles using color. You can use the `forceTheme` function to change the theme and trigger a state update to change the color.\n\n### Icons\n\nYou can use icons from `@carbon/icons` to pass to components. We do not bundle all icons in this library to reduce size. You can import specific icons from that library directly as needed. An example of how to pass icons to the React Native components is below.\n\n```javascript\nimport AddIcon from '@carbon/icons/es/add/20';\n\n// Using an icon with a component that supports Carbon Icons.\n\u003cButton icon={AddIcon} /\u003e\n\n// Using an icon directly in your own component. You can use our helper.  See `createIcon` params for options.\n\u003cView\u003e{createIcon(icon, 20, 20)}\u003c/View\u003e\n```\n\n### Overriding Themes\n\nYou can override the default Carbon theme (Carbon Colors and IBM Plex) by using the built in theme override calls. These should be done first in your app during a loading state or initial load. If done after app load any component already rendered needs to redraw state.\n\n#### Overriding colors\n\nColors can be overridden by using `overrideLightTheme` or `overrideDarkTheme`. If you wish to use only one theme for your app you can simply `forceTheme` as well to lock the app to a single theme. Colors are written in camelCase and follow the tokens found at [Carbon Design Systems](https://carbondesignsystem.com/guidelines/color/tokens).\n\n#### Overriding fonts\n\nFonts can be overridden on individual components by overriding the styles (`fontFamily`, `fontWeight`). However, you can also override them globally. By calling `overrideFonts` which takes in a family and weight for each of the internal font groups components use. If you use a font be sure to use one that is supported on the OS you are running. Android and iOS have different supported fonts. You can also use custom fonts as long as you bundle them as part of your app.  It is a similar process to how we add Plex above in the \"Getting started\" section.\n\n## Contributing\n\nSee the [contributing guide](/.github/CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## \u003cpicture\u003e\u003csource height=\"20\" width=\"20\" media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg\"\u003e\u003csource height=\"20\" width=\"20\" media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg\"\u003e\u003cimg height=\"20\" width=\"20\" alt=\"IBM Telemetry\" src=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg\"\u003e\u003c/picture\u003e IBM Telemetry\n\nThis package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installing\nthis package as a dependency you are agreeing to telemetry collection. To opt out, see\n[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).\nFor more information on the data being collected, please see the\n[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarbon-design-system%2Fcarbon-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarbon-design-system%2Fcarbon-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarbon-design-system%2Fcarbon-react-native/lists"}