react-native-katext v0.4.6

React Native

react-native-webview bundled with KaTeX

Example

Usage

import { StyleSheet } from 'react-native';
import Katex from 'react-native-katext';

const styles = StyleSheet.create({
  katex: {
    flex: 0,
    overflow: 'visible',
  },
  katexContainer: {
    flex: 0,
    overflow: 'visible',
  },
});

const inlineStyle = `
html, body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
}
.katex {
  font-size: 24px;
  margin: 0;
  padding: 8px;
  display: flex;
  overflow: auto;
}
`;

export default function App() {
  const [loaded, setLoaded] = useState(false);
  const [expression, setExpression] = useState('c=\\pm\\sqrt{a^2 + b^2}');

  return (
    <Katex
      expression={message}
      style={styles.katex}
      containerStyle={styles.katexContainer}
      inlineStyle={inlineStyle}
      displayMode={false}
      throwOnError={false}
      errorColor="#f00"
      macros={{}}
      colorIsTextColor={false}
      onLoad={() => console.log('loaded')}
      onError={() => console.error('Error')}
    />
  );
}

License

License The MIT License Copyright (c) 2017-2020 Ivan Zakharchanka