{"id":24953384,"url":"https://github.com/mroads/react-native-fontext","last_synced_at":"2025-04-10T15:37:10.229Z","repository":{"id":46125042,"uuid":"415089944","full_name":"mroads/react-native-fontext","owner":"mroads","description":"📲💬 react-native-fontext is a lightweight library to integrate fonts in your React Native application that works seamlessly in android and iOS devices.","archived":false,"fork":false,"pushed_at":"2021-11-12T10:58:49.000Z","size":5664,"stargazers_count":10,"open_issues_count":0,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-18T13:11:41.167Z","etag":null,"topics":["hacktoberfest","hacktoberfest2020","hacktoberfest2021","react-native","react-native-fontext","react-native-fonts"],"latest_commit_sha":null,"homepage":"","language":"Java","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/mroads.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}},"created_at":"2021-10-08T18:30:29.000Z","updated_at":"2024-10-07T20:45:14.000Z","dependencies_parsed_at":"2022-07-26T10:32:07.327Z","dependency_job_id":null,"html_url":"https://github.com/mroads/react-native-fontext","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mroads%2Freact-native-fontext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mroads%2Freact-native-fontext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mroads%2Freact-native-fontext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mroads%2Freact-native-fontext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mroads","download_url":"https://codeload.github.com/mroads/react-native-fontext/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248243475,"owners_count":21071054,"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":["hacktoberfest","hacktoberfest2020","hacktoberfest2021","react-native","react-native-fontext","react-native-fonts"],"created_at":"2025-02-03T03:35:52.784Z","updated_at":"2025-04-10T15:37:10.196Z","avatar_url":"https://github.com/mroads.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Fontext\n\n**react-native-fontext** is a lightweight library to integrate fonts in your React Native application that works seamlessly in android and iOS devices.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mroads/react-native-fontext/master/assets/images/fontext-font-change.gif\" width=\"260\"\u003e\n\u003c/p\u003e\n\n# Setup\n\n### Installation\n\n`$ npm install react-native-fontext`\n\nor\n\n`$ yarn add react-native-fontext`\n\n## Setup Instructions\n\n1. Download and integrate fonts in your react-native application\n\n   1. Download your preferred font from [Google Fonts](https://fonts.google.com) or any other font provider.\n\n   2. Create a folder `fonts` in the root directory and place your downloaded fonts here. It is not mandatory to keep the `fonts` folder in the root directory but it is advised to keep it there for maintaining simplicity.\n   3. Create a `react-native.config.js` file in the root directory of your project. This file is responsible for locating fonts' path so that react-native knows where to find them. The below code explains the content of the `react-native.config.js` file.\n\n   ```js\n   module.exports = {\n     project: {\n       ios: {},\n       android: {},\n     },\n     assets: ['./fonts'],\n   };\n   ```\n\n   4. In the terminal, write the command `npx react-native link` to link the fonts with your android and ios projects.\n   5. Once linking is done, you can see the integrated fonts in Android (`android/app/src/main/assets/fonts`) and ios (`info.plist`).\n\n2. Rebuild the project in Android and iOS projects and re-run the application.\n\n## Props\n\ninherits [Text Props](https://reactnative.dev/docs/text) from react-native. All the props that are available for React Native Text component are available for font-text Text component.\n\n| Prop        |      Default      |       Type        | Description                                                             |\n| :---------- | :---------------: | :---------------: | :---------------------------------------------------------------------- |\n| computeFont |         -         |    `function`     | Function that calculates font family                                    |\n| component   | React Native Text | `React.Component` | A custom component that can be passed to override the default component |\n\n## Usage\n\n- Install the package `react-native-fontext`\n\n        npm install react-native-fontext\n\n- Import the `Text` component from `react-native-fontext`\n\n        import Text from react-native-fontext\n\n- Use `fontFamily` and `fontWeight` to add fonts to your Text.\n\n```js\ntextStyle: {\n    fontFamily: 'NotoSansMono',\n    fontWeight: '900',\n  },\n```\n\n### Example: Adding font `Noto Sans`\n\n```js\nimport React from 'react';\nimport { StyleSheet, View, Image } from 'react-native';\nimport logo from './assets/images/logo.png';\n\nimport Text from 'react-native-fontext';\n\nconst App = () =\u003e {\n  return (\n    \u003cView\u003e\n      \u003cImage source={logo} /\u003e\n      \u003cText style={styles.text}\u003e\n        react-native-fontext gives you the ability to embed any font into your\n        react native application.\n      \u003c/Text\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  text: {\n    // Add the following lines to add fonts in your Text component\n    fontFamily: 'NotoSansMono',\n    fontWeight: 'bold',\n  },\n\n  // Rest of the styles\n});\n\nexport default App;\n```\n\n### Example: Using a Component prop\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/mroads/react-native-fontext/master/assets/images/fontext-buttonclick.gif\" width=\"260\"\u003e\n\u003c/p\u003e\n\n```js\nimport React, { useState } from 'react';\nimport { StyleSheet, View, Image } from 'react-native';\nimport logo from './assets/images/logo.png';\n\nimport Text from 'react-native-fontext';\nimport { Button, Text as NBText } from 'native-base';\n\nconst COLORS = ['red', 'green', 'blue', 'orange', 'purple'];\n\nconst App = () =\u003e {\n  const [color, setColor] = useState('black');\n\n  const toggleColor = () =\u003e {\n    let randomColor = COLORS[Math.floor(Math.random() * COLORS.length)];\n    setColor(randomColor);\n  };\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cImage source={logo} /\u003e\n      \u003cText style={[styles.text, { color: color }]}\u003e\n        react-native-fontext gives you the ability to embed any font into your\n        react native application.\n      \u003c/Text\u003e\n      \u003cButton\u003e\n        \u003cText\n          onPress={toggleColor}\n          component={NBText}\n          style={styles.buttonText}\n        \u003e\n          Toggle Color\n        \u003c/Text\u003e\n      \u003c/Button\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  text: {\n    // Add the following lines to add fonts in the text project\n    fontFamily: 'NotoSansMono',\n    fontWeight: 'bold',\n    marginBottom: 60,\n  },\n  buttonText: {\n    // Add the following lines to add fonts in the button's Text component\n    fontFamily: 'NotoSansMono',\n    fontWeight: '900',\n  },\n\n  // Rest of the styling\n});\n\nexport default App;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmroads%2Freact-native-fontext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmroads%2Freact-native-fontext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmroads%2Freact-native-fontext/lists"}