MathKeyboard component enhance perf

package.json

@@ -32,7 +32,7 @@
     "jest": "^24.9.0",
     "metro-react-native-babel-preset": "^0.58.0",
     "react-test-renderer": "16.11.0",
-    "typescript": "^3.9.2"
+    "typescript": "^3.9.3"
   },
   "jest": {
     "preset": "react-native"

src/App.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { YellowBox } from 'react-native';
+YellowBox.ignoreWarnings(['Require cycle:'])
 import CommentsPage from './Comments/Comments.page';
 
 export default function App() {

src/common/MathKeyboard.tsx

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import { View, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';
+import React, { Component, useCallback, useMemo } from 'react';
+import { View, TouchableOpacity, ScrollView, StyleSheet, FlatList } from 'react-native';
 // @ts-ignore
 import { KeyboardRegistry } from 'react-native-keyboard-input';
 import { MathWithText } from './MathWithText';
@@ -33,49 +33,35 @@ const NR_SYMBOLS_PER_ROW = 5;
 // console.ignoredYellowBox = ['Warning: Each', 'Warning: Failed'];
 // console.disableYellowBox = true;
 
-class MathKeyboard extends Component<MathKeyboardProps> {
-  onButtonPress = (symbol: string) => {
-    KeyboardRegistry.onItemSelected(this.props.keyboardId, { symbol });
-  };
-
-  renderButton = (symbol: string, key: string) => (
+const MathKeyboard = React.memo((props: any) => {
+  const onButtonPress = useCallback((symbol: string) => {
+    KeyboardRegistry.onItemSelected(props.keyboardId, { symbol });
+  }, [props.keyboardId]);
+  const renderButton = useCallback((symbol: string, key: string) => (
     <View key={key} style={styles.button}>
-      <TouchableOpacity onPress={() => this.onButtonPress(symbol)}>
+      <TouchableOpacity onPress={() => onButtonPress(symbol)}>
         <MathWithText
           config={{ ex: 8, inline: false }}
           mathWithText={'$$' + symbol + '$$'}
           mathBoxStyle={styles.buttonLabel}
         />
       </TouchableOpacity>
     </View>
-  );
-
-  renderRow = (row: string[], rowIndex: number) => (
-    <View key={rowIndex} style={styles.row}>
-      {row.map((symbol, index) => this.renderButton(symbol, `${rowIndex}${index}`))}
-    </View>
-  );
+  ), [onButtonPress]);
+  const renderItem = useCallback(({ item: symbol, index }) => renderButton(symbol, `__button${index}`), [renderButton]);
 
-  render() {
-    const { symbols } = this.props;
-    const rows: string[][] = [[]];
-    let i = 0;
-    let j = 0;
-    while (i < symbols.length) {
-      rows[j].push(symbols[i]);
-      if ((i + 1) % NR_SYMBOLS_PER_ROW === 0) {
-        rows.push([]);
-        j++;
-      }
-      i++;
-    }
-    return (
-      <ScrollView contentContainerStyle={styles.keyboardContainer} keyboardShouldPersistTaps='always'>
-        {rows.map((row, rowIndex) => this.renderRow(row, rowIndex))}
-      </ScrollView>
-    );
-  }
-}
+  const keyExtractor = useCallback((item, index) => `row${index}`, []);
+  return <FlatList
+    data={props.symbols}
+    numColumns={NR_SYMBOLS_PER_ROW}
+    renderItem={renderItem}
+    //contentContainerStyle={styles.keyboardContainer}
+    keyboardShouldPersistTaps='always'
+    keyExtractor={keyExtractor}
+    maxToRenderPerBatch={NR_SYMBOLS_PER_ROW}
+    initialNumToRender={NR_SYMBOLS_PER_ROW}
+  />
+})
 
 const styles = StyleSheet.create({
   keyboardContainer: {

src/common/MathWithText.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, useMemo, useCallback } from 'react';
 import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
 import MathView from 'react-native-math-view';
 
@@ -12,33 +12,37 @@ interface MathWithTextProps {
   };
 }
 
-class MathWithText extends Component<MathWithTextProps> {
-  static defaultProps = {
-    config: {
-      ex: 8,
-      inline: true,
-    },
-  };
+const MathWithText = React.memo((props: any) => {
+  const renderer = useCallback((str: string, index: number) => {
+    if (index % 2 === 0) {
+      return (
+        <Text key={index} style={[styles.text, props.textStyle]}>
+          {str}
+        </Text>
+      );
+    } else {
+      return <MathView key={str} config={props.config} resizeMode='contain' math={str} />;
+    }
+  }, [props.config, props.textStyle]);
+  const tree = useMemo(() => {
+    const res = props.mathWithText.split(/\$\$/g);
+    return res.map(renderer);
+  }, [props.mathWithText]);
 
-  render() {
-    const res = this.props.mathWithText.split(/\$\$/g);
-    return (
-      <View style={[styles.mathBox, this.props.mathBoxStyle]}>
-        {res.map((str, index) => {
-          if (index % 2 === 0) {
-            return (
-              <Text key={index} style={[styles.text, this.props.textStyle]}>
-                {str}
-              </Text>
-            );
-          } else {
-            return <MathView key={index} config={this.props.config} resizeMode='contain' math={str} />;
-          }
-        })}
-      </View>
-    );
-  }
-}
+  return (
+    <View style={[styles.mathBox, props.mathBoxStyle]}>
+      {tree}
+    </View>
+  );
+
+});
+
+MathWithText.defaultProps = {
+  config: {
+    ex: 8,
+    inline: true,
+  },
+};
 
 export { MathWithText };
 

src/constants/mathSymbols.ts

@@ -1,3 +1,6 @@
+import MathView, { MathjaxFactory } from 'react-native-math-view';
+
+
 export const basicMath = [
   '\\pm',
   '\\infty',
@@ -936,3 +939,11 @@ export const commonMath = [
   '\\left(\\begin{matrix}{1}&\\cdots&{2}\\\\\\vdots&\\ddots&\\vdots\\\\{3}&\\cdots&{4}\\\\\\end{matrix}\\right)',
   '\\left[\\begin{matrix}{1}&\\cdots&{2}\\\\\\vdots&\\ddots&\\vdots\\\\{3}&\\cdots&{4}\\\\\\end{matrix}\\right]',
 ];
+
+MathjaxFactory().preload([
+  ...basicMath,
+  ...lowercase,
+  ...uppercase,
+  ...basicNaryOperators,
+  ...commonMath.slice(0, 20)
+]);