mobile_react_native
React Native best practices, hooks, navigation ve performance optimization.
>_
Quick Installnpxskills add vuralserhat86/antigravity-agentic-skills--skill mobile_react_nativeInstructions
Loading…
React Native best practices, hooks, navigation ve performance optimization.
npxskills add vuralserhat86/antigravity-agentic-skills--skill mobile_react_nativeLoading…
React Native best practices ve performance optimization.
src/
├── components/
│ ├── common/ # Reusable
│ └── screens/ # Screen components
├── hooks/ # Custom hooks
├── services/ # API, storage
├── store/ # State (Zustand)
├── navigation/
└── App.tsx
// FlatList optimizasyonu
<FlatList
data={items}
keyExtractor={(item) => item.id}
removeClippedSubviews={true}
maxToRenderPerBatch={10}
windowSize={5}
getItemLayout={(data, index) => ({
length: ITEM_HEIGHT,
offset: ITEM_HEIGHT * index,
index,
})}
/>
// Memoization
const Component = React.memo(({ data }) => { });
const callback = useCallback(() => {}, [deps]);
const value = useMemo(() => compute(), [deps]);
// ❌ AsyncStorage güvenli değil
// ✅ SecureStore kullan
import * as SecureStore from 'expo-secure-store';
await SecureStore.setItemAsync('token', userToken);
const token = await SecureStore.getItemAsync('token');
type RootStackParamList = {
Home: undefined;
Profile: { userId: string };
};
const Stack = createNativeStackNavigator<RootStackParamList>();
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
const useAuthStore = create(
persist(
(set) => ({
user: null,
login: (user) => set({ user }),
logout: () => set({ user: null }),
}),
{ name: 'auth-storage' }
)
);
import { Platform } from 'react-native';
const padding = Platform.select({ ios: 20, android: 0 });
// Dosya bazlı: Button.ios.tsx, Button.android.tsx
Mobile React Native v1.1 - Enhanced
Kaynak: React Native Performance Guide & Expo Guideline
expo-router v3 kullan.FlatList yerine FlashList (Shopify) kullan (5x performans).expo-image ile caching ve blurhash desteği ekle.Hermes engine'i aktifleştir ve bundle size analizi yap.expo-updates ile store onayı beklemeden OTA (Over-the-Air) güncelleme yap.| Aşama | Doğrulama |
|---|---|
| 1 | UI thread (JS thread) 60fps'in altına düşüyor mu? |
| 2 | Uygulama boyutu (APK/IPA) optimize edildi mi? |
| 3 | Android ve iOS davranışları (Navigation, Keyboard) tutarlı mı? |
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).