fix: flipper error #9850

packages/flipper-plugin-react-navigation/README.md

@@ -3,3 +3,16 @@
 Flipper plugin with developer tools for React Navigation.
 
 Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/devtools).
+
+
+## Development
+
+Edit `~/.flipper/config.json` (while flipper is not opened)
+
+```json
+{
+  "pluginPaths": ["/path/to/react-navigation/packages"]
+}
+```
+
+and run `yarn watch` in `flipper-plugin-react-navigation`

packages/flipper-plugin-react-navigation/package.json

@@ -38,9 +38,9 @@
     "@types/react": "^17.0.9",
     "@types/react-dom": "^17.0.6",
     "antd": "^4.16.1",
-    "flipper": "^0.92.0",
-    "flipper-pkg": "^0.92.0",
-    "flipper-plugin": "^0.92.0",
+    "flipper": "^0.112.0",
+    "flipper-pkg": "^0.112.0",
+    "flipper-plugin": "^0.112.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }

packages/flipper-plugin-react-navigation/src/Logs.tsx

@@ -1,6 +1,5 @@
 import { CompassOutlined } from '@ant-design/icons';
-import { DetailSidebar, styled, VirtualList } from 'flipper';
-import { theme } from 'flipper-plugin';
+import { DataList, DetailSidebar, styled, theme } from 'flipper-plugin';
 import * as React from 'react';
 
 import { Sidebar } from './Sidebar';
@@ -19,10 +18,10 @@ export function Logs({ active, logs, index, resetTo }: Props) {
 
   return logs.length ? (
     <>
-      <VirtualList
-        data={logs}
-        rowHeight={51}
-        renderRow={({ id, action }, i) => (
+      <DataList
+        style={{ height: '100%' }}
+        items={logs}
+        onRenderItem={({ id, action }, _, i) => (
           <Row
             key={id}
             selected={selectedItem?.id === id}
@@ -79,8 +78,6 @@ const Row = styled.button<{ selected: boolean; faded: boolean }>((props) => ({
   'border': 0,
   'boxShadow': `inset 0 -1px 0 0 ${theme.dividerColor}`,
   'width': '100%',
-  'cursor': 'pointer',
-
   '&:hover': {
     backgroundColor: props.selected
       ? theme.primaryColor