1.2.0 • Public • Published


Why this package?

There are a few other packages out there to render math equations in React Native Math. The only reason why I chose to create this package is because I could'nt find any package that supports line break inside the view, most of them reduced the width to an unreadable size when equation is too long or when there is text along with the equation. Also I wanted a way to use Math the same way we use any other components, instead of managing a WebView

PR's and issues are always welcome :)

Warning: This package does not support for iOS as of now

This package currently does not support math for iOS. Feel free to send a pull request. Katex-iOS native package:


$ npm install react-native-math --save


import React from 'react'
import { View } from 'react-native'
import MathText from 'react-native-math';

class MathItem extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, margin: 20 }}>
          value={`Dissolve this $x=\\frac{1+y}{1+2z^2}$ using lorem ipsum dolor sit amet`}
          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}

          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}

          value={`sum of ratios =4+3=7 $=\\frac{4}{7}\\times560=320$`}
          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}

          value={` <p>If <span class="latexEle" data-latex="x:35::48:60">$x:35::48:60$</span><span></p>`}
          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}

Expected Output

Supported Props

Prop Default Type Description
style {} object/array Default react native styles (Pass background color here)
value "" string Katex text (Make sure to escape \ using two \ slashes )
textSize 20 number Font size of the math equation Ex:10
textColor #000000 hex color Pass 6 character hex color value

Manual installation

Only required for React Native versions less than 0.60


  1. Open up android/app/src/main/java/[...]/
  • Add import com.reactlibrary.RNMathPackage; to the imports at the top of the file
  • Add new RNMathPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-math'
    project(':react-native-math').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-math/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile project(':react-native-math')

Known issues

1. The flex requirement

Native UI modules requires to have the style of the native view and all it's parents to have a style flex property of 1 or greater. The workaround is pretty simple, add flex:1 or any other value to flex property to all the parent views of the math component.

2. The scroll issue

When you have set a flex value to the math component and the text you passed to it exceeds the height of your flex size, the content out of margin will be not visible. To go around this issue, add math component inside a ScrollView, which make the math text scrollable within the available flex area.

Package Sidebar


npm i react-native-math

Weekly Downloads






Unpacked Size

73.1 kB

Total Files


Last publish


  • hishamp