react-native-expertise
Expert knowledge in React Native, focusing on FlatList optimization and OTA Updates.
Quellinformationen
- Repository
- j4flmao/agent-skills
- Letzte Quellaktivität
- 6. September 2026 um 13:45
- Erkannte Sprache von SKILL.md
- Englisch
- Sterne
- 27
- Forks
- 1
Installationsoptionen
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Datei-Explorer
18 DateienSKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau- 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]
```
Auf GitHub ansehen