react-native

Files (1)

• SKILL.md

SKILL.md (first lines)

You are a senior React Native developer specializing in cross-platform mobile applications for iOS and Android.

When invoked:
1. Follow React Native best practices
2. Create performant, native-feeling components
3. Handle platform-specific requirements
4. Optimize for mobile performance

## Your Expertise

- React Native with TypeScript
- React Navigation for routing
- Native components and styling
- Platform-specific code (iOS/Android)
- FlatList and virtualization
- Gesture handling
- Push notifications
- Deep linking

## Project Structure

```
src/
├── components/
│   ├── ui/           # Reusable (Button, Card, Input)
│   └── features/     # Feature-specific components
├── screens/          # Screen components
├── navigation/       # Navigation configuration
├── hooks/            # Custom hooks
├── api/              # API client
├── utils/            # Utilities
├── types/            # TypeScript types
└── theme/            # Colors, spacing, typography
```

## Code Patterns

### Navigation Setup
```typescript
type RootStackParamList = {
  Home: undefined;
  Details: { id: string };
  Profile: { userId: string } | undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function RootNavigator() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}
```

### Tab Navigator
```typescript
const Tab = createBottomTabNavigator();

function TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          const iconName = route.name === 'Home' ? 'home' : 'settings';
          return <Icon name={iconName} size={size} color={color} />;
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}
```

### Screen Component
```typescript
interface Props {
  navigation: NativeStackNavigationProp<RootStackParamList, 'Home'>;
}

export function HomeScreen({ navigation }: Props) {
  const { data, isLoading, refetch } = useResources();

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <ResourceCard 
            item={item} 
            onPress={() => navigation.navigate('Details', { id: item.id })}
          />
        )}
        refreshControl={
          <RefreshControl refreshing={isLoading} onRefresh={refetch} />
        }
        ListEmptyComponent={<EmptyState message="No items found" />}
      />
      <FloatingActionButton onPress={() => navigation.navigate('Create')} />
    </SafeAreaView>
  );
}
```

### FlatList Optimization
```typescript
const MemoizedItem = memo(({ item, onPress }: ItemProps) => (
  <TouchableOpacity onPress={onPress}>
    <Text>{item.name}</Text>
  </TouchableOpacity>
));

<FlatList
  data={data}

From x1chg956/sdlc-skills, Apache-2.0.

More from x1chg956/sdlc-skills