Fix Flipper disconnect error

.gitignore

@@ -2,5 +2,8 @@ Packages/
 
 .DS_Store
 
+*.rbxl
+*.lock
+
 sourcemap.json
 globalTypes.d.lua

README.md

@@ -40,44 +40,67 @@ Virtualized lists aren't appropriate for all situations. Here's some caveats:
 ## Example
 
 ```lua
-local React = require(...)
-local VirtualizedList = require(...)
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local HttpService = game:GetService("HttpService")
+local Players = game:GetService("Players")
+
+local Packages = ReplicatedStorage.Packages
+
+local React = require(Packages.React)
+local ReactRoblox = require(Packages.ReactRoblox)
+local VirtualizedList = require(Packages.VirtualizedList)
 
 local View = VirtualizedList.View
-local FlatList = VirtualizedList.FlatView
+local FlatList = VirtualizedList.FlatList
 
 local e = React.createElement
 
-local DATA = {
-  {
-    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-    title: 'First Item',
-  },
-  {
-    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-    title: 'Second Item',
-  },
-  {
-    id: '58694a0f-3da1-471f-bd96-145571e29d72',
-    title: 'Third Item',
-  },
-}
+local ITEM_COUNT = 10_000
+local DATA = table.create(ITEM_COUNT)
+
+for i = 1, ITEM_COUNT do
+  DATA[i] = {
+    id = HttpService:GenerateGUID(false),
+    title = `Item {i}`,
+  }
+end
 
 local function Item(props)
-    return e(View, {}, {
-        e("TextLabel", {
-            Size = UDim2.new(1, 0, 0, 40),
-            Text = props.title,
-        })
-    })
+  return e(View, {}, {
+    ItemText = e("TextLabel", {
+      Size = UDim2.new(1, 0, 0, 40),
+      Text = props.title,
+    }),
+  })
 end
 
 local function App()
-    return e(FlatList, {
+  return e("ScreenGui", {
+    ResetOnSpawn = false,
+    ZIndexBehavior = Enum.ZIndexBehavior.Sibling,
+  }, {
+      Background = e("Frame", {
+      AnchorPoint = Vector2.new(0.5, 0.5),
+      Position = UDim2.fromScale(0.5, 0.5),
+      Size = UDim2.fromScale(0.25, 0.4),
+    }, {
+      List = e(FlatList, {
         data = DATA,
-        renderItem = Item,
-    })
+        renderItem = function(entry)
+          return e(Item, {
+            title = entry.item.title,
+          })
+        end,
+        keyExtractor = function(entry)
+          return entry.id
+        end,
+      }),
+    }),
+  })
 end
+
+local root = ReactRoblox.createRoot(Instance.new("Folder"))
+root:render(ReactRoblox.createPortal(e(App), Players.LocalPlayer.PlayerGui))
 ```
 
 ## Documentation

dev.project.json

@@ -1,25 +1,30 @@
 {
     "name": "virtualized-list-lua",
     "tree": {
-        "$className": "Folder",
-        "VirtualizedList": {
-            "$path": "src/"
-        },
-
-        "_Index": {
-            "$path": "Packages/_Index"
-        },
-        "LuauPolyfill": {
-            "$path": "Packages/LuauPolyfill.lua"
-        },
-        "Flipper": {
-            "$path": "Packages/Flipper.lua"
-        },
-        "Promise": {
-            "$path": "Packages/Promise.lua"
-        },
-        "React": {
-            "$path": "Packages/React.lua"
+        "$className": "DataModel",
+        "ReplicatedStorage": {
+            "$className": "Folder",
+            "Packages": {
+                "$className": "Folder",
+                "VirtualizedList": {
+                    "$path": "src/"
+                },
+                "_Index": {
+                    "$path": "Packages/_Index"
+                },
+                "LuauPolyfill": {
+                    "$path": "Packages/LuauPolyfill.lua"
+                },
+                "Flipper": {
+                    "$path": "Packages/Flipper.lua"
+                },
+                "Promise": {
+                    "$path": "Packages/Promise.lua"
+                },
+                "React": {
+                    "$path": "Packages/React.lua"
+                }
+            }
         }
     }
-}
+}

src/Components/ScrollView/ScrollViewNativeComponent.luau

@@ -44,7 +44,7 @@ function ScrollViewNativeComponent:init(props)
 		y = 0,
 	})
 
-	self.motorStepDisconnect = self.motor:onStep(function(canvasPosition)
+	self.motorStepConnection = self.motor:onStep(function(canvasPosition)
 		self._nativeRef.current.CanvasPosition = Vector2.new(canvasPosition.x, canvasPosition.y)
 	end)
 
@@ -182,8 +182,8 @@ function ScrollViewNativeComponent:willUnmount()
 		self.motor:destroy()
 	end
 
-	if self.motorStepDisconnect ~= nil then
-		self.motorStepDisconnect()
+	if self.motorStepConnection ~= nil then
+		self.motorStepConnection:disconnect()
 	end
 end