https://github.com/shaman123/react-native-math-view

Math view for react native! No WebView!
https://github.com/shaman123/react-native-math-view

android ios latex math math-expressions mathematical-expressions mathjax mathml mathview react react-native view

Last synced: about 2 months ago
JSON representation

Math view for react native! No WebView!

• Host: GitHub
• URL: https://github.com/shaman123/react-native-math-view
• Owner: ShaMan123
• License: mit
• Archived: true
• Created: 2018-09-29T18:18:09.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-09-05T04:45:03.000Z (2 months ago)
• Last Synced: 2024-09-26T15:00:13.920Z (about 2 months ago)
• Topics: android, ios, latex, math, math-expressions, mathematical-expressions, mathjax, mathml, mathview, react, react-native, view
• Language: TypeScript
• Homepage: https://github.com/ShaMan123/react-native-math-view
• Size: 18.4 MB
• Stars: 78
• Watchers: 5
• Forks: 24
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-math-view (READ ONLY)

[![NPM](https://img.shields.io/npm/v/react-native-math-view.svg)](https://www.npmjs.com/package/react-native-math-view)

**This repo will not receive anymore updates and will be archived.**

Refer to https://github.com/ShaMan123/react-native-math-view/issues/97.

## V3

A react native view used to easily display and handle math. 

The library doesn't use `WebView`.

| MathView Example | Lists Example | MathText |

| --- | --- | --- |

| ![Runner](./docs/math-standalone.gif) | ![Lists Example](./docs/math-lists.gif) |  |

## Installation

`npm install --save react-native-math-view` **OR** `yarn add react-native-math-view`

`react-native` > 0.59

#### iOS: 

Install `react-native-svg`

```bash

$ cd ios && pod install

```

#### Expo

Expo doesn't support native modules. 

You can use this library with `react-native-svg` (performance suffers a bit), see [#19](/../../issues/19#issuecomment-567918194).

#### Errors during installation:

1. Upgrade `typescript`

1. 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.


1. To be sure everything is compiled properly run the following command from the `mathjax-full` `node_module` directory of your project:

```bash

npm run compile

```

`typescript` errors can be safely disregareded.


see also [#16](/../../issues/16)

## Getting Started

```tsx

import MathView, { MathText } from 'react-native-math-view';

  return (

    ...

    	 

	 

	 {error}}

	/> 

	}

        />

    ...

  );

```

## TroubleShooting

1. Make sure to properly escape all `LaTeX` strings (Syntax sensitive):

This occurs because when passing `math={value}`, `value` gets evaluated as opposed to `math='LaTeX'`. 


It is cosidered best practice to avoid using `math='LaTeX'`.

```diff

         

	

	//	OR

	

         

```

2. Try your `LaTeX` in the `MathJax` [sandbox](https://www.mathjax.org/#demo).


You can run `setMode('SVG')` from dev console in order to render svg.

## Running example app

From the project's directory run:

```

yarn --production=false

cd MathExample

yarn --production=false

npm run android

```

### [MathJax Supported LaTeX Commands](https://docs.mathjax.org/en/v1.0/tex.html#supported-latex-commands)

## Implementation:

  - [ ] [iOS native MathView](https://github.com/kostub/iosMath) - POC successful, need to implement native measuring. For now fallbacking to `react-native-svg`

  - [x] Android MathView - **native since V2**, based on [Android SVGImageView](https://bigbadaboom.github.io/androidsvg). Need to implement `editable` state.

  

## Looking for Web support?

Check out [react-math-view](https://github.com/ShaMan123/react-math-view#react-math-view)!

### FollowUp

[iOS editable math view](https://github.com/kostub/MathEditor)

[Native android math view](https://github.com/himamis/ReTeX)

[Web Math Editors](https://github.com/mathjax/MathJax-docs/wiki/List-of-web-based-math-editors) -> [**MathLive**](https://github.com/arnog/mathlive) looks very promising!

[KaTeX](https://github.com/Khan/KaTeX) - Math keypad that works with ``. See [this](https://github.com/ShaMan123/math-input)

[React with LaTeX](https://github.com/Pomax/BezierInfo-2) - using server side rendering to speed things up.

[Writing math dynamically](https://github.com/nicolewhite/algebra.js)

[SSR](https://latex.codecogs.com/svg.latex?\Large&space;x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}):\

![\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}](https://latex.codecogs.com/svg.latex?\Large&space;x=\frac{-b\pm\sqrt{b^2-4ac}}{2a})