React Native Upgrade 0.68 (#403)

* chore: rn upgrade

* fix: use virtualisedlist

* build: bump node circleci

Author: fjmorant

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:12.22.0
+      - image: circleci/node:14.18.2
     working_directory: /home/circleci/rosetta
     steps:
       - checkout

package.json

@@ -24,8 +24,8 @@
     "object-hash": "3.0.0"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
+    "react": "17.0.2",
+    "react-native": "0.68.1"
   },
   "devDependencies": {
     "@babel/core": "7.17.5",
@@ -54,7 +54,7 @@
     "prettier": "2.6.0",
     "prettier-eslint": "13.0.0",
     "react": "17.0.2",
-    "react-native": "0.67.3",
+    "react-native": "0.68.1",
     "react-test-renderer": "17.0.2",
     "typescript": "4.4.4"
   },

src/node-view/node-view.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react';
-import { FlatList, Pressable } from 'react-native';
+import { Pressable, VirtualizedList } from 'react-native';
 import { useNodesContext } from '../nodes-context-provider';
 import { INode } from './types';
 
@@ -31,7 +31,6 @@ const NodeView: React.FC<IProps> = React.memo(
     initialNumToRender,
   }) => {
     const { openedNodes, setOpenNode } = useNodesContext();
-
     const [_node, setNode]: [INode, any] = useState({
       ...node,
       opened:
@@ -85,6 +84,10 @@ const NodeView: React.FC<IProps> = React.memo(
       [renderChildren, level],
     );
 
+    const getItem = useCallback((data, index) => data && data[index], []);
+
+    const getItemCount = useCallback((data) => data?.length ?? 0, []);
+
     const keyExtractor = useCallback((item: INode) => item._internalId, []);
 
     const nodeChildrenName = getChildrenName(_node);
@@ -101,8 +104,10 @@ const NodeView: React.FC<IProps> = React.memo(
           </Pressable>
         ) : null}
         {isNodeOpened && nodeChildren ? (
-          <FlatList
+          <VirtualizedList
             data={nodeChildren}
+            getItemCount={getItemCount}
+            getItem={getItem}
             renderItem={renderItem}
             extraData={extraData}
             keyExtractor={keyExtractor}