{"id":25899051,"url":"https://github.com/armster15/expo-xml-font","last_synced_at":"2025-03-03T01:19:53.293Z","repository":{"id":65593725,"uuid":"594589425","full_name":"Armster15/expo-xml-font","owner":"Armster15","description":"Use Android XML Fonts easily with this Expo plugin","archived":false,"fork":false,"pushed_at":"2024-04-20T09:08:17.000Z","size":374,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T05:39:54.607Z","etag":null,"topics":["android","expo","font","fonts","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/expo-xml-font","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/Armster15.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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}},"created_at":"2023-01-29T02:14:56.000Z","updated_at":"2025-01-20T13:19:04.000Z","dependencies_parsed_at":"2024-01-15T17:39:32.559Z","dependency_job_id":"76e005bc-f0fe-4ea4-9e78-132a2f963b0a","html_url":"https://github.com/Armster15/expo-xml-font","commit_stats":{"total_commits":14,"total_committers":2,"mean_commits":7.0,"dds":0.2857142857142857,"last_synced_commit":"15d0a6e4fb9a214f8ab6e245fefdc3a44f33c8a0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Armster15%2Fexpo-xml-font","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Armster15%2Fexpo-xml-font/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Armster15%2Fexpo-xml-font/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Armster15%2Fexpo-xml-font/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Armster15","download_url":"https://codeload.github.com/Armster15/expo-xml-font/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241592619,"owners_count":19987396,"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":["android","expo","font","fonts","react-native"],"created_at":"2025-03-03T01:19:52.377Z","updated_at":"2025-03-03T01:19:53.280Z","avatar_url":"https://github.com/Armster15.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# expo-xml-font\n\nUse Android XML Fonts easily with this Expo plugin.\n\nThis plugin builds off an awesome guide available at https://github.com/jsamr/react-native-font-demo on how to use XML Fonts in React Native but provides an easy to use API so you don't have to manually fiddle with the native files.\n\n## Installation\n\n\u003e [!NOTE]  \n\u003e v3 is for Expo 50\u003c= while v2 is for Expo 49\u003e=\n\n1. Install the plugin\n\n```bash\n# using yarn\nyarn add expo-xml-font\n\n# using npm\nnpm install expo-xml-font\n```\n\n2. Add the plugin to the `plugins` section of your `app.json` or `app.config.js` file:\n\n```json\n{\n  \"plugins\": [\"expo-xml-font\"]\n}\n```\n\n## Usage\n\nThis example will use Inter as an example, but you can use any font you like.\n\n1. Get your font and all of its variants\n\n```\nInter-Thin.ttf (100)\nInter-ExtraLight.ttf (200)\nInter-Light.ttf (300)\nInter-Regular.ttf (400)\nInter-Medium.ttf (500)\nInter-Semibold.ttf (600)\nInter-Bold.ttf (700)\nInter-Extrabold.ttf (800)\nInter-Black.ttf (900)\n```\n\n2. Change all the dashes (\"-\"s) to underscores (\"\\_\") and all the uppercase letters to lowercase letters. This is required to be compatible with Android's asset names restrictions\n\n```\ninter_thin.ttf (100)\ninter_extraLight.ttf (200)\ninter_light.ttf (300)\ninter_regular.ttf (400)\ninter_medium.ttf (500)\ninter_semibold.ttf (600)\ninter_bold.ttf (700)\ninter_extrabold.ttf (800)\ninter_black.ttf (900)\n```\n\n3. Copy these files to a folder where your project is. You could put the font files in an `assets/fonts` folder for example.\n\n4. Configure `expo-xml-font` in your `app.json` or `app.config.js`:\n\n```json\n{\n  \"plugins\": [\n    [\n      \"expo-xml-font\",\n      [\n        {\n          \"name\": \"Inter\",\n          \"folder\": \"assets/fonts\",\n          \"variants\": [\n            { \"fontFile\": \"inter_thin\", \"fontWeight\": 100 },\n            { \"fontFile\": \"inter_extralight\", \"fontWeight\": 200 },\n            { \"fontFile\": \"inter_light\", \"fontWeight\": 300 },\n            { \"fontFile\": \"inter_regular\", \"fontWeight\": 400 },\n            { \"fontFile\": \"inter_medium\", \"fontWeight\": 500 },\n            { \"fontFile\": \"inter_semibold\", \"fontWeight\": 600 },\n            { \"fontFile\": \"inter_bold\", \"fontWeight\": 700 },\n            { \"fontFile\": \"inter_extrabold\", \"fontWeight\": 800 },\n            { \"fontFile\": \"inter_black\", \"fontWeight\": 900 }\n          ]\n        }\n      ]\n    ]\n  ]\n}\n```\n\n5. Run `expo prebuild` to generate the XML fonts. You can now use them in your code!\n\n## Configuration\n\nWhen using `expo-xml-font`, you need to pass in an object providing all the details of the font.\n\n```ts\ntype Options = {\n  /**\n   * Name of font\n   * @example \"Inter\"\n   */\n  name: string;\n  /**\n   * Path of folder which contains font files. It's alright if the path is relative.\n   * @example \"assets/fonts\"\n   */\n  folder: string;\n  variants: {\n    /**\n     * Font file for font. Do NOT include the extension.\n     * @example \"inter_regular.ttf\" -\u003e \"inter_regular\"\n     */\n    fontFile: string;\n    /** The font weight of the provided font file */\n    fontWeight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;\n    /**\n     * Specifies whether or not the font file is italic\n     * @default false\n     */\n    italic?: boolean;\n  }[];\n}[];\n```\n\nSince this plugin takes in an array of fonts, you can specify as many font families as you want to.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farmster15%2Fexpo-xml-font","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farmster15%2Fexpo-xml-font","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farmster15%2Fexpo-xml-font/lists"}