react-native-expertise
Expert knowledge in React Native, focusing on FlatList optimization and OTA Updates.
Datos de origen
- Repositorio
- j4flmao/agent-skills
- Última actividad en el origen
- 6 de septiembre de 2026 a las 13:45
- Idioma detectado de SKILL.md
- inglés
- Estrellas
- 27
- Forks
- 1
Opciones de instalación
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Revisa los archivos de origen
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Explorador de archivos
18 archivosMostrando SKILL.md
SKILL.md
Instrucciones de origen · Vista previa de solo lectura- 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]
```
Ver en GitHub