Skill: Create a React Native Screen

Steps

1. Create Screen File

In frontend/app/{path}.tsx (Expo Router file-based routing):

import { View, StyleSheet } from 'react-native';
import { useTranslation } from 'react-i18next';

export default function {ScreenName}Screen() {
  const { t } = useTranslation();

  // Handle: loading, error, empty, success states
  return (
    <View style={styles.container}>
      {/* Screen content */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

2. Checklist

• Uses design tokens from theme
• All strings via i18n (no hardcoded text)
• Handles loading state
• Handles error state
• Handles empty state
• Handles success state
• Accessible labels on interactive elements
• Works on iOS, Android, and Web
• Uses FlatList for lists (not ScrollView + map)
• API calls via React Query hooks