From fdac64d93fcf39d92fb43d902e4f5f4b02ceabe7 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Sun, 24 May 2020 19:09:59 +0300 Subject: [PATCH 1/8] refactor MathKeyboard component --- src/common/MathKeyboard.tsx | 56 ++++++++++++++++++++----------------- 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/src/common/MathKeyboard.tsx b/src/common/MathKeyboard.tsx index 642cc1b..4be1403 100644 --- a/src/common/MathKeyboard.tsx +++ b/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,14 +33,13 @@ const NR_SYMBOLS_PER_ROW = 5; // console.ignoredYellowBox = ['Warning: Each', 'Warning: Failed']; // console.disableYellowBox = true; -class MathKeyboard extends Component { - 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) => ( - this.onButtonPress(symbol)}> + onButtonPress(symbol)}> { /> - ); - - renderRow = (row: string[], rowIndex: number) => ( - - {row.map((symbol, index) => this.renderButton(symbol, `${rowIndex}${index}`))} - - ); - - render() { - const { symbols } = this.props; + ), [onButtonPress]); + const renderRow = useCallback(({ item: row, index: rowIndex }: { item: string[], index: number }) => { + return ( + + {row.map((symbol, index) => renderButton(symbol, `__button${rowIndex}${index}`))} + + ) + }, [renderButton]); + const rows = useMemo(() => { + const { symbols } = props; const rows: string[][] = [[]]; let i = 0; let j = 0; @@ -69,13 +68,18 @@ class MathKeyboard extends Component { } i++; } - return ( - - {rows.map((row, rowIndex) => this.renderRow(row, rowIndex))} - - ); - } -} + return rows; + }, [props.symbols]); + const keyExtractor = useCallback((item, index) => `row${index}`, []); + return +}) const styles = StyleSheet.create({ keyboardContainer: { From 3fba30a34fc49f4ea3ef66f4f20ce735128872e6 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Sun, 24 May 2020 19:10:02 +0300 Subject: [PATCH 2/8] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a40294c..dc65618 100644 --- a/package.json +++ b/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" From 66d5dca3c92f22a007c580590412b7d722f9b6c3 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Sun, 24 May 2020 19:31:17 +0300 Subject: [PATCH 3/8] Update MathWithText.tsx --- src/common/MathWithText.tsx | 58 ++++++++++++++++++++----------------- 1 file changed, 31 insertions(+), 27 deletions(-) diff --git a/src/common/MathWithText.tsx b/src/common/MathWithText.tsx index abf7299..0f6b4ed 100644 --- a/src/common/MathWithText.tsx +++ b/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 { - 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 ( + + {str} + + ); + } else { + return ; + } + }, [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 ( - - {res.map((str, index) => { - if (index % 2 === 0) { - return ( - - {str} - - ); - } else { - return ; - } - })} - - ); - } -} + return ( + + {tree} + + ); + +}); + +MathWithText.defaultProps = { + config: { + ex: 8, + inline: true, + }, +}; export { MathWithText }; From e02f3f9ec6d875451e905d1690b650fa2949861e Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Sun, 24 May 2020 19:44:28 +0300 Subject: [PATCH 4/8] ignore warnings --- src/App.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.tsx b/src/App.tsx index e3493ef..396680b 100644 --- a/src/App.tsx +++ b/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() { From 9beb12f2f9d2bdf1a8eafff4d7fd4e8012c8cc4c Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Sun, 24 May 2020 19:44:33 +0300 Subject: [PATCH 5/8] Update MathKeyboard.tsx --- src/common/MathKeyboard.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/common/MathKeyboard.tsx b/src/common/MathKeyboard.tsx index 4be1403..7decf33 100644 --- a/src/common/MathKeyboard.tsx +++ b/src/common/MathKeyboard.tsx @@ -78,6 +78,7 @@ const MathKeyboard = React.memo((props: any) => { keyboardShouldPersistTaps='always' keyExtractor={keyExtractor} maxToRenderPerBatch={10} + initialNumToRender={20} /> }) From 194e107d1f42708cf08357000511a3c2a5d28db5 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Sun, 24 May 2020 19:46:10 +0300 Subject: [PATCH 6/8] try preload use with caustion because this jams the ui, though theoretically it shouldn't --- src/constants/mathSymbols.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/constants/mathSymbols.ts b/src/constants/mathSymbols.ts index 00b63d5..653107b 100644 --- a/src/constants/mathSymbols.ts +++ b/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 +]); \ No newline at end of file From 6d5f720ce692fc9f1d7ac7a8b0f56fa2ec8f0b86 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Sun, 24 May 2020 19:48:26 +0300 Subject: [PATCH 7/8] Update mathSymbols.ts --- src/constants/mathSymbols.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/constants/mathSymbols.ts b/src/constants/mathSymbols.ts index 653107b..dbea109 100644 --- a/src/constants/mathSymbols.ts +++ b/src/constants/mathSymbols.ts @@ -945,5 +945,5 @@ MathjaxFactory().preload([ ...lowercase, ...uppercase, ...basicNaryOperators, - ///...commonMath + ...commonMath.slice(0, 20) ]); \ No newline at end of file From 023ef44f4ddfaea59d33b2fca5c4ae3767f40064 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Sun, 24 May 2020 20:14:21 +0300 Subject: [PATCH 8/8] refactor to flatlist with columns drop while loop enhanced perf significantly --- src/common/MathKeyboard.tsx | 33 +++++++-------------------------- 1 file changed, 7 insertions(+), 26 deletions(-) diff --git a/src/common/MathKeyboard.tsx b/src/common/MathKeyboard.tsx index 7decf33..f972fd2 100644 --- a/src/common/MathKeyboard.tsx +++ b/src/common/MathKeyboard.tsx @@ -48,37 +48,18 @@ const MathKeyboard = React.memo((props: any) => { ), [onButtonPress]); - const renderRow = useCallback(({ item: row, index: rowIndex }: { item: string[], index: number }) => { - return ( - - {row.map((symbol, index) => renderButton(symbol, `__button${rowIndex}${index}`))} - - ) - }, [renderButton]); - const rows = useMemo(() => { - const { symbols } = 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 rows; - }, [props.symbols]); + const renderItem = useCallback(({ item: symbol, index }) => renderButton(symbol, `__button${index}`), [renderButton]); + const keyExtractor = useCallback((item, index) => `row${index}`, []); return })