Using React.memo to improve render performance of KanjiListCell

.vs/VSWorkspaceState.json

@@ -1,6 +1,7 @@
 {
   "ExpandedNodes": [
     "",
+    "\\assets",
     "\\components",
     "\\model",
     "\\navigation",
@@ -10,6 +11,6 @@
     "\\redux\\reducers",
     "\\redux\\thunks"
   ],
-  "SelectedNode": "\\components\\KanjiCard.tsx",
+  "SelectedNode": "\\components\\DrawingCanva.tsx",
   "PreviewInSolutionExplorer": false
 }

components/DrawingCanva.tsx

@@ -120,7 +120,12 @@ const style_light = StyleSheet.create({
     slider: {
         width: "75%",
         alignSelf: "center",
-    }
+    },
+    visibility: {
+    position: "absolute",
+    right: 50,
+    top: -25
+}
 });
 
 const style_dark = StyleSheet.create({

components/KanjiCard.tsx

@@ -74,7 +74,9 @@ const KanjiCard = (props: KanjiProps) => {
             <ScrollView contentContainerStyle={kanjiCardStyle.container}
                 showsVerticalScrollIndicator={false}>
 
-            <Text style={kanjiCardStyle.text}>{kanji?.onyomi}</Text>
+                <Text style={kanjiCardStyle.text}>{kanji?.onyomi}</Text>
+                <Text style={kanjiCardStyle.text}>{kanji?.kunyomi}</Text>
+
                 <SvgXml
                     xml={imgXml
                         .replace(/fill="#[0-9a-f]{6}"/g, `fill=${kanjiCardStyle.svg.color}`)}

components/KanjiList.tsx

@@ -43,6 +43,7 @@ const KanjiList = () => {
             {selectedItems.length ?
             (<SectionList
                 sections={selectedItems}
+                windowSize={100}
                 renderItem={
                     ({ item }) => <KanjiListCell kanji={item} />
                 }

components/KanjiListCell.tsx

@@ -7,7 +7,7 @@ interface kanjiListCellProps {
     kanji: Kanji;
 }
 
-const KanjiListCell = (props: kanjiListCellProps) => {
+const KanjiListCell = React.memo((props: kanjiListCellProps) => {
 
     const cellStyle = useColorScheme() == 'light' ? cellStyle_light : cellStyle_dark;
 
@@ -19,7 +19,7 @@ const KanjiListCell = (props: kanjiListCellProps) => {
             <Text style={cellStyle.text}>{props.kanji.meaning}</Text>
         </TouchableOpacity>
     );
-};
+});
 
 const cellStyle_light = StyleSheet.create({
     item: {

navigation/TabBar.tsx

@@ -118,6 +118,10 @@ const TabBar = () => {
     );
 }
 
+
+
+
+
 const tabOptions: BottomTabNavigationOptions = {
     tabBarShowLabel: false,
     headerShown: false,