Алерты и обратная связь

import { Alert } from 'react-native';

Alert.alert('Заголовок', 'Сообщение');

Alert.alert(
    'Удалить?',
    'Это действие нельзя отменить',
    [
        { text: 'Отмена', style: 'cancel' },
        { text: 'Удалить', style: 'destructive', onPress: () => deleteItem() },
    ]
);

import { ActivityIndicator, View } from 'react-native';

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <ActivityIndicator size="large" color="#c1442e" />
</View>

import { ToastAndroid, Platform } from 'react-native';

if (Platform.OS === 'android') {
    ToastAndroid.show('Сохранено', ToastAndroid.SHORT);
}

npm install react-native-toast-message

import Toast from 'react-native-toast-message';

// в корне приложения
<Toast />

// вызов
Toast.show({
    type: 'success',
    text1: 'Сохранено',
    text2: 'Пост опубликован',
});

import { Modal, View, Text, Pressable } from 'react-native';

<Modal
    visible={isOpen}
    animationType="slide"  // 'slide', 'fade', 'none'
    transparent
    onRequestClose={() => setOpen(false)}
>
    <View style={styles.overlay}>
        <View style={styles.content}>
            <Text>Модальное окно</Text>
            <Pressable onPress={() => setOpen(false)}>
                <Text>Закрыть</Text>
            </Pressable>
        </View>
    </View>
</Modal>

import { Skeleton } from 'moti/skeleton';

<Skeleton colorMode="light" width={200} height={20} />

<FlatList
    data={items}
    ListEmptyComponent={
        <View style={styles.empty}>
            <Text style={styles.emptyTitle}>Пока пусто</Text>
            <Text style={styles.emptyText}>Начните добавлять записи</Text>
        </View>
    }
    renderItem={...}
/>

function ErrorState({ error, onRetry }: { error: Error; onRetry: () => void }) {
    return (
        <View style={styles.error}>
            <Text style={styles.errorTitle}>Ошибка</Text>
            <Text style={styles.errorText}>{error.message}</Text>
            <Pressable onPress={onRetry}>
                <Text>Повторить</Text>
            </Pressable>
        </View>
    );
}

async function save() {
    try {
        await api.create(data);
        Toast.show({ type: 'success', text1: 'Сохранено' });
    } catch (e) {
        Toast.show({ type: 'error', text1: 'Ошибка', text2: (e as Error).message });
    }
}