feat(react-native-ui-lite): virtualize tree with LegendList for performance

.gitignore

@@ -37,3 +37,4 @@ built-storybooks
 .eslintcache
 examples/expo-example/.maestro/diffs
 examples/expo-example/.maestro/screenshots
+examples/expo-example/components/PerfTesting/*.stories.tsx

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+  "configurations": [
+    {
+      "name": "Radon IDE panel",
+      "type": "radon-ide",
+      "request": "launch",
+      "appRoot": "./examples/expo-example",
+      "env": {
+        "EXPO_PUBLIC_STORYBOOK_ENABLED": "true",
+        "EXPO_PUBLIC_LITE_UI": "true"
+      },
+      "ios": {},
+      "android": {},
+      "usePrebuild": false
+    }
+  ]
+}

CLAUDE.md

@@ -2,6 +2,8 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
+Always check first if the react-native-best-practices skill can be used
+
 ## Development Commands
 
 ```bash
@@ -15,9 +17,12 @@ yarn example    # Run the expo example app with Storybook
 
 # Testing
 yarn test       # Run unit tests across all packages
+yarn test:ci    # Run tests in CI mode
 
 # Code Quality
 yarn lint       # Run ESLint across the codebase
+yarn format:check   # Check Prettier formatting
+yarn format:fix     # Auto-fix Prettier formatting
 
 # Documentation (from docs/ directory)
 cd docs
@@ -63,7 +68,14 @@ The `withStorybook` Metro wrapper:
 - Enables `unstable_allowRequireContext` for dynamic story imports
 - Automatically generates `storybook.requires.ts` file
 - Optional WebSocket server for remote control
-- Can be conditionally enabled/disabled via options
+- Can be conditionally enabled/disabled via `enabled` option
+- Supports `liteMode` for reduced bundle size
+
+### Testing
+
+- Uses **jest** with `jest-expo` preset
+- `universal-test-renderer` for portable story testing
+- Story generation tested with Node's native test runner
 
 ### Key Concepts
 
@@ -72,3 +84,4 @@ The `withStorybook` Metro wrapper:
 3. **Story requires generation** - Automatic generation of story imports via Metro
 4. **Portable stories** - Reuse stories in unit tests
 5. **WebSocket support** - Remote control stories from external devices
+6. **Lite mode** - Alternative UI without heavy dependencies (reanimated, etc.)

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "10.2.1",
+  "version": "10.2.2-alpha.2",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",

examples/expo-example/components/LoginDocsExample/LoginForm/LoginForm.stories.tsx

@@ -6,6 +6,11 @@ const meta = {
   component: LoginForm,
   args: {
     onSubmit: fn(),
+    emailLabel: 'Email Address',
+    emailPlaceholder: 'Enter your email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter your password',
+    submitButtonTitle: 'Sign In',
   },
 } satisfies Meta<typeof LoginForm>;
 

examples/expo-example/components/LoginDocsExample/LoginForm/LoginForm.tsx

@@ -8,13 +8,23 @@ export interface LoginFormProps {
   loading?: boolean;
   emailError?: string;
   passwordError?: string;
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  passwordLabel?: string;
+  passwordPlaceholder?: string;
+  submitButtonTitle?: string;
 }
 
 export const LoginForm: React.FC<LoginFormProps> = ({
   onSubmit,
   loading = false,
   emailError,
   passwordError,
+  emailLabel = 'Email Address',
+  emailPlaceholder = 'Enter your email',
+  passwordLabel = 'Password',
+  passwordPlaceholder = 'Enter your password',
+  submitButtonTitle = 'Sign In',
 }) => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -26,22 +36,22 @@ export const LoginForm: React.FC<LoginFormProps> = ({
   return (
     <View style={styles.container}>
       <TextInput
-        label="Email Address"
-        placeholder="Enter your email"
+        label={emailLabel}
+        placeholder={emailPlaceholder}
         value={email}
         onChangeText={setEmail}
         error={emailError}
       />
       <TextInput
-        label="Password"
-        placeholder="Enter your password"
+        label={passwordLabel}
+        placeholder={passwordPlaceholder}
         value={password}
         onChangeText={setPassword}
         secureTextEntry
         error={passwordError}
       />
       <Button
-        title="Sign In"
+        title={submitButtonTitle}
         onPress={handleSubmit}
         loading={loading}
         disabled={!email || !password}