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で見る