@ranimontagna/agent-toolkit 0.1.5 → 0.1.7

package/skills/frontend/react-native/react-native-expert/references/list-optimization.md

@@ -0,0 +1,204 @@
+# List Optimization
+
+## Optimized FlatList
+
+```typescript
+import { FlatList, ListRenderItem } from 'react-native';
+import { memo, useCallback } from 'react';
+
+interface Item {
+  id: string;
+  title: string;
+  subtitle: string;
+}
+
+// Memoized list item
+const ListItem = memo(function ListItem({
+  item,
+  onPress
+}: {
+  item: Item;
+  onPress: (id: string) => void;
+}) {
+  return (
+    <Pressable onPress={() => onPress(item.id)} style={styles.item}>
+      <Text style={styles.title}>{item.title}</Text>
+      <Text style={styles.subtitle}>{item.subtitle}</Text>
+    </Pressable>
+  );
+});
+
+function OptimizedList({ data }: { data: Item[] }) {
+  // Memoize callbacks
+  const handlePress = useCallback((id: string) => {
+    console.log('Selected:', id);
+  }, []);
+
+  const renderItem: ListRenderItem<Item> = useCallback(
+    ({ item }) => <ListItem item={item} onPress={handlePress} />,
+    [handlePress]
+  );
+
+  const keyExtractor = useCallback((item: Item) => item.id, []);
+
+  // Fixed height for getItemLayout
+  const getItemLayout = useCallback(
+    (_: any, index: number) => ({
+      length: ITEM_HEIGHT,
+      offset: ITEM_HEIGHT * index,
+      index,
+    }),
+    []
+  );
+
+  return (
+    <FlatList
+      data={data}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
+      getItemLayout={getItemLayout}
+      // Performance props
+      removeClippedSubviews
+      maxToRenderPerBatch={10}
+      windowSize={5}
+      initialNumToRender={10}
+      updateCellsBatchingPeriod={50}
+    />
+  );
+}
+
+const ITEM_HEIGHT = 72;
+```
+
+## SectionList
+
+```typescript
+import { SectionList } from 'react-native';
+
+interface Section {
+  title: string;
+  data: Item[];
+}
+
+function GroupedList({ sections }: { sections: Section[] }) {
+  const renderSectionHeader = useCallback(
+    ({ section }: { section: Section }) => (
+      <View style={styles.sectionHeader}>
+        <Text style={styles.sectionTitle}>{section.title}</Text>
+      </View>
+    ),
+    []
+  );
+
+  return (
+    <SectionList
+      sections={sections}
+      renderItem={renderItem}
+      renderSectionHeader={renderSectionHeader}
+      keyExtractor={keyExtractor}
+      stickySectionHeadersEnabled
+    />
+  );
+}
+```
+
+## Pull to Refresh
+
+```typescript
+function RefreshableList({ data, onRefresh }: Props) {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const handleRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await onRefresh();
+    setRefreshing(false);
+  }, [onRefresh]);
+
+  return (
+    <FlatList
+      data={data}
+      renderItem={renderItem}
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={handleRefresh}
+          tintColor="#007AFF"
+        />
+      }
+    />
+  );
+}
+```
+
+## Infinite Scroll
+
+```typescript
+function InfiniteList() {
+  const [data, setData] = useState<Item[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+
+  const loadMore = useCallback(async () => {
+    if (loading || !hasMore) return;
+
+    setLoading(true);
+    const newItems = await fetchMoreItems(data.length);
+
+    if (newItems.length === 0) {
+      setHasMore(false);
+    } else {
+      setData(prev => [...prev, ...newItems]);
+    }
+    setLoading(false);
+  }, [data.length, loading, hasMore]);
+
+  const renderFooter = useCallback(() => {
+    if (!loading) return null;
+    return <ActivityIndicator style={styles.loader} />;
+  }, [loading]);
+
+  return (
+    <FlatList
+      data={data}
+      renderItem={renderItem}
+      onEndReached={loadMore}
+      onEndReachedThreshold={0.5}
+      ListFooterComponent={renderFooter}
+    />
+  );
+}
+```
+
+## FlashList (Alternative)
+
+```typescript
+import { FlashList } from '@shopify/flash-list';
+
+function FastList({ data }: { data: Item[] }) {
+  return (
+    <FlashList
+      data={data}
+      renderItem={renderItem}
+      estimatedItemSize={72}
+      keyExtractor={keyExtractor}
+    />
+  );
+}
+```
+
+## Quick Reference
+
+| Prop | Purpose |
+|------|---------|
+| `removeClippedSubviews` | Unmount off-screen items |
+| `maxToRenderPerBatch` | Items per render batch |
+| `windowSize` | Render window multiplier |
+| `initialNumToRender` | Initial items to render |
+| `getItemLayout` | Skip measurement (fixed height) |
+
+| Optimization | When |
+|--------------|------|
+| `memo()` | All list items |
+| `useCallback` | renderItem, keyExtractor |
+| `getItemLayout` | Fixed height items |
+| `FlashList` | Very large lists |

package/skills/frontend/react-native/react-native-expert/references/platform-handling.md

@@ -0,0 +1,188 @@
+# Platform Handling
+
+## Platform.select
+
+```typescript
+import { Platform, StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 16,
+    borderRadius: 12,
+    backgroundColor: '#fff',
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+      },
+      android: {
+        elevation: 4,
+      },
+    }),
+  },
+  text: {
+    fontFamily: Platform.select({
+      ios: 'Helvetica Neue',
+      android: 'Roboto',
+    }),
+  },
+});
+```
+
+## Platform.OS
+
+```typescript
+import { Platform } from 'react-native';
+
+function MyComponent() {
+  const isIOS = Platform.OS === 'ios';
+  const isAndroid = Platform.OS === 'android';
+
+  return (
+    <View>
+      {isIOS && <IOSOnlyComponent />}
+      <Text>{isAndroid ? 'Android' : 'iOS'}</Text>
+    </View>
+  );
+}
+```
+
+## Platform-Specific Files
+
+```
+components/
+├── Button.tsx           # Shared logic
+├── Button.ios.tsx       # iOS-specific
+└── Button.android.tsx   # Android-specific
+```
+
+```typescript
+// Import resolves to correct platform file
+import Button from './components/Button';
+```
+
+## SafeAreaView
+
+```typescript
+import { SafeAreaView, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+// Method 1: SafeAreaView component
+function Screen() {
+  return (
+    <SafeAreaView style={styles.container}>
+      <Content />
+    </SafeAreaView>
+  );
+}
+
+// Method 2: useSafeAreaInsets hook (more control)
+function CustomHeader() {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View style={[styles.header, { paddingTop: insets.top }]}>
+      <Text>Header</Text>
+    </View>
+  );
+}
+
+// Method 3: SafeAreaProvider context
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+function App() {
+  return (
+    <SafeAreaProvider>
+      <Navigation />
+    </SafeAreaProvider>
+  );
+}
+```
+
+## KeyboardAvoidingView
+
+```typescript
+import { KeyboardAvoidingView, Platform } from 'react-native';
+
+function FormScreen() {
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ flex: 1 }}
+      keyboardVerticalOffset={Platform.select({ ios: 88, android: 0 })}
+    >
+      <ScrollView>
+        <TextInput placeholder="Name" />
+        <TextInput placeholder="Email" />
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+```
+
+## StatusBar
+
+```typescript
+import { StatusBar, Platform } from 'react-native';
+
+function Screen() {
+  return (
+    <>
+      <StatusBar
+        barStyle={Platform.OS === 'ios' ? 'dark-content' : 'light-content'}
+        backgroundColor={Platform.OS === 'android' ? '#000' : undefined}
+      />
+      <Content />
+    </>
+  );
+}
+```
+
+## Android Back Button
+
+```typescript
+import { useEffect } from 'react';
+import { BackHandler, Platform } from 'react-native';
+
+function useBackHandler(handler: () => boolean) {
+  useEffect(() => {
+    if (Platform.OS !== 'android') return;
+
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      handler
+    );
+
+    return () => subscription.remove();
+  }, [handler]);
+}
+
+// Usage
+function Screen() {
+  useBackHandler(() => {
+    if (hasUnsavedChanges) {
+      showDiscardAlert();
+      return true; // Prevent default back
+    }
+    return false; // Allow default back
+  });
+}
+```
+
+## Quick Reference
+
+| API | Purpose |
+|-----|---------|
+| `Platform.OS` | Get platform ('ios' / 'android') |
+| `Platform.select()` | Platform-specific values |
+| `Platform.Version` | OS version number |
+| `.ios.tsx` / `.android.tsx` | Platform-specific files |
+
+| Component | Purpose |
+|-----------|---------|
+| `SafeAreaView` | Avoid notch/home indicator |
+| `KeyboardAvoidingView` | Keyboard handling |
+| `StatusBar` | Status bar styling |
+| `BackHandler` | Android back button |

package/skills/frontend/react-native/react-native-expert/references/project-structure.md

@@ -0,0 +1,171 @@
+# Project Structure
+
+## Expo Router Structure
+
+```
+my-app/
+├── app/                      # File-based routing
+│   ├── _layout.tsx           # Root layout
+│   ├── index.tsx             # Home screen
+│   ├── +not-found.tsx        # 404 screen
+│   ├── (tabs)/               # Tab navigator group
+│   │   ├── _layout.tsx
+│   │   ├── index.tsx
+│   │   ├── search.tsx
+│   │   └── profile.tsx
+│   ├── (auth)/               # Auth screens (no tabs)
+│   │   ├── _layout.tsx
+│   │   ├── login.tsx
+│   │   └── register.tsx
+│   └── [id].tsx              # Dynamic route
+├── components/
+│   ├── ui/                   # Reusable UI components
+│   │   ├── Button.tsx
+│   │   ├── Card.tsx
+│   │   └── Input.tsx
+│   └── features/             # Feature-specific components
+│       ├── ProductCard.tsx
+│       └── UserAvatar.tsx
+├── hooks/
+│   ├── useAuth.ts
+│   ├── useStorage.ts
+│   └── useApi.ts
+├── services/
+│   ├── api.ts                # API client
+│   └── auth.ts               # Auth service
+├── stores/
+│   └── useUserStore.ts       # Zustand stores
+├── constants/
+│   ├── colors.ts
+│   └── layout.ts
+├── types/
+│   └── index.ts
+├── utils/
+│   └── helpers.ts
+├── assets/
+│   ├── images/
+│   └── fonts/
+├── app.json
+├── babel.config.js
+└── tsconfig.json
+```
+
+## app.json Configuration
+
+```json
+{
+  "expo": {
+    "name": "My App",
+    "slug": "my-app",
+    "version": "1.0.0",
+    "scheme": "myapp",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.company.myapp"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.company.myapp"
+    },
+    "plugins": [
+      "expo-router"
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}
+```
+
+## tsconfig.json
+
+```json
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"],
+      "@/components/*": ["components/*"],
+      "@/hooks/*": ["hooks/*"],
+      "@/services/*": ["services/*"],
+      "@/stores/*": ["stores/*"],
+      "@/types/*": ["types/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}
+```
+
+## babel.config.js
+
+```javascript
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          root: ['.'],
+          alias: {
+            '@': '.',
+            '@/components': './components',
+            '@/hooks': './hooks',
+          },
+        },
+      ],
+      'react-native-reanimated/plugin', // Must be last
+    ],
+  };
+};
+```
+
+## Essential Dependencies
+
+```json
+{
+  "dependencies": {
+    "expo": "~50.0.0",
+    "expo-router": "~3.4.0",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-screens": "~3.29.0",
+    "@react-navigation/native": "^6.1.0",
+    "react-native-reanimated": "~3.6.0",
+    "react-native-gesture-handler": "~2.14.0",
+    "zustand": "^4.5.0",
+    "@tanstack/react-query": "^5.0.0",
+    "expo-image": "~1.10.0",
+    "react-native-mmkv": "^2.11.0"
+  },
+  "devDependencies": {
+    "@types/react": "~18.2.0",
+    "typescript": "^5.3.0"
+  }
+}
+```
+
+## Quick Reference
+
+| Directory | Purpose |
+|-----------|---------|
+| `app/` | File-based routes |
+| `components/ui/` | Reusable UI |
+| `components/features/` | Feature components |
+| `hooks/` | Custom hooks |
+| `services/` | API, auth services |
+| `stores/` | State management |
+| `constants/` | App constants |
+| `types/` | TypeScript types |