react-native-expertise
Expert knowledge in React Native, focusing on FlatList optimization and OTA Updates.
소스 정보
- 저장소
- j4flmao/agent-skills
- 최근 소스 활동
- 2026년 9월 6일 13:45
- 감지된 SKILL.md 언어
- 영어
- 스타
- 27
- 포크
- 1
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
파일 탐색기
18 개 파일SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- react-native-expertise
- description
- Expert knowledge in React Native, focusing on FlatList optimization and OTA Updates.
# React Native Expertise
## FlatList Optimization
To ensure smooth scrolling in `FlatList`:
- Use `removeClippedSubviews={true}`.
- Implement `getItemLayout` for fixed-height items.
- Memoize `renderItem` using `React.memo` or `useCallback`.
- Use `keyExtractor` with stable unique keys.
```jsx
import React, { useCallback } from 'react';
import { FlatList, View, Text } from 'react-native';
const Item = React.memo(({ title }) => (
<View style={{ height: 50 }}><Text>{title}</Text></View>
));
export const OptimizedList = ({ data }) => {
const renderItem = useCallback(({ item }) => <Item title={item.title} />, []);
const getItemLayout = useCallback((data, index) => (
{ length: 50, offset: 50 * index, index }
), []);
return (
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={item => item.id}
getItemLayout={getItemLayout}
removeClippedSubviews={true}
maxToRenderPerBatch={10}
windowSize={5}
/>
);
};
```
## OTA Updates
OTA updates allow you to ship bug fixes and small features instantly.
- Always verify compatibility between JS bundle and native layer before deploying.
- Ensure critical paths handle update download failures gracefully.
```mermaid
%%{init: {"theme": "default", "flowchart": {"useMaxWidth": true}}}%%
flowchart TD
A[Trigger OTA Update] --> B{Check Native Version}
B -- Matches --> C[Download JS Bundle]
B -- Mismatch --> D[Require App Store Update]
C --> E[Apply Update on Next Restart]
```
GitHub에서 보기