Rn Screen

Overview

Generates a React Native screen component following FSD architecture (pages/ layer), using useQuery for data fetching with proper loading, error, and empty state handling. StyleSheet properties are ordered: layout → spacing → visual → typography.

Template

// src/pages/ExampleScreen/ui/ExampleScreen.tsx
import React from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';
import { useQuery } from '@tanstack/react-query';

interface Props {
  // navigation props if needed
}

const ExampleScreen = ({}: Props) => {
  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['example'],
    queryFn: fetchExample,
  });

  if (isLoading) {
    return (
      <View style={styles.centered}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  if (isError) {
    return (
      <View style={styles.centered}>
        <Text style={styles.errorText}>{error.message}</Text>
      </View>
    );
  }

  if (!data || data.length === 0) {
    return (
      <View style={styles.centered}>
        <Text style={styles.emptyText}>No items found.</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      {/* main content */}
    </View>
  );
};

export default ExampleScreen;

const styles = StyleSheet.create({
  // layout
  container: {
    flex: 1,
  },
  centered: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  // spacing
  // visual
  // typography
  errorText: {
    color: '#E53E3E',
    fontSize: 14,
  },
  emptyText: {
    color: '#718096',
    fontSize: 14,
  },
});