{"id":15150969,"url":"https://github.com/shaman123/react-native-math-view","last_synced_at":"2025-09-29T20:31:20.362Z","repository":{"id":33787911,"uuid":"150891226","full_name":"ShaMan123/react-native-math-view","owner":"ShaMan123","description":"Math view for react native! No WebView!","archived":true,"fork":false,"pushed_at":"2024-09-05T04:45:03.000Z","size":19329,"stargazers_count":82,"open_issues_count":10,"forks_count":25,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-18T13:33:09.087Z","etag":null,"topics":["android","ios","latex","math","math-expressions","mathematical-expressions","mathjax","mathml","mathview","react","react-native","view"],"latest_commit_sha":null,"homepage":"https://github.com/ShaMan123/react-native-math-view","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/ShaMan123.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["ShaMan123"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2018-09-29T18:18:09.000Z","updated_at":"2024-12-27T03:57:16.000Z","dependencies_parsed_at":"2024-06-18T16:56:11.794Z","dependency_job_id":"53ff474b-45f2-4487-b1f8-6c0b506c5066","html_url":"https://github.com/ShaMan123/react-native-math-view","commit_stats":{"total_commits":564,"total_committers":7,"mean_commits":80.57142857142857,"dds":"0.20390070921985815","last_synced_commit":"9a8794b38f086b9fd1715b50c45483e3e024cce6"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShaMan123%2Freact-native-math-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShaMan123%2Freact-native-math-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShaMan123%2Freact-native-math-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShaMan123%2Freact-native-math-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShaMan123","download_url":"https://codeload.github.com/ShaMan123/react-native-math-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234659880,"owners_count":18867631,"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","ios","latex","math","math-expressions","mathematical-expressions","mathjax","mathml","mathview","react","react-native","view"],"created_at":"2024-09-26T15:00:31.157Z","updated_at":"2025-09-29T20:31:14.594Z","avatar_url":"https://github.com/ShaMan123.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ShaMan123"],"categories":[],"sub_categories":[],"readme":"# react-native-math-view (READ ONLY)\n\n[![NPM](https://img.shields.io/npm/v/react-native-math-view.svg)](https://www.npmjs.com/package/react-native-math-view)\n\n**This repo will not receive anymore updates and will be archived.**\n\nRefer to https://github.com/ShaMan123/react-native-math-view/issues/97.\n\n## V3\n\nA react native view used to easily display and handle math. \nThe library doesn't use `WebView`.\n\n| MathView Example | Lists Example | MathText |\n| --- | --- | --- |\n| ![Runner](./docs/math-standalone.gif) | ![Lists Example](./docs/math-lists.gif) | \u003cimg src=\"./docs/math-text.png\" width=\"320px\" alt=\"MathText\" /\u003e |\n\n\n\n## Installation\n\n`npm install --save react-native-math-view` **OR** `yarn add react-native-math-view`\n\n`react-native` \u003e 0.59\n\n#### iOS: \nInstall `react-native-svg`\n\n```bash\n$ cd ios \u0026\u0026 pod install\n```\n\n#### Expo\nExpo doesn't support native modules. \nYou can use this library with `react-native-svg` (performance suffers a bit), see [#19](/../../issues/19#issuecomment-567918194).\n\n\n#### Errors during installation:\n1. Upgrade `typescript`\n1. If you're getting an error regarging `compileMathjax` you can disregard it as long as `compiled mathjax successfully` was printed to the console. If you're using `yarn` it's probable no logging will show.\u003cbr /\u003e\n1. To be sure everything is compiled properly run the following command from the `mathjax-full` `node_module` directory of your project:\n```bash\nnpm run compile\n```\n`typescript` errors can be safely disregareded.\n\u003cbr /\u003esee also [#16](/../../issues/16)\n\n## Getting Started\n\n```tsx\nimport MathView, { MathText } from 'react-native-math-view';\n\n  return (\n    ...\n    \t\u003cMathView\n\t   math={'x=\\\\frac{-b\\\\pm\\\\sqrt{b^2-4ac}}{2a}'}\n\t/\u003e \n\t\u003cMathView\n\t   math='\\cos\\left(x\\right)=\\frac{b}{c}'\n\t/\u003e \n\t\u003cMathView\n\t   math='\\cos\\left(x=\\frac{b}{c}'\n\t   renderError={({ error }) =\u003e \u003cText style={[{ fontWeight: 'bold' }]}\u003e{error}\u003c/Text\u003e}\n\t/\u003e \n\t\u003cMathText\n            value={`This text includes math notations and should be wrapped correctly for \\\\( \\\\alpha \\\\) and $\\\\beta$ within the view. \\nThe following formula shouldn't be inline:$$x_{1,2} = {-b \\\\pm \\\\sqrt{b^2-4ac} \\\\over 2a}$$However the following formula should be inline with the text: \\\\( a^2 + b^2 = c^2 \\\\)`}\n            direction=\"ltr\"\n            CellRendererComponent={\u003cTouchableOpacity /\u003e}\n        /\u003e\n    ...\n  );\n\n\n```\n\n## TroubleShooting\n\n1. Make sure to properly escape all `LaTeX` strings (Syntax sensitive):\n\nThis occurs because when passing `math={value}`, `value` gets evaluated as opposed to `math='LaTeX'`. \n\u003cbr /\u003eIt is cosidered best practice to avoid using `math='LaTeX'`.\n\n```diff\n        \u003cMathView\n-\t   math='x=\\\\frac{-b\\\\pm\\\\sqrt{b^2-4ac}}{2a}'\n+\t   math='x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}'\n\t/\u003e \n\t\n\t//\tOR\n\t\n        \u003cMathView\n-\t   math={'x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}'}\n+\t   math={'x=\\\\frac{-b\\\\pm\\\\sqrt{b^2-4ac}}{2a}'}\n\t/\u003e \n```\n\n2. Try your `LaTeX` in the `MathJax` [sandbox](https://www.mathjax.org/#demo).\n\u003cbr /\u003eYou can run `setMode('SVG')` from dev console in order to render svg.\n\n## Running example app\nFrom the project's directory run:\n```\nyarn --production=false\ncd MathExample\nyarn --production=false\nnpm run android\n```\n\n### [MathJax Supported LaTeX Commands](https://docs.mathjax.org/en/v1.0/tex.html#supported-latex-commands)\n\n\n## Implementation:\n  - [ ] [iOS native MathView](https://github.com/kostub/iosMath) - POC successful, need to implement native measuring. For now fallbacking to `react-native-svg`\n\n  - [x] Android MathView - **native since V2**, based on [Android SVGImageView](https://bigbadaboom.github.io/androidsvg). Need to implement `editable` state.\n  \n## Looking for Web support?\nCheck out [react-math-view](https://github.com/ShaMan123/react-math-view#react-math-view)!\n\n### FollowUp\n\n[iOS editable math view](https://github.com/kostub/MathEditor)\n\n[Native android math view](https://github.com/himamis/ReTeX)\n\n[Web Math Editors](https://github.com/mathjax/MathJax-docs/wiki/List-of-web-based-math-editors) -\u003e [**MathLive**](https://github.com/arnog/mathlive) looks very promising!\n\n[KaTeX](https://github.com/Khan/KaTeX) - Math keypad that works with `\u003cWebView\u003e`. See [this](https://github.com/ShaMan123/math-input)\n\n[React with LaTeX](https://github.com/Pomax/BezierInfo-2) - using server side rendering to speed things up.\n\n[Writing math dynamically](https://github.com/nicolewhite/algebra.js)\n\n[SSR](https://latex.codecogs.com/svg.latex?\\Large\u0026space;x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}):\\\n![\\Large x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}](https://latex.codecogs.com/svg.latex?\\Large\u0026space;x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a})\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaman123%2Freact-native-math-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshaman123%2Freact-native-math-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaman123%2Freact-native-math-view/lists"}