Модальные окна и оверлеи

<Stack.Screen
    name="Modal"
    component={ModalScreen}
    options={{
        presentation: 'modal',
        animation: 'slide_from_bottom',
    }}
/>

navigation.navigate('Modal');

navigation.goBack();

import { Modal } from 'react-native';

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

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    content: {
        backgroundColor: '#fff',
        borderRadius: 16,
        padding: 24,
        width: '80%',
    },
});

npx expo install @gorhom/bottom-sheet

import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
import { useRef, useMemo } from 'react';

function Sheet() {
    const ref = useRef<BottomSheet>(null);
    const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);

    return (
        <BottomSheet ref={ref} index={-1} snapPoints={snapPoints}>
            <BottomSheetView>
                <Text>Содержимое</Text>
            </BottomSheetView>
        </BottomSheet>
    );
}

// открыть
ref.current?.expand();

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

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

if (Platform.OS === 'ios') {
    ActionSheetIOS.showActionSheetWithOptions(
        {
            options: ['Отмена', 'Поделиться', 'Копировать', 'Удалить'],
            destructiveButtonIndex: 3,
            cancelButtonIndex: 0,
        },
        (index) => {
            if (index === 1) share();
            if (index === 2) copy();
            if (index === 3) remove();
        }
    );
}

function ActionSheet({ actions, visible, onClose }: ActionSheetProps) {
    return (
        <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
            <Pressable style={styles.backdrop} onPress={onClose}>
                <View style={styles.sheet}>
                    {actions.map((action) => (
                        <Pressable
                            key={action.label}
                            onPress={() => { action.onPress(); onClose(); }}
                            style={styles.item}
                        >
                            <Text style={action.destructive ? styles.destructive : styles.text}>
                                {action.label}
                            </Text>
                        </Pressable>
                    ))}
                </View>
            </Pressable>
        </Modal>
    );
}

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

Toast.show({
    type: 'success',
    text1: 'Сохранено',
    position: 'bottom',
});