react-native-webview bundled with KaTeX
import { StyleSheet } from 'react-native';
import Katex from 'react-native-katex';
const styles = StyleSheet.create({
katex: {
flex: 1,
}
});
const inlineStyle =`
html, body {
display: flex;
background-color: #fafafa;
justify-content: center;
align-items: center;
height: 100%;
margin: 0;
padding: 0;
}
.katex {
font-size: 4em;
margin: 0;
display: flex;
}
`;
export default function App() {
const [loaded, setLoaded] = useState(false);
const [expression, setExpression] = useState("c=\\pm\\sqrt{a^2 + b^2}");
setTimeout(() => setExpression("d=\\pm\\sqrt{a^2 + b^2}"), 2000);
return (
<Katex
expression={expression}
style={styles.katex}
inlineStyle={inlineStyle}
displayMode={false}
throwOnError={false}
errorColor="#f00"
macros={{}}
colorIsTextColor={false}
onLoad={() => setLoaded(true)}
onError={() => console.error('Error')}
/>
);
}
License The MIT License Copyright (c) 2017-2020 Ivan Zakharchanka